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
#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.
Did you follow the beginner's guide here?
.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!
.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!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,..
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.
I had to change
#header, #header-content {
background-image: none;
}
to
.layout-tw #header, #header-content {
background-image: none;
}
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. ;)
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.
Post ornaments are covered under the entry header tag. Try the directions in this post.
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;
}
Any help?
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!
#header, #header-content
, use: Then, with the part that has your background image, use#header-inner
instead of#header
(that's why your header disappears). These two sections are all you should need.#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?
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?
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.