Different ways to add a header in S1

[babytest]

Four different ways to add a header!

1. Header without a background
2. Header with background - doesn't really work with the nav strip enabled, doesn't work with sponsored+, doesn't work with sidebars, makes problems with the Contextual Popup, only works with S1 Generator
3. Header with background 2 - no known problems, needs a website listed in the profile to work
4. Header with background 3 / imagemap - no known problems, needs a website listed in the profile to work
5. Colorcodes explained
6. How to center the header while using Header with background 2 or Header with background 3 / imagemap
7. Example: centered imagemap
7. Example 2: left aligned imagemap
8. Entries on top of header



1.   the easy version - Header without a background (we add the header as a backgound image) / should work with all S1 styles

GLOBAL_HEAD<=

<=GLOBAL_HEAD

2.  the second version - doesn't really work with the nav strip enabled, doesn't work with sponsored+ / Plus accounts and doesn't work with sidebar layouts - only works with Generator GLOBAL_HEAD<=

<=GLOBAL_HEAD

to make it work with the navbar, you have to add

#lj_controlstrip_poweredby{
display:none;
}
to your GLOBAL_HEAD

3.  the third version - no known problems / should work with all S1 styles

Change these numbers to suit your needs.
GLOBAL_HEAD<=

<=GLOBAL_HEAD

LASTN_WEBSITE<=

<=LASTN_WEBSITE

4.  the fourth version - no known problems - the only version that works with imagemaps / should work with all S1 styles
Change these numbers to suit your needs.
GLOBAL_HEAD<=

<=GLOBAL_HEAD

LASTN_WEBSITE<=


http://urltoyourheader">

<=LASTN_WEBSITE

Colorcodes explained!

background-color: black;
This is the background that will show while your background is loading, or if your background image does not cover the whole window.

background-image: url(http://urltoyourbackground);
The background image url goes here.

background-repeat: repeat;
If you want your background to have a tiled effect, then make leave this as it if. If you don't want your image to be tiled, then change this to no-repeat.

background-attachment: fixed;
This means that your background will not scroll with the entries. If you want it to scroll, then change this to scroll.

background-position: top left;
This is where you can position your background as you please.

background-image: url(http://urltoyourheader)
This is the url to your header image.

background-repeat: no-repeat;
You likely won't want your header to repeat, so leave this as it is.

background-position: top center;
This positions your header image.

padding-top:300;
This sets the height of the space above your entries, so that the entries do not overlap your image. Set this number to the height of your banner + 10.

div table { width: 640;
This sets the width of your entries, so that they're the same width as your banner. Set this to the width of your header.

How to center the header!

Explanation for "Adding a header version 3 and 4"

If you want your header centered (and use version 3 or 4 of the ways to add a header), you need to know the exact width of it.

Codes for version 3 Codes for version 4 #x{
backgound-image:url(http://urltoyourheader);
position:absolute;
visibility: visible;
top:0px;
width: 780px;
left:50%;
margin-left:-390px;
height: 200px;
} #x{
position:absolute;
visibility: visible;
top:0px;
width: 780px;
left:50%;
margin-left:-390px;
height: 200px;
}

left:50%; will shift the left edge of the image to the center of the page, never change the 50% to something else, you have to move the image with the margin-left codes. The margin-left needs to be half the number of pixels of the width of your image. So if you have an image with width 800px, you'd put 800px in the width and -400px in the margin-left part.

You can change the number for the top to what you like.

When you are using this method, you may use either positive or negative numbers to move the header left and right:

• Enter the height of your image where it says height.


• You MUST define a width or this will NOT work.


• A positive margin-left will push your image to the right.


• A negative margin-left will push your image to the left.


• A negative margin-left that is exactly half of the width will center image as shown above

Then, of course, you need the actual header code:


http://yourheaderurlhere" style="display:inline;">

To make sure it works in IE, you need this code after every div:

Advanced example: Version 4 - centered + imagemap!
Read: "How to center the header!" first
GLOBAL_HEAD<=

<=GLOBAL_HEAD

LASTN_WEBSITE<=


http://www.yourimage.com" width="600px" height="330px" border="0" alt="" usemap="#image_map_name">

http://www.yourlink.com">
http://www.yourlink.com">
http://www.yourlink.com">
http://www.yourlink.com">

<=LASTN_WEBSITE

Advanced example: Version 4 - left aligend + imagemap!

GLOBAL_HEAD<=

<=GLOBAL_HEAD

LASTN_WEBSITE<=


http://www.yourimage.com" width="600px" height="330px" border="0" alt="" usemap="#image_map_name">

http://www.yourlink.com">
http://www.yourlink.com">
http://www.yourlink.com">
http://www.yourlink.com">

<=LASTN_WEBSITE
Entries on top of header
If you notice, that your entries are hidden under the header try to add this code to your GLOBAL_HEAD

.entrybox{
position:relative;
}