babytest - tutorials and tests

two alternative ways,

Both versions overwrite the function Page::lay_print_sidebar_tags()
I think the first version is the better one, so if you can you should use this one:





( First way: )


( Second way: )

With the help of the following code you can modyfy the comment bar in Smooth Sailing so, that you either only have the comment and readlink, or comment, read, edit and edit tags

( follow me )

set layout_sidebox_freetext_10_visibility = "12";
set text_sidebox_freetext_10_title = "Control Panel";
( Read more... )

Flexible Squares
Smooth Sailing
Tranquility II
Bloggish
Expressive
Opal

( S2 Smooth Sailing Welcome Note on all pages )

I have been using this code: http://www.livejournal.com/customize/advanced/layersource.bml?id=5910803 with this result: http://afuna.livejournal.com/256064.html?s2id=10058075 for ages with Flexible Squares. Since I liked it so much I converted it to work with Smooth Sailing.


Preview:

You need a paid account to do this. If you don't already have theme layer you can just copy and paste the code to a new theme layer, if you already have a layer you need to merge this in your existing layer.

( Get the code )

The Requirements:A webhost that supports PHP and a php script that calls the images (get that here). A free webhost that supports php is for example Funpic.What we need to do:Save this code as randomizer.php and upload it to your host.Upload all the images we want to use as a random header in the same directory as the php script.Now use the url of the randomizer.php script the same way as you would use a image urlCopy the contents of this box and save it as randomizer.php

This tutorial  shows you how to replace the little profile icons (,,,,,) with your own. If you use a Mozilla based browser, Internet Explorer 7 or Opera (not sure about Safari, but it should work there too) you can replace each image with a different one. If you use the complete code, in Internet Explorer 6 and lower you will only see one new image. You can remove the red part and you keep the six old images in IE 6 and lower and see the six new images in other browsers.
Older Versions then version 6 of the Microsoft Internet Explorer do not understand the part in blue, other browsers like Firefox and Opera don't understand the red part.



/*profile icons*/

/* so that IE users will see a new image */
* html span.ljuser{
background-image: url(YOUR IMAGE FOR THE USER) !important;
background-repeat: no-repeat;
background-position: left middle;
padding: 0px 16px 16px 0px !important;
}
* html span.ljuser img{
visibility: hidden;
}


/* icon for users */
.ljuser img[src*="userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR IMAGE FOR THE USER) !important;
padding: 16px 16px 0 0 !important;
}
/* icon for communities */
.ljuser img[src*="community.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR COMMUNITY IMAGE) !important;
padding: 16px 16px 0 0 !important;
}
/* icon for sponsored communities */
.ljuser img[src*="sponcomm.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR SPONCOMM IMAGE) !important;
padding: 16px 16px 0 0 !important;
}
/* icon for syndicated */
.ljuser img[src*="syndicated.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR SYDICATED IMAGE) !important;
padding: 16px 16px 0 0 !important;
}
/* icon for news */
.ljuser img[src*="newsinfo.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR NEWS IMAGE) !important;
padding: 16px 16px 0 0 !important;
}
/* icon for open-id */
.ljuser img[src*="openid-profile.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR OPEN-ID IMAGE) !important;
padding: 16px 16px 0 0 !important;
}

The 16px you see everywhere are the width and height of the image. You can either use images that are also 16x16px or you will have to change the numbers.
In S1 the above coding belongs in your HEAD codes between the style tags. You don't understand? Please read "Merging your overrides/the style tag." In S2 it belongs in either your external stylesheed, the Custom CSS box or in the CSS section of your layer.

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

( here we go )