TopLevelSelectionList modification

[kayt61]

Hi,

I now have another query.

I am wanting to change the navigation bar which uses the 'Two Header Bars - Two Side Bars - Horz Page List' layout.

I would like to change the font colour, possibly size and perhaps background colour for the navigation bar on the left hand side of every page.

I have found that the left nav bar consists of the TopLevelSeletionList, BestSellerListSideBar & NewProductListSideBar options (?) but cannot see how I am supposed to modify these.

Again, advise would be appreciated.

Regards,

Trev

[RuralWeb]

They are all controlled by the css file - you will need to learn a bit of css or do some searching on the forum as there are several posts on modifying the css files

[Bruce]

Trev,

To follow up with what Malcolm told you, the formatting is controlled by the css and here are a couple of links..
http://community.actinic.com/showthread.php?t=25305
http://community.actinic.com/showthread.php?t=25291

You have asked this question earlier too and were given some useful pointers on that thread.

Kind regards,

[kayt61]

Hi,

I have checked the css file and cannot see anything that looks like it refers to the nagivation bar.

Again, please can someone advise how I modify the font colours for the top level selection list within my navigation bar.

The links in the last post did not really help.

Regards,

kayt61

[leehack]

Trevor

If you have little understanding on CSS and the way in which actinic works, it will seem like incorrect information or too difficult to follow. Get to grips with the design tab, css and the themes advanced configuration and the above posts will become clear to you. If that is something you do not have the time for, then i'd suggest contacting one of the designers on the forum to do it for you, it is a quick job and might save you a lot of frustration in the long run.

[Bruce]

Try this...

1) Double click on 'TopLevelSeletionList' to go into the layout

2) On the first line here you should see 'Click here to edit list layout settings' in yellow, click on this and go to the 'Edit Rows and Columns' tab

3) Against 'Middle Rows' on the 'Before' column you will see '<ul class="products"><li>'

This is the class you need to edit in the css file.

On a basic site this class appears on line 530 in 'Actinic Stylesheet' it is listed as below...

ul.products {
line-height: normal;
padding: 0px 0px 0px 1px;
margin: 3px 0px 4px 15px;
font-size: <actinic:variable name="StandardFontSize" />;
color: <actinic:variable name="RequiredColor" />;
}

Make the changes you need and save the file, you can do the same for the other lists if you determine what class governs it's display.

Kind regards,

[kayt61]

Hi,

I have tried changing the colour and font here but the changes did not replicate through the site. I have changed section to refresh the preview just in case.

I also changed the font size on line 1169:

/* Links in Sidebar Menus */

div.tech_menu_button a {
width: 113px;
color: <actinic:variable name="PaletteBG" />;
text-decoration:none;
display:block;
padding:3px;
text-align:left;
background-color: <actinic:variable name="Palette2" />;
font-size: 11px;
}

but again the changes did not appear.

Please can anyone advice further. I have attached my css file with this reply.

Regards,

Trev

[pinbrook]

You have to locate the code you want to change, like Bruce showed you for the 'TopLevelSeletionList', then identify the css that controls the format.

For 'TopLevelSeletionList' it was <ul class="products"> thus you changed the class in the css.

Now you have to repeat the exercise for BestSellerListSideBar & NewProductListSideBar ie locate the code, locate the class, change the class

[leehack]

I think the problem here may be that he is being shown the <ul> class to change when it is probably the "li a" style that is colouring the links. He can change the <ul> class all he likes, if there is additional styling to the <li> and/or the <a>, it will never work.

If he has:

<div id="leftNav">
<ul>
<li><a href="blah blah">Juicy Bananas</li>
</ul>
</div>

then #leftNav ul styling will do nothing for text colour and size if they are also styled in:

#leftNav li a {
blah blah
}

Just a thought, maybe this is the problem.

[jont]

If you have Firefox the web developer toolkit is brilliant for showing exactly what CSS is styling every piece of code on the page.

If in Lee's example above you can always remove the block element from the code and simply use

#leftNav a {
.....
}

that will then style all links within the #lefNav page <div> ... li, ul, p etc.

As for the font size change are you editing the stylesheet from inside Actinic? If an external sheet ensure it is the main copy in the root of the site1 folder and not the copy in previewHTML which is used soley to preview each page and is always overwritten when you preview a page in the external browser.

Also check for cascading issues. If you have another instance of say an <li> tag further down the stylesheet this could be overwriting the earlier code changes. Again using a <div id="leftNav"> creates a higher specificity that should take precedence over basic tags.

If you had a live URL to show it could be tracked down much more simply.

[kayt61]

Hi,

Thanks for the continuing responses.

The Firefox web developer tool kit worked a dream. Using this the I was able to overcome the problem within about 2 minutes.

Again, many thanks for your help,

Trev

[jont]

Great stuff - can you post where the code was coming from as will be of use to others looking to do the same.