how to make a certain link change colors when active.

dreamer · 2008-10-28 04:18:26

My site here

I want to make it so that when one of the nav links in the horizontal navigation are active, it will change to a certain color, ie; pink for the ‘amenities’ tab.

This is my css;

#nav ul#navlist li a {color: white;}
#nav ul#navlist li.active_amenities a   {color: pink; padding: 0; margin:0;}

This is my html/txp markup;

<div id="nav">
		<ul id="navlist">

<txp:section name="home" link="1" title="1" class="active_home" wraptag="li" />
<txp:section name="community" link="1" title="1" class="active_community" wraptag="li" />
<txp:section name="amenities" link="1" title="1" wraptag="li" class="active_amenities"  />
<txp:section name="floorplans" link="1" title="1" class="active_floorplans" wraptag="li" />
<li><a href="/other/maintenance-request">Maintenance Request</a></li>
<li><a href="/other/resident-comments">Resident Comments</a></li>

	</ul>
		</div><!-- end nav-->

I can’t quite figure out how to code the css so that the color changes when any of the nav tabs are made active. Thoughts?

Last edited by dreamer (2008-10-28 04:19:26)

jstubbs · 2008-10-28 06:53:26

This navigation tutorial on TXP Tips should cover it for you.

dreamer · 2008-10-28 19:51:14

wow- cool resource! And great little idea- presenting helpful little tips on TXP.

The tip works but my css code was slightly different than what was presented.

Mine is this;

.active {}
ul#navlist li a.active {color: #37b2db; border-bottom: 3px solid #fff;}

Your tutorial is this

#main_menu li a.active {text-decoration: underline; font-weight: bold;}

The only difference being the active class;

.active {}

I had to put that in there in order for it to actually be active. Without it, it wouldn’t have worked. Not sure why but whatever.

dreamer · 2008-10-28 20:11:26

Another question;

I have 2 nav tabs that is linking to the same section, “Maintenance Request” and “Resident Comments”.

My code looks like this;

<li><a href="<txp:site_url />other/maintenance-request" <txp:if_section name="other">class="active_maintenance" </txp:if_section>>Maintenance Request</a></li>

<li><a href="<txp:site_url />other/resident-comments" <txp:if_section name="other">class="active_resident" </txp:if_section>>Resident Comments</a></li>

I added 2 seperate active classes to distinguish them and tweaked my CSS as well;

.active, .active_resident, .active_maintenance {}
ul#navlist li a.active, ul#navlist li a.active_resident, ul#navlist li a.active_maintenance {color: #37b2db; border-bottom: 3px solid #fff;}

And yet, when I click on one of those 2 nav tabs, both are made active as opposed to just one. What did I do wrong?

Last edited by dreamer (2008-10-28 20:42:55)

jstubbs · 2008-10-28 20:39:21

Hi Dreamer,

Glad you like the TXP Tips site. For your CSS question – as both links point to the same section, both will be marked as active, due to this:

<txp:if_section name="other">class="active_maintenance" </txp:if_section>

As to the classes, .active, .active_resident, .active_maintenance {} is not doing anything and its quite safe to take them out I think.

dreamer · 2008-10-28 21:03:03

Nope- I definitely tried taking out the .active class but the styling just won’t appear without it.

Regarding the if_section code, I figure they wouldnt’ work if they both point to the same section. So I tried hardcoding it like this but both tabs are still active. Thoughts?


<li><a class="active" href="/other/maintenance-request">Maintenance Request</a></li>
<li><a class="active" href="/other/resident-comments">Resident Comments</a></li>

Last edited by dreamer (2008-10-28 21:03:26)

maniqui · 2008-10-28 21:36:14

Hi dreamer,

You can try this:

<body class="<txp:if_individual_article><txp:article_url_title /></txp:if_individual_article>" />.
which will return this:
<body class="maintenance-request">
or
<body class="resident-comments">

Then,

<li><a id="#maintenance-request" href="/other/maintenance-request">Maintenance Request</a></li>
<li><a id="#resident-comments"  href="/other/resident-comments">Resident Comments</a></li>

Finally, in your CSS:

ul#navlist li a.active, 
.maintenance-request #maintenance-request,
.resident-comments #resident-comments  {color: #37b2db; border-bottom: 3px solid #fff;}

Last edited by maniqui (2008-10-28 21:36:32)

jstubbs · 2008-10-28 21:48:39

Which application are you using for your CSS? I checked it with CSSEdit, and found several errors with validation. For example, you have <style> tags and at least one color that is lacking a # value. Might be worth another look, because I was able to change the styling of each tab quite easily.

dreamer · 2008-10-29 18:01:21

Actually, a slightly different approach that’s a bit cleaner;

<li><a href="/other/maintenance-request" class="<txp:if_article_id id="15">active</txp:if_article_id>">Maintenance Request</a></li>

<li><a href="/other/resident-comments" class="<txp:if_article_id id="9">active</txp:if_article_id>">Resident Comments </a></li>

Jonathan-thanks. those issues are fixed and the .active class is no longer needed.

Last edited by dreamer (2008-10-29 18:01:37)

admi · 2009-08-08 00:50:01

It is very important. I am trying to use this type –

<a href=”/other/maintenance-request” class=”<txp:if_article_id id=“15”>active</txp:if_article_id>”>Maintenance Request</a>

but TXP says article tags cannot be used outside article, what should I do?

colak · 2009-08-08 10:27:59

Hi Andre

Go to Admin>Preferences> Production Status and change that to “Live”

then view the particular article and see if all works OK

admi · 2009-08-09 17:05:49

Thanx, it was simple. I just had to change ‘testing mode’ for ‘working’ one in admin-preferenes.

Textpattern CMS

Textpattern CMS support forum

#1 2008-10-28 04:18:26

how to make a certain link change colors when active.

#2 2008-10-28 06:53:26

Re: how to make a certain link change colors when active.

#3 2008-10-28 19:51:14

Re: how to make a certain link change colors when active.

#4 2008-10-28 20:11:26

Re: how to make a certain link change colors when active.

#5 2008-10-28 20:39:21

Re: how to make a certain link change colors when active.

#6 2008-10-28 21:03:03

Re: how to make a certain link change colors when active.

#7 2008-10-28 21:36:14

Re: how to make a certain link change colors when active.

#8 2008-10-28 21:48:39

Re: how to make a certain link change colors when active.

#9 2008-10-29 18:01:21

Re: how to make a certain link change colors when active.

#10 2009-08-08 00:50:01

Re: how to make a certain link change colors when active.

#11 2009-08-08 10:27:59

Re: how to make a certain link change colors when active.

#12 2009-08-09 17:05:49

Re: how to make a certain link change colors when active.

Board footer