?

Log in

No account? Create an account

Previous Entry | Next Entry

Changing Header Image and Related How-tos

  • Feb. 22nd, 2007 at 4:38 PM
Since a number of these questions have come up over time, I decided to try to compile all the issues into one post.

How do I Change the Header Image?

The CSS to change the header image is pretty simple, just copy and paste into the Custom CSS box or into your theme layer:
#header-inner {
    background-image: url(http://URL TO YOUR IMAGE);
}
Be sure that your image is uploaded to a host that allows remote linking (like ScrapBook, Photobucket, Flickr, etc.) Just replace the red text with the appropriate URL.

Removing the Previous Images

Where things will get interesting, however, is in disabling the existing header image in the theme layer. Some of the base themes put the image specification in #header instead of #header-inner. Other themes have images in both ID blocks, and still others have one or more transparent images on top of a background color (Bunnylicious, for instance). There are simply too many themes and too many possible combinations to give detailed directions for all of them. If part of the base theme's image is still showing up, the following CSS should take care of it:
#header, #header-content {
    background-image: none;
}
The yellow text is optional, depending on the base style.

Adjusting the Header Height

The base themes use varying combinations of margins and padding on the header content and text boxes to "stretch" the header box vertically and accommodate images of different sizes. As above, there is a simple fix that does not require you to calculate margins or padding. In the #header-inner {} block specified above, add a height property, replacing the xxxs with the height of your new header image:
#header-inner {
    background-image: url(http://URL TO YOUR IMAGE);
    height: xxxpx;
}
Don't forget the "px;", it's mandatory. Do NOT place the "height:" line in #header. Because of the way the #header and #header-inner blocks are positioned, an explicit height setting in the outer box can actually push the inner box outside the outer and hide the header text, although this behavior differs across browsers and in different themes.

Adjusting the Layout Width

For uniformity on Vox's site, all the layouts default to 940px wide. The sidebars default to 190px wide, leaving 750px for the main content column in the 2-column layout, and 560px in the 3-column layout (the actual column with is 40px less, because of 20px margin on either side). Therefore, to scale the journal content to the correct width (assuming the sidebars remain the same width) take the width of your new header image and subtract 190px for each sidebar you plan to have in your layout. This number will be the new width of the #alpha column, excluding margins. Then change the widths of the overall journal container, the header container, the main content column, and (in a 3-column layout) the position of the second sidebar. This calls for an example.

Say the new header image is 850 pixels wide, and uses the two-column "sidebar on left" layout. The new container width will be 850px, and the main content width will be 850 - 190 = 660px. This is the CSS to make these changes (with optional comments):
#container-inner, #header-inner {
    width: 850px; /* Change the width of the header and overall container boxes*/
}
#alpha {
    width: 660px; /* Overall width minus sidebar width*/
}
.layout-tw #alpha-inner {
    width: 620px; /* Width of #alpha minus 40px margins*/
}

Moving the Header Text

The location of the header text (i.e. linkbar, journal title and subtitle) is another property that is not defined consistently across all Expressive themes. The header text boxes are contained in #header-content (and #header-content-inner), and most of the layouts use a four-way margin specifier in one of the two blocks to position the box. For example, the Cityscape parent uses:
#header-content-inner {
    margin: 20px 15px 117px 20px;
}
With four numbers, the margins go [top, right, bottom, left]. To move the text down, increase the first number; to move the text right, increase the last number. However, be careful when changing the default numbers because the top and bottom margins (in this case) are being used to size the header image vertically. Thus, the third number would have to be reduced to keep from stretching the header block. Check the settings in the base theme stylesheet to see where the margins are applied and change that block accordingly.

That should probably cover 95% of header questions, but if I've missed something, comment and I'll address it.

Comments

( 120 comments — Leave a comment )
Page 1 of 3
<<[1] [2] [3] >>
bleakharvest
Feb. 22nd, 2007 10:27 pm (UTC)
These really are helpful. Thank you for your continued effort =)
dragonheart97
Feb. 23rd, 2007 09:24 pm (UTC)
I only mention this because I know it's around here somewhere and can't find it now. In a couple of styles, including the "Camo" series, when you put a header image in there is a transparent bar of color that covers part of it. How do you make that disappear?
av8rmike
Feb. 23rd, 2007 09:40 pm (UTC)
I think you mean this post. Yeah, the problem isn't described very well therein, but it's not actually a transparent bar. The larger camoflage background is in #header and the smaller, slightly darker version placed on top, in #header-inner and positioned so the pattern matches.
Regardless, if you follow the method I described above when changing the header image, both should go away.
trinity_clare
Feb. 25th, 2007 10:13 pm (UTC)
I'm getting compile errors all over the place when I put in any of this coding. Something about "unknown token encountered". My theme layer is here.
av8rmike
Feb. 26th, 2007 03:54 am (UTC)
(wrong link before)
Did you follow the beginner's guide here?
[Please edit and title your post!] - trinity_clare - Feb. 26th, 2007 03:57 am (UTC) - Expand
krisp
Mar. 5th, 2007 06:18 am (UTC)
i cant get my header to centre at all...its like one length. also is there a way to add link to website and my friends lj's on the layout i have?
miraclemoments
Apr. 8th, 2007 11:46 pm (UTC)
The background image is gone now, however, my new header doesn't show up. Any help is so much appreciated! So frustrated right now!:(
ikiningyo
Apr. 10th, 2007 02:54 pm (UTC)
In that second-to-last example,

.layout-tw #alpha-inner {
width: 620px; /* Width of #alpha minus 40px margins*/
}

it should be .layout-wt

This post has been a great help though, thanks!
av8rmike
Apr. 10th, 2007 03:44 pm (UTC)
Well, you're half right. ;) The class would be .layout-tw if using the "sidebar on left" layout, as I do (which is why I wrote it that way). If the layout is "sidebar on right", then the class is .layout-wt. But thanks for pointing that out!
joanmay530
May. 3rd, 2007 11:24 am (UTC)
i picked DJ girl of expressive layouts...
now.. i just pasted this ..

#header-inner {
background-image: url http://www.ust.edu.ph/images_2005/banner_04.jpg);
}
/*#header, #header-content {
background-image: none;
}*?

the original header is gone.. but my desired picture is not showing.. please help me..thank you very much,..
av8rmike
May. 3rd, 2007 11:58 am (UTC)
The CSS on your page has url (http://www.ust.edu.ph/images_2005/banner_04.jpg);
Remove the space between url and (, because white space is pretty important in CSS.
[Please edit and title your post!] - joanmay530 - May. 3rd, 2007 12:08 pm (UTC) - Expand
[Please edit and title your post!] - av8rmike - May. 3rd, 2007 03:19 pm (UTC) - Expand
[Please edit and title your post!] - joanmay530 - May. 4th, 2007 12:17 am (UTC) - Expand
[Please edit and title your post!] - av8rmike - May. 4th, 2007 01:07 am (UTC) - Expand
inaudiblechaos
May. 10th, 2007 10:09 pm (UTC)
Hi, I was just wondering what's the difference between the two headers in the 'camo grey' layout, theres a bar that runs over the header basically, i know theres a post that tells you how to remove that, but if i do that i cant add an image underneath. basically i want to remove the bar (preferably but i dont really mind) and add a background image to the header. thanks (:
av8rmike
May. 10th, 2007 10:50 pm (UTC)
*points up to the third comment in the post* That comment basically explains it.
[Please edit and title your post!] - inaudiblechaos - May. 10th, 2007 11:29 pm (UTC) - Expand
ooo5
May. 20th, 2007 09:55 pm (UTC)
Thanks! Just in case anyone else goes crazy... :)

I had to change

#header, #header-content {
background-image: none;
}

to

.layout-tw #header, #header-content {
background-image: none;
}
av8rmike
May. 21st, 2007 04:23 am (UTC)
*checks your journal and base theme*

Interesting, apparently the Bloom bases have differing headers, depending on which column layout is in use. I hope that's the only one because I don't feel like going through the stylesheet repository to find any others. ;)
kimonos_house
Jun. 1st, 2007 06:25 am (UTC)
I'm having problems with my header displaying properly in Internet Explorer. I'm altering a Bunnylicious layout.

http://kimonos-house.livejournal.com/

The page will load correctly and look the way it's supposed to, with a black bar across the bottom of the header. If I scroll down and then scroll back up, a purple .gif from the original Bunnylicious layout will appear across the bottom of the header. I cannot figure out why the heck it's doing this. It's only in IE.

Also, I don't know if this is the appropriate place to ask, but I want to replace the star image by each entry title with another image. I've tried replacing the background to .asset-header, .asset-name and .asset-name-hover, all to no avail. What triggers the star graphic?

Any help is appreciated. My page is going to be spotlighted by LJ, so I'm trying to get it presentable as quickly as I can.
av8rmike
Jun. 1st, 2007 12:16 pm (UTC)
Congratulations on the spotlight! To get rid of the additional images, copy the CSS exactly from the second highlighted box above. I specifically mentioned Bunnylicious as one of the themes that has extra images.

Post ornaments are covered under the entry header tag. Try the directions in this post.
[Please edit and title your post!] - kimonos_house - Jun. 1st, 2007 12:42 pm (UTC) - Expand
[Please edit and title your post!] - av8rmike - Jun. 1st, 2007 01:53 pm (UTC) - Expand
[Please edit and title your post!] - kimonos_house - Jun. 2nd, 2007 04:04 am (UTC) - Expand
[Please edit and title your post!] - av8rmike - Jun. 2nd, 2007 01:08 pm (UTC) - Expand
[Please edit and title your post!] - kimonos_house - Jun. 3rd, 2007 02:13 am (UTC) - Expand
[Please edit and title your post!] - av8rmike - Jun. 3rd, 2007 05:10 am (UTC) - Expand
jense
Jun. 27th, 2007 05:58 pm (UTC)
Hi av8rmike, I stumbled on here and read this: 'For uniformity on Vox's site, all the layouts default to 940px wide. The sidebars default to 190px wide, leaving 750px for the main content column in the 2-column layout, and 560px in the 3-column layout (the actual column with is 40px less, because of 20px margin on either side). Therefore, to scale the journal content to the correct width (assuming the sidebars remain the same width) take the width of your new header image and subtract 190px for each sidebar you plan to have in your layout.'

I had a question. What if you wanted to smallen your sidebars to let's say 170px and you used WTT, while the content of the journal would be 1020px in total.

I have my alpha widened and it worked out perfectly, but when I wanted to subtract 20px of each sidebar and add those to the alpha to get 1020px exactly, my layout got screwed up with beta overlapping my alpha and gamma being far to the right of where it was supposed to be.

This is what I added to my Custom CSS:

#container-inner {
width: 1020px;
min-height: 100%;
margin: 0 auto;
text-align: left;
}

#content-inner{width: 1020px;}

#header-inner {width: 1020px;}

.layout-wtt #alpha {
width: 640px;
}

.layout-wtt #alpha-inner{
width: 600px;
}

.layout-wtt #beta {
left: 190px;
}

.layout-wtt #gamma {
right: 190px;
}
av8rmike
Jun. 28th, 2007 03:17 am (UTC)
Your journal looked OK to me in both FF and IE. As long as the containing boxes are wide enough for everything (borders and margins included), it should be fine.
stickykeys633
Jul. 2nd, 2007 01:38 am (UTC)
This isn't working for me and I can't suss out why. I'm literally posting the above code into my layer and getting the following error:

Compile error: line 187, column 5: Unknown token encountered while parsing layer: [TokenIdent] = background
S2::Layer, S2/Layer.pm, 67
S2::Compiler, S2/Compiler.pm, 27


Context

183:
184: #TopImage
185:
186: #header-inner {
187: background-image: url(http://pics.livejournal.com/stickykeys633/pic/001qfkhb.jpg);
188: }
189: #header, #header-content {
190: background-image: none;
191: }

Any help?
av8rmike
Jul. 2nd, 2007 01:46 am (UTC)
You didn't follow the directions in the linked post on how to use CSS in a theme layer.
[Please edit and title your post!] - stickykeys633 - Jul. 2nd, 2007 01:55 am (UTC) - Expand
[Please edit and title your post!] - stickykeys633 - Jul. 2nd, 2007 01:59 am (UTC) - Expand
[Please edit and title your post!] - av8rmike - Jul. 2nd, 2007 02:10 am (UTC) - Expand
[Please edit and title your post!] - stickykeys633 - Jul. 2nd, 2007 02:25 am (UTC) - Expand
ios_pillow_book
Oct. 3rd, 2007 08:06 pm (UTC)
Help I need somebody ... to help me with my header
I’m using Mixit/Nevermore and tried all day (with the help of this tutrial and others) to get rid of Nevermore's header gif:

http://stat.livejournal.com/voxhtml/poe/header-tw.gif

When using the

#header, #header-content {
background-image: none;
}

only my own header disappears. As it is now, only half of my header appears *sigh*

The code I used in the Custom CSS is:

#header-text { position: relative; top: 150px; left; }
#header-name { position: relative; top: -78px; }
#header-description { position: relative; top: -130px; left; }

#header{
background-image: url(http://iospillowbook.freewebsitehosting.com/LJ_Backgrounds/Header_10_07.jpg);
height: 250px; width: 950px;
background-repeat: no-repeat;
background-position: right;
}

I'm totally at a loss :-( All help would be greatly appreciated!
av8rmike
Oct. 4th, 2007 01:45 am (UTC)
Re: Help I need somebody ... to help me with my header
You have something weird going on in there with a "set custom_css" section; you should get rid of that. Also, Poe theme is like the Bloom bases that ooo5 pointed out above: it uses different header backgrounds based on column arrangement. So, instead of:
#header, #header-content, use:
#header, #header-content,
.layout-tw #header-inner {
    background-image: none;
}
Then, with the part that has your background image, use #header-inner instead of #header (that's why your header disappears).
#header-inner {
    background-image: url(http://iospillowbook.freewebsitehosting.com/LJ_Backgrounds/Header_10_07.jpg);
    height: 250px;
    width: 950px;
    background-repeat: no-repeat;
    background-position: right;
}
These two sections are all you should need.
(Deleted comment)
av8rmike
Oct. 15th, 2007 12:44 pm (UTC)
It looks like you tried to delete the comments, but left in the "/*" open comment delimiter. That will make the CSS parser ignore everything after the "/*".
_debi_
Oct. 27th, 2007 01:11 pm (UTC)
Header wants to move over
I used this coding in my Custom CSS section:

#header-inner {
background-image: url(http://www.digitalbydebi.com/STBS2header.jpg);
}
#header{
background-image: none;
margin: 0px 0px 0px 0px;
}

#header-content-inner {
background-image: none;
margin: 0px 0px 0px 500px;
}

The reason why I set margins for the header at 0s is because the header image migrates to the right when I tell the header content to move right. I can't figure out how to make the header stay where it belongs and move the navigation links to the top right corner of the header.

Can you help please?
av8rmike
Oct. 27th, 2007 03:17 pm (UTC)
Re: Header wants to move over
This should be all you would need:
#header-inner {
    background-image: url(http://www.digitalbydebi.com/STBS2header.jpg);
    height: 219px;
}

#header{
    background-image: none;
}

#header-content-inner {
    margin: 0 0 0 500px;
}
And it looks fine to me; no image moving around. Which browser are you using?
Re: Header wants to move over - _debi_ - Oct. 28th, 2007 02:06 am (UTC) - Expand
frijo
Oct. 29th, 2007 09:44 pm (UTC)
uhm, it's me again...

I tried to change the height of the header with

#header-content-inner {
background-image: none;
height: 20px;
}

and it worked. But the problem was that part of the text in the header disappeared. I just want the same space between bottom of the header, text (title, links, etc) and top of the header. I also tried to use

#header-content-inner {
margin: 20px 15px 5px 20px;
}

but not much happend. Any idea?
av8rmike
Oct. 30th, 2007 03:09 am (UTC)
Which are you trying to do, increase the blank space below the text, or decrease the space above? If it's the first, take those four numbers you have for margin and increase the third one.
If it's the second thing, add padding-top: 67px; to #header-content-inner and change the 67 to something smaller.
Page 1 of 3
<<[1] [2] [3] >>
( 120 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars