I have installed a nifty widget called Simple Sidebar Navigation in order to have several simple list menus appear on certain pages of my website only: http://user27263.vs.easily.co.uk/
You can see these different menus on:
http://user27263.vs.easily.co.uk/translation-writing
http://user27263.vs.easily.co.uk/the...ighting-design
and on the French pages of the site:
http://user27263.vs.easily.co.uk/traduction?lang=fr
http://user27263.vs.easily.co.uk/the...mieres?lang=fr

I have figured out how to change the Link and Hover colors in ATO>Style Widgets>Widget List Items, but I cannot find a way to make a particular menu link become a different color from the rest when it is current. For example, if I were to click on "Food and Wine" in the sidebar menu on http://user27263.vs.easily.co.uk/translation-writing, I would like the color of that link to be different from all the others while I am on that page, so that the user knows where they are more easily. Is there any way to do this?

I tried the plugin forum at http://www.ibsteam.net/forums/showth...p?t=856&page=2 but the moderator's replies are much more concise than on this wonderful bytesforall forum (where I have solved many little issues, thanks to the great detail provided!). I tried putting his code into various places, but just couldn't get it to work.

As I said, I was able to change the link and hover colors on that particular widget through ATO>Style Widgets>Widget List Items, so presumably there is something I could put in ATO>Add HTML/CSS Inserts>CSS Inserts that would do the trick. Any ideas?

use FireBug in FireFox to examine the element and see the CSS, then you can code a CSS Selector and the rules you want applied. You can even try them in FireBug

Thanks juggledad, but I'm afraid it's a bit over my head, even though I did install FireBug to have a look.
My knowledge-level is such that I am able to copy a bit of CSS code someone suggests and paste it where they say to, as well as tinker with some of the parameters (page-id, color, URL, etc), but that's about it. I've copied and pasted quite a few of your own CSS Inserts to tweak things in my site, and I was hoping you or someone here might have an idea for a clever little insert that would help me with this issue. I wouldn't know how to write a CSS Selector from scratch, nor where to put it (although I assume ATO>Add HTML/CSS Inserts>CSS Inserts). I guess I'm like a traveller in a foreign country who is capable of picking sentences out of a phrasebook, and even changing some of the words, but doesn't really speak the language so can't read or speak in any detail!

when you go off the beaten path in a foreign country, you better have a guide who can translate or you need to learn the language...

The reason Atahualpa can highlight the menu item for the page you are on in the header, is because it adds a class 'current-page-item' to the <li> for that page item. Using this the CSS can set the dolor different form the other page items.

In order to highlight the page item in a widget, the widget must give the page some unique class so you can identify it. It just so happens that the current page in the widget also has the class 'current_page_item' so now all you need to do is construct the CSS selector and rule. Here is the code in the page

<div id="simple_sidenav-6" class="widget simple_sidenav">
	<div class='SimpleSideNav'>
		<ul class='sf'>
			<li class="page_item current_page_item">
				<a class="depth_0" href="http://user27263.vs.easily.co.uk/translation-writing/the-arts"><span>The Arts</span></a>
			</li>
			.
			.
			.
		</ul>
	</div>
</div>

a CSS selector is made up of the html element names, a period (for classes) and/or pound sign, (for ID's) and then the ID or CLASS name. This is followed by {...} where you put the CSS Rules (like 'top: 10px;' - the semicolon is the end of statement character).

CSS = Cascading Style Sheet - so something you do to an element can effect it's children. If you coded

div {text-align: center;}

the text in the widget would be centered...but so would every other <div> on the page that didn't have a more specific CSS selector (the 'div' in this case) that also set the 'text-align'. To have it only effect this widget, you could use

div.widget {text-align: center;}

(periods are used to identify classes) and this would do it...but it would also effect every <div..> that had a class of 'widget' (most widgets) unless they have a more specific CSS selector.

So you could use

div.simple_sidenav {text-align: center;}

ant that should isolate it to just this widget, but if there were more than one <div> - like a title div - it would effect them all, and besides it will effect ALL the text in the div not just the one page so you could use

div.simple_sidenav div.SimpleSideNav ul.sf li.current_page_item{text-align: center;}

to be very specific. It could also be reduced to

ul.sf li.current_page_item{text-align: center;}

or

div.SimpleSideNav li.current_page_item{text-align: center;}

or

.SimpleSideNav li.current_page_item{text-align: center;}

or a couple other different ways.

a great resource for CSS is http:w3schools.com/css - I use it all the time and you can experiment right on their site

Originally Posted by juggledad

when you go off the beaten path in a foreign country, you better have a guide who can translate or you need to learn the language...

Thanks! You've been a great guide on this forum so far
I'll have a fiddle and tell you how I got on...

Hello Juggledad, I tried your solution but it does not work on my site www.mensch-und-umwelt.ch

I inserted the following css in ATO -> HTML INSERT:

div#pages-3.widget_pages ul li.current_page_item {
background:transparent url(/wp-content/themes/atahualpa367/images/icons/knopf1.png) no-repeat scroll left center;
display:block;
line-height:40px;
padding-left:20px;
width:160px;
color: #DA5F40;
}

but the color is not shown on active page.. Please help, I do not understand why this is not working :-(
Thanks a lot, Oliver

to set a link when it is 'active' you must use the pseudo code in the CSS Selector for the link. Do a google search on 'css pseudo code' and look at the w3schools.com/css entry

Hi Juggledad, thanks a lot for your answer. I don't think its a pseudo code problem, I do not want to adresse the active link status, but I would, like the initial question of this thread, have a different color of the menu link when I'm on the page: I cite #1:

For example, if I were to click on "Food and Wine" in the sidebar menu on http://user27263.vs.easily.co.uk/translation-writing, I would like the color of that link to be different from all the others while I am on that page, so that the user knows where they are more easily. Is there any way to do this?

So I'm still lost with no idea to resolve this wish...

this would have to be tied off a CLASS associated with the element. The widget that is building that menu has to be the one to add something like 'current-page' as the class. Once that is done you can use that in the CSS selector to apply the color you want to just that element.