highlight the link to the page being viewed?

Mary · 2005-11-28 01:47:22

The plugin does work, just not for the purpose you want.

krisleech · 2005-11-28 08:18:46

> mary wrote:

> The plugin does work, just not for the purpose you want.

I’m sure the plugin does work and I think it will do exactly as I require ie. create a list of links and add a style to the one being viewed. :)
I just gotta work out why its not working or use one of the ‘manual’ methods above.

Last edited by krisleech (2005-11-28 08:19:15)

Mary · 2005-11-28 19:37:34

This plugin uses and works with sections, not individual articles.

Jeff_K · 2005-12-01 18:40:45

I have used <code><style type=“text/css”> a[href=”<?php print $_SERVER[‘REQUEST_URI’]; ?>”] {color: xyz…} </style></code> in a similar situation. Breaks in IE though.

Last edited by Jeff_K (2005-12-01 18:41:05)

Jeff_K · 2005-12-01 18:47:39

I just looked at Mary’s post. That’s actually really good idea. You could even do <code><style type=“text/css”> a#<txp:article_id”> {color: xyz…} </style></code> and then have your article links all output with <code>id=”<txp:article_id”>”</code>. Having your css in the head would save your CSS file from getting bloated if you wanted to use Mary’s suggestion with dozen’s of article links.

Last edited by Jeff_K (2005-12-01 18:48:21)

marvincooper · 2006-01-31 22:34:50

Jeff_K: Have you tried <style type="text/css"> a#<txp:article_id/> {color: xyz...} </style> in the document head?

I don’t get any output for the <txp:article_id/>, I wonder if the <txp:article_id/> tag only works in an article form? I have added it to my article_custom listform and it works as expected (I get the article id output).

marvincooper · 2006-02-02 22:23:27

OK I have worked this out. Not sure if this post is re-stating what people are already doing but thought I’d write it up anyway.

I’ve now got an article list, with one sticky article and other non-stickies with automatic CSS styling of the currently viewed article, using nothing but standard txp tags and a simple bit of CSS. The key to this was to create a form that just included <txp:article_id> and to use that form with a <txp:article> tag within CSS in the document <head>. By also using <txp:article_id> within a class in my navigation list form(s), I was able to get styling that was targetted at the currently viewed article, without having to know the article id in advance, or manualy write styles per-article id.

Here’s what I’ve done:

Forms code

As I’m using a sticky article for my section frontpage, and my article navigation list contains a link to that sticky article, I have got 2 list forms – one applies a CSS class containing a dynamic article id to the non-stickies and the other applies a CSS class called “sticky” to the sticky article.

Here are those forms:

Form name = article_id (used in the CSS within the <head> of the Page)
<txp:article_id>

Form name = navlist (for the non-sticky article navigation list)
<li class="article_id_<txp:article_id>"><txp:permlink><txp:title /></txp:permlink></li>

Form name = navlist_sticky (for the sticky article navigation list)
<li class="sticky"><txp:permlink><txp:title /></txp:permlink></li>

Page code:
Here I’ve added some CSS in the <head> to target just the links within the <li> tags whose class matches that of the current article (or a class called sticky).

Page head code

<style type="text/css">
ul li.article_id_<txp:article form=article_id /> a:link,
ul li.article_id_<txp:article form=article_id /> a:hover,
ul li.article_id_<txp:article form=article_id /> a:active,
ul li.article_id_<txp:article form=article_id /> a:visited,
ul li.sticky a:link,
ul li.sticky a:hover,
ul li.sticky a:active,
ul li.sticky a:visited
{color: #ccc;}
</style>

Article Navigation List Code

<ul>
<txp:if_individual_article>
<txp:article_custom section="your_section" status="sticky" listform="navlist" />
<txp:else/>
<txp:article_custom section="your_section" status="sticky" listform="navlist_sticky" />
</txp:if_individual_article>
<txp:article_custom section="your_section" sortby="Posted" sortdir="asc" listform="navlist" />
</ul>

This code produces an article navigation list for the “your_section” section. It goes in the Page (probably where you want a sidebar of article links). In this case, I have a single sticky article displayed on my section frontpage, hence the <txp:if_individual_article> bit. If you are not using sticky articles then you won’t need this, just the code below:

<ul>
<txp:article_custom section="your_section" sortby="Posted" sortdir="asc" listform="navlist" />
</ul>

And that’s it! I can now have my currently viewed articles styled just as I want them, which makes me happy :)

Hope this helps!

Last edited by marvincooper (2006-02-03 09:07:10)

Textpattern CMS

Textpattern CMS support forum

#13 2005-11-28 01:47:22

Re: highlight the link to the page being viewed?

#14 2005-11-28 08:18:46

Re: highlight the link to the page being viewed?

#15 2005-11-28 19:37:34

Re: highlight the link to the page being viewed?

#16 2005-12-01 18:40:45

Re: highlight the link to the page being viewed?

#17 2005-12-01 18:47:39

Re: highlight the link to the page being viewed?

#18 2006-01-31 22:34:50

Re: highlight the link to the page being viewed?

#19 2006-02-02 22:23:27

Re: highlight the link to the page being viewed?

Board footer