Old Toad's Tutorials
No. iW12
Change the Basic, Rollover and Visited Color of
iWeb’s Navbar with CSS Code in an HTML Snippet
 
Old Toad's Tutorials
1 - put the following code in an HTML snippet:

<!--
script provided by Cyclosaurus
-->
<script type='text/javascript'>
function colorNavChange () {

styleCSS = 'div#widget0 li.current-page a { color: #000000; }div#widget0 li a { color: #
193C72; } div#widget0 li a:visited { color: #8D0000; } div#widget0 li a:hover { color: #FF8406; }';

eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('1=2.3.5(\'6\');1.4.7=\'8/9\';1.4(\'a\',\'b\');1.c=d;2.3.e(\'f\')[0].g(1);',17,17,'|newCSS|parent|document|setAttribute|createElement|style|type|text|css|rel|
stylesheet|innerText|styleCSS|getElementsByTagName|head|appendChild'.split('|'),0,{}));

clearInterval(chkNavLink);
}
chkNavLink = setInterval('colorNavChange()', 10);
</script>
 
Thanks to Wyodor for assistance with this code.
2 - the first part of the code with the #000000 if for the page the first time a visitor lands on it.

The next section with the #193C72 color is for the default navbar color for the other pages.

The second code grouping, with #FF8406 is for the rollover color. And the last grouping, with #8D0000, is for the visited color.

3 - You can use either the text color designations, black, red, green, etc. or the HEX color designation #XXXXXX. You can get the HEX designation from the 3rd party HEXColor picker plugin.

4 - Place the first HTML snippet in the footer of the first page. copy it, go to the second page and paste via Command+V. It will be automatically placed in the footer of the second page.

5 - The colors will not be visible until the site is published.

NOTE 1: If you leave out div#widget0 li.current-page a { color: #000000; } then the current page will have the default navbar color when it’s landed on the first time. If either case it will take on the visited color if left and returned to.

NOTE 2: The background color of the navbar area can be set by using the following code provided by Wyodor:

<script language="JavaScript" type="text/javascript">
<!--
function navBackgroundColor () {

elem = parent.document.getElementById('nav_layer');
elem.style.backgroundColor = "#5D68C3";

clearInterval(chkNavLink);
}
chkNavLink = setInterval('navBackgroundColor()', 500);
// -->
</script>
Just place it in the HTML snippet along with the other code.

NOTE: the background color code will not work with themes that use graphic files for the background of the navbar like the Fine Line theme among others.

No warranty expressed or implied, etc.
© 2011 Old Toad