Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2008-10-28 04:18:26
- dreamer
- Member
- Registered: 2007-06-08
- Posts: 242
how to make a certain link change colors when active.
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)
Offline
Re: how to make a certain link change colors when active.
This navigation tutorial on TXP Tips should cover it for you.
Offline
#3 2008-10-28 19:51:14
- dreamer
- Member
- Registered: 2007-06-08
- Posts: 242
Re: how to make a certain link change colors when active.
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.
Offline
#4 2008-10-28 20:11:26
- dreamer
- Member
- Registered: 2007-06-08
- Posts: 242
Re: how to make a certain link change colors when active.
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)
Offline
Re: how to make a certain link change colors when active.
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.
Offline
#6 2008-10-28 21:03:03
- dreamer
- Member
- Registered: 2007-06-08
- Posts: 242
Re: how to make a certain link change colors when active.
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)
Offline
Re: how to make a certain link change colors when active.
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)
Offline
Re: how to make a certain link change colors when active.
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.
Offline
#9 2008-10-29 18:01:21
- dreamer
- Member
- Registered: 2007-06-08
- Posts: 242
Re: how to make a certain link change colors when active.
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)
Offline
Re: how to make a certain link change colors when active.
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?
Offline
Re: how to make a certain link change colors when active.
Hi Andre
Go to Admin>Preferences> Production Status and change that to “Live”
then view the particular article and see if all works OK
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: how to make a certain link change colors when active.
Thanx, it was simple. I just had to change ‘testing mode’ for ‘working’ one in admin-preferenes.
Offline