Textpattern CMS

#1 2007-05-09 14:44:11

scdoody

Member

Registered: 2006-10-18

Posts: 129

section highlight issue

I have this code to generate the nav for my site (based on my sections)

<div id=“globalnav”>
<txp:section_list active_class=“globalnav-on” break=“li” class=“globalnav” include_default=“0” wraptag=“ul” />
</div>

Then in my css I have this class:

.globalnav-on {
background-color:#F73273;
color:#FFFFFF;
font-weight:bold;
}

But when I am on a section in my site, the li for that section does not take take on the globalnav-on class.

Any suggestions?

#2 2007-05-09 16:02:47

els

Moderator

From: The Netherlands

Registered: 2004-06-06

Posts: 7,458

Re: section highlight issue

Did you check the xhtml output? Does it actually say <li class="globalnav-on"> for the active section?

#3 2007-05-10 01:56:29

scdoody

Member

Registered: 2006-10-18

Posts: 129

Re: section highlight issue

Nope – I did a view source and it is a regular li for each one.

#4 2007-05-10 02:09:16

Mary

Sock Enthusiast

Registered: 2004-06-27

Posts: 6,236

Re: section highlight issue

The active class is actually applied to the link, rather than the list item.

#5 2007-05-10 02:16:23

scdoody

Member

Registered: 2006-10-18

Posts: 129

Re: section highlight issue

so if I have this class, then why isn’t it being applied to the <a> of the <li>

.globalnav-on {
background-color:#F73273;
color:#FFFFFF;
font-weight:bold;
}

#6 2007-05-10 02:30:08

Mary

Sock Enthusiast

Registered: 2004-06-27

Posts: 6,236

Re: section highlight issue

Are you using different pages for your different sections?

#7 2007-05-10 02:33:58

scdoody

Member

Registered: 2006-10-18

Posts: 129

Re: section highlight issue

Yes. But each page includes the same form <txp:output_form form=“sidebar-left” /> which contains the left navigation that i am trying to highlight based on section.

#8 2007-05-10 02:42:14

Mary

Sock Enthusiast

Registered: 2004-06-27

Posts: 6,236

Re: section highlight issue

Okay, can you post:

• The URL of a section’s page (it doesn’t have to be a live site)
• The full output of the list on that page

#9 2007-05-10 03:08:29

scdoody

Member

Registered: 2006-10-18

Posts: 129

Re: section highlight issue

Here is the output of the list:

<div id=“globalnav”>

<ul class=“globalnav”> <li><a href=“http://www.sarahdoody.com/_0507test/01-Thoughts/”>Thoughts</a></li> <li><a href=“http://www.sarahdoody.com/_0507test/02-About/”>About</a></li> <li><a href=“http://www.sarahdoody.com/_0507test/03-Work/”>Work</a></li> <li><a href=“http://www.sarahdoody.com/_0507test/04-Services/”>Services</a></li> <li><a href=“http://www.sarahdoody.com/_0507test/05-Contact/”>Contact</a></li>
</ul>

</div>

Here are my styles – I’ve tried everything (overkill I know):

#globalnav
{
color:#767676;
padding:2px 0px 2px 0px;
}

#globalnav li {
padding:2px 0px 2px 0px;

}

#gobalnav li a {
background-color:#FFFFFF;
padding:2px 0px 2px 0px;
}

#globalnav li a:visited {
background-color:#FFFFFF;
display:block;
text-decoration:none;
}

#globalnav li a:hover {
background-color:#EAEAEA;
display:block;
text-decoration:none;
}

#globalnav li a.globalnav-on {
background-color:#F73273;
color:#FFFFFF;
font-weight:bold;
display:block;
text-decoration:none;
}

ul.globalnav {margin:0px; padding:0px;}

ul.globalnav li {
margin:0px;
padding:2px 0px 2px 6px;
}

ul.globalnav li.current {
background-color:#F73273;
color:#FFFFFF;
font-weight:bold;
display:block;
text-decoration:none;
}

globalnav {
color:#767676;
padding:3px 0px 3px 0px;
background-color:#998438;
}

.globalnav-on {
background-color:#F73273;
color:#FFFFFF;
font-weight:bold;
}

#10 2007-05-10 03:31:51

Mary

Sock Enthusiast

Registered: 2004-06-27

Posts: 6,236

Re: section highlight issue

It might be caused by the fact that your section names (not titles) are uppercase. Try making them lower-case.

#11 2007-05-10 07:49:48

alexandra

Member

From: Cologne, Germany

Registered: 2004-04-02

Posts: 1,370

Re: section highlight issue

You have a class and an ID named the same (globalnav) change that in a first step. Then apply

ul.globalnav li a {
margin:0px;
padding:2px 0px 2px 6px;
background:red;
display:block
}

is your site online?