Changing Navigator Link Preference using CSS Styles

October 18, 2003 Comments Off on Changing Navigator Link Preference using CSS Styles

In response to a question on the discussion board on formatting navigator links for category pages..(changing font size and doublespacing), here are some basic instructions:

Lets see if I can explain this where it makes sense. Each category is like its own little blog, therefore if you edit the navigator links preferences (size, color, etc..) for the main blog it doesn’t always populate to the category pages.

So what you need to do in each #hometemplate of each category is add the following navigator link css style code in the appropriate section of the #hometemplate, you can just copy and paste this code into your #hometemplate.

.navigatorLink {
    font: 11px verdana, arial, helvetica, sans-serif;
    color:#0000FF;
    font-size:15px;
    font-weight:bold;
    line-height:30px;
        }
   a.navigatorLink:link
    {
    color: #0000FF;
    text-decoration: none;
    letter-spacing: normal;
    padding-bottom:20px;
    }
   a.navigatorLink:visited
    {
    color: #0000FF;
    text-decoration: none;
    letter-spacing: normal;
    }
   a.navigatorLink:hover
    {
    color: #0000FF;
    text-decoration: underline;
    letter-spacing: normal;
    }
    .navigatorLinkCurrent
    {
    font-size:15px;
    color: #000000;
    text-decoration: underline;
    letter-spacing: normal;
        }

open the www folder
categories folder
find the #hometemplate
double click and open it, it will open to a notepad

look for the following:
.small {
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;
        }
 </style>

insert this in between those codes:

.navigatorLink {
    font: 11px verdana, arial, helvetica, sans-serif;
    color:#0000FF;
    font-size:15px;
    font-weight:bold;
    line-height:30px;
        }
   a.navigatorLink:link
    {
    color: #0000FF;
    text-decoration: none;
    letter-spacing: normal;
    padding-bottom:20px;
    }
   a.navigatorLink:visited
    {
    color: #0000FF;
    text-decoration: none;
    letter-spacing: normal;
    }
   a.navigatorLink:hover
    {
    color: #0000FF;
    text-decoration: underline;
    letter-spacing: normal;
    }
    .navigatorLinkCurrent
    {
    font-size:15px;
    color: #000000;
    text-decoration: underline;
    letter-spacing: normal;
        }

which will look like this when done

.small {
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;
        }
.navigatorLink {
    font: 11px verdana, arial, helvetica, sans-serif;
    color:#0000FF;
    font-size:15px;
    font-weight:bold;
    line-height:30px;
        }
   a.navigatorLink:link
    {
    color: #0000FF;
    text-decoration: none;
    letter-spacing: normal;
    padding-bottom:20px;
    }
   a.navigatorLink:visited
    {
    color: #0000FF;
    text-decoration: none;
    letter-spacing: normal;
    }
   a.navigatorLink:hover
    {
    color: #0000FF;
    text-decoration: underline;
    letter-spacing: normal;
    }
    .navigatorLinkCurrent
    {
    font-size:15px;
    color: #000000;
    text-decoration: underline;
    letter-spacing: normal;
        }
 </style>

save and close file

do this for every category page
republish entire site
this should work to make all fonts bigger and doublespace

+++++++++++++++++++++++++++++++++++++++++

for advance users:

.navigatorLink {
    font: 11px verdana, arial, helvetica, sans-serif;
    color:#0000FF;
    font-size:15px;
    font-weight:bold;
    line-height:30px;
        }

I changed the font color to blue using this code: color:#0000FF; 

I made the font size bigger using this code: font-size:15px;

and I doublespaced the links using this code: line-height:30px;

 

Categories : Newbie Tips