Use prototype to alter the navigation menu generated by iweb

Question

I have a 'website' that been generated by a client in iWeb. He wants to keep using iwebs and simply upload the generated site however I have noticed some inconsistencies in the CSS of the menu and also he need an element in the menu to link to an external URL. Both of which seem not to be fixable in the iWeb Application / editor.

From what I can tell iWeb draws the menu using prototype - so it is not static HTML. However I should be able to navigate the produced HTML with protoype (which is what iweb uses so I should be able to use it also right?) to edit the style of the

items in the menu AND change the content of a single

so that it can have a tge which link externally.

this way to 'fix' his sit I just have to include one script file after he uploads it?

So given

<ul class="navbar-list" id="widget0-navbar-list">
<li class="current-page"><a>Welcome </a></li>
<li class="noncurrent-page"><a>Why? </a></li>
<li class="noncurrent-page"><a>Uses </a></li>
<li class="noncurrent-page"><a>Products </a></li>
</ul>

how can I set the padding of each LI item and chaneg the content of the 'Product' LI to link somewhere else.

Have tried several thing but all seem to do nothing.

$("ul#widget0-navbar-list li").each(function(elm){
    elm.setStyle({"background-color": "#FFFFFF"});
});

Answer 1

With Javascript the CSS properties with a dash has to be written in camel-case. So for the background try to use "backgroundColor" instead of "background-color" and it should work and do not use quotation marks:

$("ul#widget0-navbar-list li").each(function(elm){ 
    elm.setStyle({
        backgroundColor: "#FFFFFF"
    }); 
});