How to add a header to your journal

Jun 15, 2005 15:03


Note: This method of adding a header to your journal uses the old style system (S1) and the Generator style. Both free and paid users can use this method. There is another method to add a header to your journal, using the new style system (S2), but it is a bit more complicated, and I believe it is also only available for paid users.

Step 1. Make sure the header is saved to your computer. Check the dimensions of the banner. For example, let's say that the header you want to put on your journal is 400 x 250 pixels.

Step 2. Upload the header to an image hosting service, such as Photobucket.com.

Step 3. Make sure you are logged into LiveJournal. Then, hover your mouse over "Manage" on the navigation bar at the top of the LiveJournal page, and then click "Customize."

Step 4. Make sure you have selected to use the old system (S1). Then, click on "Modify Journal."

Step 5. For each page you want to see the header on, select the style "Generator". (For example, if you want to see the header on each page of your journal [the most recent events page, the friends view page, the calendar page, and the day view page], select "Generator" for each of those pages.

Step 6. Scroll down the page to "Style Overrides."

Step 7. In the box, paste this code (found at howto and customized by me):
GLOBAL_HEAD<=

<=GLOBAL_HEAD

The "margin-top: 260px" part means that I want to move all of my journal entries down the page 260 pixels, to make a big blank space. You'll need to customize this number to suit your header. (Remember the header I mentioned at the beginning? It was 400 pixels wide by 250 pixels tall. I want to move my journal entries down 260 pixels so that there will be room enough for the header and an extra 10 pixels, a small space, between the journal entries and the header. If you're adding a 250-pixel tall header to your journal, and don't want a space between it and your journal entries, you'll want to put just "250px" where "260px" is now. =)

Step 8. Find the part in the code in your override box where it says "background-image: url(yourimageURLhere)". Replace "yourimageURLhere" with your image URL.

You shouldn't need to change the rest of the code unless you're unhappy with where the header is, or what color your background is. Hope this helps!

----

So, what do you think? Too complicated? Hard to understand? Did I do something wrong, or is there a mistake in th code? Let me know! =)

resources: tutorials

Previous post Next post
Up