TUTORIALS | DROP DOWN MENUS |WEBSITE NAVIGATION | WEBSITE SIZE |BLOGS - HEADERS | BLOGS - BACKGROUNDS| BLOGS - CSS OVERRIDES

Add Custom Header

Add Custom Header Graphic

First you will need to host your image and obtain the image URL.

To obtain the image URL:

1. Login to your Online Office.
2. From the Website Jump To menu, select edit.
3. Click the Add a New Page link
4. Title the page and select Content Page as the Page Type.
5. Click OK.
6. When the screen refreshes, check the radio button next to hidden at the top of the page.
7. Click on Add Content in the Center Column.
8. Choose Add to Page beside Custom Content.
9. Choose a title and click Next.
10. Within the Content Editor, select the Insert Image icon from the tool bar.
11. Browse your computer for the image you are using for your blogs header graphic.
12. The recommended header graphic size is 804 pixels wide and 221 pixels high. You can adjust the size of the photo within the Image Properties screen.
13. Copy the URL  and paste it into a notepad for safe keeping.
14. ex: http://media.point2.com/p2a/htmltext/b964/7f47/ef75/18d9bb8511d52f592471/original.jpg
15. Click OK

Now you will have to go to your Blog Dashboard to complete the process.

1. From the Blogs drop down menu, select Edit.
2. Ensure that you are using on of the Paperclip themes
3. Under the Global Settings menu, click on Change how My Blog Looks.
4. From this page, you will see the theme that you are currently using, if it does not specify that you are using a Paperclip theme choose one from the menu.
5. Click Save.
6. Click on Administration from the blue horizontal menu.
7. Then, from the menu along the left, click on blogs, then again on Default Settings.
8. Check the box beside Enable Blog Owners to add content to HTML Head.
9. Now, click on My Blogs from the blue horizontal menu.
10. Click on Global Settings, then again on Change How My Blog Looks.
11. Click on the CSS Overrides tab.
12. Enter the following code:
     

    #masthead { background-image: url('URL of the Image'); background-repeat: no-repeat; }

    
     
13. Replace the URL of the image with your images URL. Ex:
     

    #masthead { background-image: url('URL of the Image'); background-repeat: no-repeat; }

    
     
14. Click Save.