Set a color for an "active" or "current" link in a sidebar widget.
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 HTML Code:
<div id="simple_sidenav-6" class="widget simple_sidenav"> CSS = Cascading Style Sheet - so something you do to an element can effect it's children. If you coded HTML Code:
div {text-align: center;} HTML Code:
div.widget {text-align: center;} So you could use HTML Code:
div.simple_sidenav {text-align: center;} HTML Code:
div.simple_sidenav div.SimpleSideNav ul.sf li.current_page_item{text-align: center;} HTML Code:
ul.sf li.current_page_item{text-align: center;} HTML Code:
div.SimpleSideNav li.current_page_item{text-align: center;} HTML Code:
.SimpleSideNav li.current_page_item{text-align: center;} a great resource for CSS is http:w3schools.com/css - I use it all the time and you can experiment right on their site |
Quote:
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:
Quote:
|
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.
|
All times are GMT -6. The time now is 09:05 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.