[paid and free users] Adding a header image to the top of the page
This tutorial fixes the problem where the header image alignment was a little off in IE and replaces this old paid user tutorial and this old free user tutorial. If for some reason you have trouble with its alignment, post a comment so we can examine it and try to fix it.
All users can add a header image using an external stylesheet. If you are a paid user, you can also do this by setting up a stylesheet in a theme layer or by using an alternate method that does not involve the stylesheet. The alternate method plus how to do an image map will be covered in a later tutorial.
Updating Code From the Old Tutorials
Change the line width: 100%; in your code to this, modifying the parts in red by following the instructions in blue:
width: 500px; /* Width of the banner, in pixels */
margin-left: auto; /* To center image leave as auto */
/* To right align leave as auto */
/* To left align change to 20px */
margin-right: auto; /* To center image leave as auto */
/* To right align change to 20px */
/* To left align leave as auto */
If is this is your first time using a header image you can ignore that and just follow the instructions in one of the sections below.
Adding a Header Image Using an External Stylesheet
First if you don't have an external stylesheet, you need to complete the external stylesheet tutorial. Next, find the following in your stylesheet:
.headerimage {
/* for formatting header image */
}Replace it with the following code, modifying the parts in red as you see fit by following the instructions in blue:
.headerimage {
position: relative;
width: 500px; /* Width of the banner, in pixels */
height: 220px; /* Height of the banner, in pixels */
margin-left: auto; /* To center image leave as auto */
/* To right align leave as auto */
/* To left align change to 20px */
margin-right: auto; /* To center image leave as auto */
/* To right align change to 20px */
/* To left align leave as auto */
margin-bottom: 20px; /* Space between bottom of image and outer box of style */
background-image: url("http://pics.livejournal.com/cyrnelle/pic/0000xh6c"); /* Header image URL */
background-repeat: no-repeat;
}
Save your stylesheet, and then upload it.
Adding a Header Image Using a Theme Layer
This code has the advantage of automatically aligning your image to match your page alignment. You can also override the alignment if you like.
First, if you don't have a stylesheet in your theme layer, you need to create one by following this tutorial. Next, add the following code between the tags. Change the parts in red as needed by following the instructions in blue:
""";
var string position = "center"; # Change this depending on where you want the image.
# It can be right, left, or center.
# If you leave it blank, it will match the page alignment.
var string margin_left = ($position == "left" or ($position == "" and $*page_alignment == "left"))
? "20px"
: "auto";
var string margin_right = ($position == "right" or ($position == "" and $*page_alignment == "right"))
? "20px"
: "auto";
"""
.headerimage {
position: relative;
width: 500px; /* Width of the banner, in pixels */
height: 220px; /* Height of the banner, in pixels */
margin-left: $margin_left;
margin-right: $margin_right;
margin-bottom: 20px; /* Space between bottom of image and outer box of style */
background-image: url("http://pics.livejournal.com/cyrnelle/pic/0000xh6c"); /* Header image URL */
background-repeat: no-repeat;
}
Tips and tricks:
If you want the outer box to be the same width as your banner, that's possible too. Go to the customisation wizard and look at the very bottom of the "Presentation" tab. Enter the width of the journal in pixels -- it should be (your banner width - 32) pixels. For example, if your banner is 800px wide, the width of the journal should be set to 768px. Don't forget to change Unit of journal width to pixels.
Why 32, you ask? It's because of the padding (and border) around the sidebar and main content.
If you're having trouble getting your header width to match your content width in Internet Explorer (perhaps you're seeing a 1px discrepancy on each side) try adding the following css:
#header, #footer {
width: auto;
}
It's also possible to have no spacing between the top of your header image and the top of the page. Just add this line to your stylesheet: body { margin: 0px 0px 20px 0px; }.
All users can add a header image using an external stylesheet. If you are a paid user, you can also do this by setting up a stylesheet in a theme layer or by using an alternate method that does not involve the stylesheet. The alternate method plus how to do an image map will be covered in a later tutorial.
Updating Code From the Old Tutorials
Change the line width: 100%; in your code to this, modifying the parts in red by following the instructions in blue:
width: 500px; /* Width of the banner, in pixels */
margin-left: auto; /* To center image leave as auto */
/* To right align leave as auto */
/* To left align change to 20px */
margin-right: auto; /* To center image leave as auto */
/* To right align change to 20px */
/* To left align leave as auto */
If is this is your first time using a header image you can ignore that and just follow the instructions in one of the sections below.
Adding a Header Image Using an External Stylesheet
First if you don't have an external stylesheet, you need to complete the external stylesheet tutorial. Next, find the following in your stylesheet:
.headerimage {
/* for formatting header image */
}Replace it with the following code, modifying the parts in red as you see fit by following the instructions in blue:
.headerimage {
position: relative;
width: 500px; /* Width of the banner, in pixels */
height: 220px; /* Height of the banner, in pixels */
margin-left: auto; /* To center image leave as auto */
/* To right align leave as auto */
/* To left align change to 20px */
margin-right: auto; /* To center image leave as auto */
/* To right align change to 20px */
/* To left align leave as auto */
margin-bottom: 20px; /* Space between bottom of image and outer box of style */
background-image: url("http://pics.livejournal.com/cyrnelle/pic/0000xh6c"); /* Header image URL */
background-repeat: no-repeat;
}
Save your stylesheet, and then upload it.
Adding a Header Image Using a Theme Layer
This code has the advantage of automatically aligning your image to match your page alignment. You can also override the alignment if you like.
First, if you don't have a stylesheet in your theme layer, you need to create one by following this tutorial. Next, add the following code between the tags. Change the parts in red as needed by following the instructions in blue:
""";
var string position = "center"; # Change this depending on where you want the image.
# It can be right, left, or center.
# If you leave it blank, it will match the page alignment.
var string margin_left = ($position == "left" or ($position == "" and $*page_alignment == "left"))
? "20px"
: "auto";
var string margin_right = ($position == "right" or ($position == "" and $*page_alignment == "right"))
? "20px"
: "auto";
"""
.headerimage {
position: relative;
width: 500px; /* Width of the banner, in pixels */
height: 220px; /* Height of the banner, in pixels */
margin-left: $margin_left;
margin-right: $margin_right;
margin-bottom: 20px; /* Space between bottom of image and outer box of style */
background-image: url("http://pics.livejournal.com/cyrnelle/pic/0000xh6c"); /* Header image URL */
background-repeat: no-repeat;
}
Tips and tricks:
If you want the outer box to be the same width as your banner, that's possible too. Go to the customisation wizard and look at the very bottom of the "Presentation" tab. Enter the width of the journal in pixels -- it should be (your banner width - 32) pixels. For example, if your banner is 800px wide, the width of the journal should be set to 768px. Don't forget to change Unit of journal width to pixels.
Why 32, you ask? It's because of the padding (and border) around the sidebar and main content.
If you're having trouble getting your header width to match your content width in Internet Explorer (perhaps you're seeing a 1px discrepancy on each side) try adding the following css:
#header, #footer {
width: auto;
}
It's also possible to have no spacing between the top of your header image and the top of the page. Just add this line to your stylesheet: body { margin: 0px 0px 20px 0px; }.