....style a list menu item..

jstubbs · 2005-09-26 21:18:48

I have the following:

1. a list category in “organise”
2. a bunch of links associated with above category
3. a form called “main_menu” which has the following in it to display the links as a list <code><li><txp:link /></li></code>
4. this inserted into the page where I wish to display the links <code><txp:linklist category=“The-HPTC” form=“main_menu” /></code>

No problems with any of this!! Except…..I use the above to display the site links, and I can’t think of a way to style the current link.

The URL is here: http://highperformancetennis.com/

You will see it – click on a link and it ain’t clear where you are. I used an old trick before with other sites where I placed a a:visited style within the page and styled it by declaring an id for the list item.

But….how to do this when the links are produced by TXP???

rmedek · 2005-09-27 08:01:43

Okay, so how about this?

1. When you add a link, add the name of the section you are linking to in the “description” field. So, let’s say you are adding a link to the “about” page (section), you would add “about” to the description.

2. At the top of each page template, add this text (found here): <code><?php $thispage=$GLOBALS[‘thispage’][‘s’]; ?></code>. We’re assigning the name of the current section to a variable called “$thispage”

3. Now we make our menu. In the form for your list (i.e., “main_menu”, use something like this code:
<code><li<?php if ($thisPage==”<txp:link_description />”) echo “ id=\“currentpage\”“; ?><txp:link /></li></code>

So, let’s say you were in the “news” section. If this link was the “about” link, $thispage would not equal <code><txp:link_description /></code>, so the output text would read <code><li><a href=”/about/”></li></code>. But if the link were the “news” link, $thispage would equal <code><txp:link_description /></code>, and the output code would read <code><li id=“currentpage”><a href=”/news/”></li></code>

I’m using this article at A List Apart as the basis for all this, by the way.

4. In your CSS, assign the styles like so:
<code>li#currentpage { your: styles here; }</code>

I haven’t tested any of this, but I think it would work okay. Once the intial work was done, adding links should be a piece of cake. Hope this helps…

jstubbs · 2005-09-27 08:23:25

Hey thats nice let me give it a go. The other option I looked at is breadcrumbs – the TXP version and the plugins that I have found so far don’t allow any styling. Anyone know of a good breadcrumb plugin that allows styling?

Will report back when I have had a chance to work on your suggestions rmedek – thanks!
Jonathan

joana · 2005-09-27 16:27:40

Would that solution be possible for the <strong>recent_articles</strong> list?

rmedek · 2005-09-27 17:10:25

I’m not sure I know what you mean… how would a recent article also be the current page?

jstubbs · 2005-09-27 18:11:21

Hi, thought I would give it a try and report back….not working yet….I saw couple errors:

<code><li><?php if ($thisPage==”<txp:link_description />”) echo “ id=\“currentpage\”“; ?><txp:link /></li></code>

The closing tag for the list item was missing…

<code><txp:php> $thispage=$GLOBALS[‘thispage’][‘s’]; </txp:php></code>

According to what I read, to use PHP tags one should first add the txp php tags, so I did.

One other note – the frontpage uses the default section so the link description should be “default” according to this method.

So, it does not work yet. There is no list id being produced, so either:

a) the php code is wrong and does not get the section details for outputting
b) the form code is wrong and produces no list id

Last edited by jstubbs (2005-09-27 18:11:53)

joana · 2005-09-27 19:00:44

> rmedek wrote:

> I’m not sure I know what you mean… how would a recent article also be the current page?

One of my page templates has a sidebar that shows the 5 most recent articles (photo galleries, actually), which use the same page template, meaning that the sidebar is still there when we’re reading the article … is that confusing?

Here’s the <a href=“http://tomaz.biriba.net/fotos”>website</a>, so you can see an example.

jstubbs · 2005-09-27 22:42:27

<code><txp:php> $thispage=$GLOBALS[‘s’]; </txp:php>
<txp:php> echo “$thispage”; </txp:php>
<txp:php> echo $GLOBALS[‘s’]; </txp:php>
<txp:php> echo “hello”; </txp:php></code>

Well it appears the code does not all return equal data. Of the above, only the last 2 return anything, which show the variable “s” for section is there, but $GLOBALS[‘s’]; does not get assigned to $thispage. I tried a few variations, but nope. Anyone got ideas??

jstubbs · 2005-09-29 13:09:56

Anyone managed to get globals working? Would be really useful in a site with only a couple of pages. Don’t think it would be needed for a site with one page for each section. Have played around with the codes above but I have not managed to get it to work.

zem · 2005-09-29 13:19:10

Well it appears the code does not all return equal data. Of the above, only the last 2 return anything, which show the variable “s” for section is there, but $GLOBALS[’s’]; does not get assigned to $thispage. I tried a few variations, but nope. Anyone got ideas??

Each <txp:php> .. </txp:php> block works more or less like a function, from the point of view of variable scope. $thispage is local to the first block, and not accessible to the others. The first line doesn’t output anything because that code doesn’t have any output.

jstubbs · 2005-09-29 13:41:17

I understand what you mean. However, I don’t know how to change it! I followed the examples in the tuturials/examples above, but the code always looks the same. Is there a better example I could follow?

Sorry if its a silly question.

jstubbs · 2005-09-29 21:14:55

Since I could not get the above mentioned methods to work, I looked around to see if a plugin existed. There is one that does what I wanted:
<url>http://textpattern.org/plugins/158/akonav</url>

Discussion forum: http://forum.textpattern.com/viewtopic.php?id=6334

The plugin creates a div for your links and allows a few extras link placing an “active” class in the current link, which is what I was trying to do.

A few things – the documentation is not that clear in the help file of the plugin. Here is what I did:

1. Create a form called “menu”
2. Insert something like this into the form:
<code>txp:ako_nav name=“Home,About” url=”/,/about” title=“Homepage,About us” headon=“0” classtag=“0”</code>
3. Save the form as “misc” type
4. Add this to your page where you want the styled links to go:
<code><txp:output_form form=“menu” /></code>
5. Note that the URL list in 2. there is no trailing slash after “about”. If you place a trailing slash the “active” class won’t be added!!

This plugin seems designed to be placed directly into the page, but that would defeat the purpose of using forms to enable quick site-wide changes.

Hopefully this will help someone else.

Last edited by jstubbs (2005-09-29 21:19:22)

Textpattern CMS

Textpattern CMS support forum

#1 2005-09-26 21:18:48

....style a list menu item..

#2 2005-09-27 08:01:43

Re: ....style a list menu item..

#3 2005-09-27 08:23:25

Re: ....style a list menu item..

#4 2005-09-27 16:27:40

Re: ....style a list menu item..

#5 2005-09-27 17:10:25

Re: ....style a list menu item..

#6 2005-09-27 18:11:21

Re: ....style a list menu item..

#7 2005-09-27 19:00:44

Re: ....style a list menu item..

#8 2005-09-27 22:42:27

Re: ....style a list menu item..

#9 2005-09-29 13:09:56

Re: ....style a list menu item..

#10 2005-09-29 13:19:10

Re: ....style a list menu item..

#11 2005-09-29 13:41:17

Re: ....style a list menu item..

#12 2005-09-29 21:14:55

Re: ....style a list menu item..

Board footer