[SOLVED] &hereClass not working completely (Revo)

171 Posts

BobbyG66 Reply #1, 15 years, 6 months ago

Using Revo 2.0.8-pl traditional
Wayfinder 2.3.0-pl

Navigation chunk:

<ul id="navbar">
[[!Wayfinder? &startId=`0` &level=`1` &hereClass=`current` ]]
</ul>

HTML code: (using Blueprint CSS)

<div class="span-24 navbar">
		[[$navigation]]
		</div>

CSS code:

.navbar {
	color: #FFF;
	height: 60px;
	background-image: url(../manager/templates/VTG/images/nav_background.png);
	background-repeat: no-repeat;
	background-position: center top;
}
#navbar ul
{
padding-top: 14px;
margin-left: 200px;
color: #FFF;
float: left;
height: 30px;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#navbar ul li { display: inline; text-align: center; font-weight: bold; font-size: 1.4em; margin: 15px 0; padding: 10px;}
#navbar ul li a {
color: #CCC;
text-decoration: none;
text-align: center;
}
#navbar ul li a:hover
{
color: #FFF;
}
.current  { 
	color: #006838;
	height: 30px;
	background-image: url(../manager/templates/VTG/images/nav_active.jpg);
	background-repeat:repeat-x;
	background-position: center center;
}

Everything works except for the font color.
I want the color to be white (#FFF) on the current page.
My background image works, but not the color.
The standard color is grey (#CCC) and goes white when hovering.

Any ideas?

Thanks in advance
BG66

387 Posts

whistlemaker Reply #2, 15 years, 6 months ago

1 - You have both a class and an id with the name of navbar - this may be ok to do, I’m not sure (and didn’t bother to look it up), but it is confusing!

2 - Your chunk has a wayfinder call inside ul tags - this will result in the structure:

<ul>
     <ul>
            <li>
                <a href="...... more code
            </li>

which is bad syntax (ul is not allowed within a ul)- maybe this is your problem

You do not need to wrap a wayfinder cal in ul tags - in fact you should not.

607 Posts

einsteinsboi Reply #3, 15 years, 6 months ago

What do you get when you inspect the source of your wayfinder output? Is the current item being given the class of "current" or a class of "active"? If your "current" class is not being applied, then you may need to create tpls to style your output specifically using the [[+wf.classes]]. Remember the wayfinder classes are applied where wf.classes is specified.

HTH

The Coding Pad - MODx MODx Beginner Tutorials
MODx Video Tutorials
MODx Development

171 Posts

BobbyG66 Reply #4, 15 years, 6 months ago

Thanks for the feedback, I will work on this some more.
Here is the current output: (I now see the embedded ul’s and mix of id and class)

		
<div class="span-24 navbar">

<ul id="navbar">
<ul><li class="first current"><a href="http://localhost/vtg/" title="Home" >Home</a></li>
<li class="last"><a href="index.php?id=2" title="About" >About</a></li>
</ul>
</ul>

</div>

171 Posts

BobbyG66 Reply #5, 15 years, 6 months ago

ok, still not working.
I made some changes and tried setting up with templates found on the Muddydogpaws website.

current output

<div class="span-24 navbar">
<div>

<ul>
<li class="first active"><a href="http://localhost/vtg/" title="Home" >Home</a></li>
<li class="last"><a href="index.php?id=2" title="About" >About</a></li>
</ul>

</div>

CSS

.navbar {
	height: 60px;
	background-image: url(../manager/templates/VTG/images/nav_background.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.navbar ul {
padding-top: 14px;
margin-left: 200px;
float: left;
height: 30px;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
.navbar ul li { display: inline; text-align: center; font-weight: bold; font-size: 1.4em; margin: 15px 0; padding: 10px;}
.navbar ul li a { color: #BBB; text-decoration: none; text-align: center;}
.navbar ul li a:hover { color: #FFF;}
.active { 
	color: #FFF;
	height: 30px;
	background-image: url(../manager/templates/VTG/images/nav_active.jpg);
	background-repeat:repeat-x;
	background-position: center center;
}

navigation chunk

[[!Wayfinder? &startId=`0` &level=`1` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` ]]

outer chunk

<div[[+wf.classes]]>
    <ul>
        [[+wf.wrapper]]
    </ul>
</div>

inner chunk

<ul [[+wf.classes]]>[[+wf.wrapper]]</ul>

387 Posts

whistlemaker Reply #6, 15 years, 6 months ago

it is a css specificity thing

.navbar ul li a is more specific than .active and so it rules and you get #BBB text color

try replacing the " .active " with " .navbar ul .active a "

171 Posts

BobbyG66 Reply #7, 15 years, 6 months ago

Thanks whistlemaker!!!
That worked!!! grin

I owe you a beer.

Quote from: whistlemaker at Mar 16, 2011, 10:09 AM

it is a css specificity thing

.navbar ul li a is more specific than .active and so it rules and you get #BBB text color

try replacing the " .active " with " .navbar ul .active a "