Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

Set a color for an "active" or "current" link in a sidebar widget.


  #1  
Old Oct 6, 2011, 03:33 PM
artaud
 
8 posts · Mar 2011
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?
  #2  
Old Oct 6, 2011, 06:21 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Oct 7, 2011, 05:27 AM
artaud
 
8 posts · Mar 2011
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!
  #4  
Old Oct 7, 2011, 06:06 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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">
	<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
HTML Code:
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

HTML Code:
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

HTML Code:
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

HTML Code:
div.simple_sidenav div.SimpleSideNav ul.sf li.current_page_item{text-align: center;}
to be very specific. It could also be reduced to
HTML Code:
ul.sf li.current_page_item{text-align: center;}
or
HTML Code:
div.SimpleSideNav li.current_page_item{text-align: center;}
or
HTML Code:
.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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Oct 8, 2011, 11:22 AM
artaud
 
8 posts · Mar 2011
Quote:
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...
  #6  
Old Oct 10, 2011, 03:16 AM
gasserol
 
7 posts · Oct 2009
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
  #7  
Old Oct 10, 2011, 05:25 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Oct 11, 2011, 04:06 AM
gasserol
 
7 posts · Oct 2009
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:
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...
  #9  
Old Oct 11, 2011, 04:57 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Tags
active, color, link, sidebar

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Integration of "WP Post to PDF" similar to "WP Print" or "WP Mail" neckit Plugins & Atahualpa 4 May 30, 2011 07:44 AM
When "parent" clicked, "children" become active and don't change on hovering ymf Page & Category Menu Bars 1 Apr 23, 2010 07:43 AM
Background color "sub-pages" and "whole menu bar" gxxfy Page & Category Menu Bars 1 Nov 24, 2009 02:46 AM


All times are GMT -6. The time now is 12:22 PM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.