The S2 HowTo Journal

Tips, Tricks, and Tutorials for Basic S2 Customization

Previous Entry Share Next Entry
[all] Customizing Navigation Strip Colors
howto_user wrote in s2howto
The settings for the Navigation Strip allow you to choose dark grey (with light text), or light grey (with dark text). However, these options don't always match the journal's style. Luckily, it's possible to use CSS to change the background and text color for the navigation strip.

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;
}


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>
""";
}


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.

Comments Disabled:

Comments have been disabled for this post.

?

Log in

No account? Create an account