Log in

No account? Create an account

Previous Entry | Next Entry

header banner add-in?

  • Dec. 30th, 2006 at 9:32 PM
I just got a paid account and I'm looking forward to customizing things, but I'm not very familiar with CSS, though I do have some experience with HTML. I haven't seen a tutorial for exactly what I want to do -- I don't want to replace the header with a new one, I'd like to know how to put in a image banner *between* the header and where the sidebar(s)/posts start, if that's possible.

I'm using s2 Expressive, Playful Cherry Blossoms, viewing under IE. The banner I intend to use is 900 x 180 pixels, though it wouldn't be hard to make wider, if necessary, to fit in exactly with the width of the body (could anyone tell me the standard pixel size of different sections in Expressive?).


( 4 comments — Leave a comment )
Jan. 2nd, 2007 04:56 am (UTC)
Huh. That's a new one for me. Maybe try some kind of styling on #header-decor like
#header-decor .decor {
    background-image: url();
and put your full image path in the parentheses. It'll probably require a bit of experimentation to get the right context.
Jan. 2nd, 2007 11:25 am (UTC)
Simply putting in

#header-decor .decor {
background-image: url(http://h1.ripway.com/spikedlorelei/mutebanner3.jpg);

into Custom CSS has no visible effect, so I'm guessing I probably need to put in something to make space for it after the header, "padding" of some kind, either on the bottom of the regular header or on the top of the entries or sidebar part? Or should I try putting that stuff into header-decor? I say that because I'm guessing right now the entries are overlapping right over the banner instead of moving down for it.

(and I realize the banner color isn't quite matching the rest of the journal, I figure I'll try to see if I can get this to work at all, then fiddle with the banner to get it to look seamless and color-matched later)
Jan. 2nd, 2007 04:33 pm (UTC)
Right, I figured out the ".decor" specifier isn't necessary... You'll want to add properties to #header-decor to look something like this:
#header-decor {
    display: block;
    background-image: url(http://h1.ripway.com/spikedlorelei/mutebanner3.jpg);
    width: 900px;
    height: 180px;
    bottom: 0px;
    left: 0px;
where you'll want to change the width, height, bottom, and left to get it to look the way you want. You may also need to change the positioning of the base theme header image to keep it from getting moved around.
Jan. 3rd, 2007 07:46 am (UTC)
It seems to be working.

Thanks so much for your help! :)
( 4 comments — Leave a comment )

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars