How can I create a Linklist with class-properties for every li-item?

pepebe · 2006-03-11 22:46:00

Good evening everybody,

I’m working on a new project and need some push into the right direction…

As a basic navigation I have created a linklist with <code><txp: section_list></code>:

The result is:

<code>
<ul class=“navlist”>
<li><a href=“Section 1.html/”>Section 1</a></li>
<li><a href=“Section 2.html/”>Section 2</a></li>
<li><a href=“Section 3.html/”>Section 3</a></li>
</ul>
</code>

That’s fine, but now I want to do some css wizardry and therefore need a class for every item in the linklist.

The result should look like this:

<code>
<ul class=“navlist”>
<li class=“Section 1”><a href=“Section 1.html/”>Section 1</a></li>
<li class=“Section 2”><a href=“Section 2.html/”>Section 2</a></li>
<li class=“Section 3”><a href=“Section 3.html/”>Section 3</a></li>
</ul>
</code>

I’m sure I did somthing like this about two years ago, but cannot remember how.

Is anyone out there who can give me a gentle push (or mighty kick)?

Greetings from the dungeon,

pepebe

thebombsite · 2006-03-11 23:29:09

I’m not sure you could do it with the “section_list” tag but I think you could using “if_different”. You would need to create a new form template with something like:-

then in your page template or sidebar form or where ever it is you want it use the “article_custom” tag to call it wrapped in “ul” tags or you may be able to use the “output_form” tag. I think that should work (he says running away very quickly). ;)

Last edited by thebombsite (2006-03-11 23:29:31)

pepebe · 2006-03-12 01:07:47

Thanx,

your swift reply was exactly what I needed to break through my coders block.

First I putt:
<code>
<div class=“navcontainer”>
<ul class=“navlist”>
<txp:article_custom sortby=“Section” sortdir=“asc” form=“Linklist_with_class_prop” />
</ul>
</div>
</code>
into my template.

Then I wrote a new form:

“Linklist_with_class_prop”

Voilà!!! A neat list with links to all my sections and with a class attribute within every list-item.

I’m happy, thanx again!!!

Time to go to bed now.

Greetings from the dungeon,

pepebe

Last edited by pepebe (2006-03-12 01:09:13)

marios · 2006-03-12 01:47:51

Question:Could it allso be possible to have a different class for the actively selected section item, using the section_list tag , just with txp native tags ?

regards, marios

Last edited by marios (2006-03-12 01:55:06)

pepebe · 2006-03-12 02:07:41

I think I know what you are aiming for,

if you want to change the appearance of the section you are currently in,

change your bodytag to:

and add someting like this:

<code>
body#Section1 li.Section1 a{
background-color: white;
color: black;}
</code>

to your css.

So, if the backgound of your list item was for example white text on a black background, the list-item of the current section will be altered to black letters on a white background.

Now I really have to catch some sleep.

zzzzzz

pepebe

Last edited by pepebe (2006-03-12 02:09:35)

marios · 2006-03-12 02:14:51

Exactly, that’s what I’m after, I’ll have to digest that first though,

EDIT.:This won’t work, since you condn’t insert a txp native tag inside your CSS file, as you can in your page template,
you could put your CSS as inline stylesheet, but still there is no way to match an active list Item, at least not with the native section_list tag,
(Remember, the aim is to have everything happening automatically, so you don’t have to run around and update your pagetemplates.)
In any case, I’ve made a small workaround plugin, that does just this, I’ll make it available soon, after I have tested it out .

regards, marios

Last edited by marios (2006-03-12 02:54:09)

pepebe · 2006-03-12 09:34:32

Well, of cource this is not a “do-it-and-you-have-never-to-bother-about-it-again” thing.

But, if you dont’ add new sections quite regularly and you only have a “small” number of them, this will still be a good solution.

Horizontal navigation will benefit from it very much because it says “You are here!!!”

Remember, if you add a new section, all you have to do is to update your css file by one line.

<code>
body#Section1 li.Section1 a,
body#Section2 li.Section2 a,
body#Section3 li.Section3 a,
….add new line here if you have a new section in your txp site
{
background-color: white;
color: black;}
</code>

In my experience this doesn’t happen very often in ordinary txp designs.

If you want to do the same thing on a section/category base, of course it will be much more complex with this technique.

Anyway, I’m curious for your plugin and what it will do…

Regards,

pepebe

[edit]

@marios xi:

“but still there is no way to match an active list Item”

But there is a way. As long you only want to change the look of the link leading to the section you are currently in. Perhaps this wasn’t obvious, but by inserting the current pages section name into the body tag as unique id and adding to the li-items containing the links the section name as class, you can easily controll the appearance of the individul li item.

This is exactly what the styles above do.

So, if you are in “section 2”, the link of “section 2” will have a different css style.

Last edited by pepebe (2006-03-12 16:25:18)

marios · 2006-03-12 11:24:22

There is no way,how you can insert a class inside the li item of the section_list tag.
That’s because of the way this tag is constructed.
Your method and Stu’s Examples do work fine though.

regards, marios

Last edited by marios (2006-03-12 11:24:43)

thebombsite · 2006-03-12 13:23:57

Just to push this a little further, when automatically assigning an id to the “body” tag, there is a slight problem when viewing the front-page as it is the default section and thus has no name, so a little bit of “if_section” tagging can give you:-

but you already knew that didn’t you?

pepebe · 2006-03-12 16:24:07

So, your are meddling in mind-reading critter?

Damn, have to wear that special aluminium foil cap again.

Of course there is no active section when you arrive at a txp site, what you see is always the default template, so section is empty.

Started to wonder about that particular problem just a minute ago and went here to propose a solution.

Albeit much to slow.

I appreciate your effort and bow me knees in humbleness.

Regards,

pepebe

I think I will post some css code tonight, showing how to create some neat section navigation.

Vertical and horizintal for the beginning.

Later, we could try to prepare some suckerfish dropdowns (http://www.htmldog.com/articles/suckerfish/) for lunch?

Regards,

pepebe

[Edit:]Oh I see, that the suckerfish thing has allready been discussed here a couple of times. I will read through the posts and learn from them…
[Edit II:]Sorry, no css trimmed txp linklists for tonight. But I’ll try to do that asap. Now I’ll go and catch some zzz…

Last edited by pepebe (2006-03-12 21:38:33)

thebombsite · 2006-03-12 17:17:38

So you have one of those too eh? :)

marios · 2006-03-12 22:39:52

A livedemo for the modified section_list tag.(This is still under dev and will host my blog).
Now when you click on the section tabs, you will realize that each time a li item get’s active instead the title, the section name is used.(look allso the lowercasing and ASCII conversion)
I tried to temporarily circumvent that problem by altering the default section name in the corresponding table column in the database, but that leads to unexpected results plus your def page is not available with a normal ht.access file.
But as I sayd it’s only a workaround plugin as is now.

regards, marios

Textpattern CMS

Textpattern CMS support forum

#1 2006-03-11 22:46:00

How can I create a Linklist with class-properties for every li-item?

#2 2006-03-11 23:29:09

Re: How can I create a Linklist with class-properties for every li-item?

#3 2006-03-12 01:07:47

Re: How can I create a Linklist with class-properties for every li-item?

#4 2006-03-12 01:47:51

Re: How can I create a Linklist with class-properties for every li-item?

#5 2006-03-12 02:07:41

Re: How can I create a Linklist with class-properties for every li-item?

#6 2006-03-12 02:14:51

Re: How can I create a Linklist with class-properties for every li-item?

#7 2006-03-12 09:34:32

Re: How can I create a Linklist with class-properties for every li-item?

#8 2006-03-12 11:24:22

Re: How can I create a Linklist with class-properties for every li-item?

#9 2006-03-12 13:23:57

Re: How can I create a Linklist with class-properties for every li-item?

#10 2006-03-12 16:24:07

Re: How can I create a Linklist with class-properties for every li-item?

#11 2006-03-12 17:17:38

Re: How can I create a Linklist with class-properties for every li-item?

#12 2006-03-12 22:39:52

Re: How can I create a Linklist with class-properties for every li-item?

Board footer