There are four elements that are easily customizable: the background to the strip, which can be made transparent or, optionally, given a background color; the text color; the link color; and the border between the elements. Users who are familiar with CSS can also make additional customizations as desired.
To change the colors, you will need to access the "Custom CSS" section of the Custom Options customization tab. Enter the following CSS information into the "custom stylesheet" area of this section:
/* background of entire strip */
#lj_controlstrip
{
background-image: none;
background-color: #FFFFFF;
}
/* text color */
#lj_controlstrip td, #lj_controlstrip_statustext
{
color: #000000;
}
/* link color */
#lj_controlstrip a
{
color: #0000FF;
}
/* border between elements */
#lj_controlstrip_user, #lj_controlstrip_userlinks, #lj_controlstrip_login
{
border-right: 1px solid #888888;
}
#lj_controlstrip
{
background-image: none;
background-color: #FFFFFF;
}
/* text color */
#lj_controlstrip td, #lj_controlstrip_statustext
{
color: #000000;
}
/* link color */
#lj_controlstrip a
{
color: #0000FF;
}
/* border between elements */
#lj_controlstrip_user, #lj_controlstrip_userlinks, #lj_controlstrip_login
{
border-right: 1px solid #888888;
}
Change #FFFFFF to the color code for the background color you want; if you want it to be transparent, so that the background color and image for the page will show through, type the word transparent instead of the color code. Change #000000 to the color code you want for the text; change #0000FF to the color code you want for links. For the border, change 1px to the desired width, solid to the desired border style (select from: none, dotted, dashed, solid, double, groove, ridge, inset, outset), and #888888 to the desired color code.
You can use the Color Hexadecimal Codes Chart to find the hexadecimal color code for your desired colors.
Paid users who are using a custom layout may need to adapt this code into a print_custom_head() function instead. If you already have a theme layer, you will need to edit it and add the code below. If you do not have a theme layer, you will need to create one by following the instructions in the Theme Layer tutorial.
function Page::print_custom_head() {
"""
<style type="text/css">
CSS information
</style>
""";
}
"""
<style type="text/css">
CSS information
</style>
""";
}
Replace CSS information with the code provided earlier in the tutorial. Note that if you already have a print_custom_head function, you will need to merge the two functions together.
Contributed by
isabeau. 