[paid accounts] Adding a header image to the top of the page

[cyrnelle]

1. Create a new theme layer. (Follow the steps in this post to create a theme layer.) If you have already created a theme layer for the style, just add the following code to it.

2. Copy and alter the following code and modify the part in red as you see fit. Paste it right after the layerinfo stuff.

Comments

[phasera]

Very helpful! Followed the instructions and it worked out perfectly. SO MUCH EASIER than trying to do all the customizations with Opal and Component and the like.

And the one question I had about the discrepancy between the journal width and the banner, you've already got answered. ^_^

You rock.

[frostthepie]

Is there anyway to do this in a free account?

[cyrnelle]

http://www.livejournal.com/community/s2flexisquares/3906.html

[cyrnelle]

Replace < with < and > with > else you can't post the code.

[tinnny]

Works fine, but I wanted to add a 1px border (like the rest of the journal).

When I do that, the border will always be 100% wide. How can I fix that?

p.s.: Where can I get more info on the actual code of the parent theme and stylesheet, so I can customize the default settings? I know my way around the css code once I see it, but I can't find it.

(sorry, total lj customization newbie, any pointers much appreciated!)

[afuna]

You can grab the source code from the link on the right: Flexible Squares Layer Source (And don't worry if you didn't notice it before; it's newly added :))

For future reference, try going to http://www.livejournal.com/customize/advanced/ and explore the links leading from it.

Ah, and if you're new to S2, you might want to look at this entry first. It discusses how to create a theme layer.

[tinnny]

OK, I got all that figured out now. Thanks a lot!

Btw, I changed the comment indent, and think the variable $margin in the print_comments() method is unused. Shouldn't it say

style="margin-$margin: instead of

style="margin-$*userpic_position: ?

The problem with the header pic persists, though. No matter what I set as the width of the image, the border around it will always take up 100% of the width of the screen. I see the source code, it's not inside a table or anything, so why does the border want to leave my image? This must be really easy, I think I've got a knot in my brain... I left the border around the image for now, feel free to look at my journal to see what I mean.

[afuna]

Re: header
Hm, try adding a unit of measurement to the header size (px or %, etc) and see if that works

Re: margin
I didn't notice it before, but yes that particular variable does seem unused, and I'm not sure what it's for XD. However, if you change the code to say style="margin-$margin" instead, when the userpic is positioned to the left, it will indent the thread from the right; and when the userpic icon is positioned to the right, it will indent the thread from the left.

[thespyglass]

Ooh, excellent, thanks a lot :)

[roark28]

Thanks very much, I got it to work this time. Just a note, on mine the extra part was 34px. Also, the journal is one pixel to the left of the header which is a bit o_O Anyway, thanks very much for the code ^^