How do I display the parent category of the current category?

Kjeld · 2008-01-16 12:46:39

Hi SebastianS,

I am not a very rational programmer. I just try, make a small change and try again until something works. So if this doesn’t work for you, I won’t be much of a help, I am afraid…

This is set up for a site with two sections (japan and non-japan) and a dozen categories with sub-categories up to two levels deep. The sample below shows css for three top categories (arts, business, computers).

Plugins used:

smd_if
smd_parent
stw_category_tree version 1.0.1 (start of thread) | version 1a.2 (gives me lots of error messages…)

Body tag of default page:

<body <txp:if_category><txp:smd_if field="parent:LVL1" operator="gt" value="0">id="<txp:smd_parent />"<txp:else />id="<txp:category />"</txp:smd_if><txp:else />id="home"</txp:if_category>>

Body tag of archive page (which displays the individual article):

<body <txp:if_individual_article><txp:smd_if field="parent:CAT1" operator="gt" value="0">id="<txp:smd_parent catnum="1" />"<txp:else />id="<txp:category1 />"</txp:smd_if><txp:else /><txp:if_category><txp:smd_if field="parent:LVL1" operator="gt" value="0">id="<txp:smd_parent />"<txp:else />id="<txp:category />"</txp:smd_if><txp:else />id="home"</txp:if_category></txp:if_individual_article>>

The tags above output the current category as an id. For example:

<body id="arts">

The category menu (in my case, in the left menu). It doesn’t show empty categories (so make sure you have articles with categories, or remove killempties=“y”). And it only shows the categories that belong to the current active section (so make sure you are in a section, or remove localized=“y”):

<txp:stw_category_tree maxlevel="1" section="*" break"li" cssid="catmenu" killempties="y" localized="y" />

The css. The following sets up your list style:

ul#catmenu {
 list-style: none;
 margin: 0;
 padding: 0;
}
ul#catmenu li a {
 display: block;
 width: 100%;
 font-size: 12px;
 font-weight: bold;
 line-height: 180%;
 color: #787878;
 text-indent: 8px;
}

css continued. This determines the look when a visitor hovers over the links. Each category has a different color. For each top category, add a new ul#catmenu li#cat-[category name] a:hover statement with a different color:

ul#catmenu li a:hover  {
 color: #E56701;
 border-left: 4px solid #E56701;
 text-indent: 4px;
 text-decoration: none;
}
ul#catmenu li#cat-business a:hover  {
	border-left: 4px solid #006EC6;
}
ul#catmenu li#cat-computers a:hover  {
	border-left: 4px solid #9C9;
}

css continued. This makes the category link active (even when you are on an individual page!). For each top category, add a new #[category name] li#cat-[category name] a statement to the top cluster.:

body#arts li#cat-arts a, #business li#cat-business a, #computers li#cat-computers a {
 color: #E56701;
 border-left: 4px solid #E56701;
 text-indent: 4px;
 text-decoration: none;
 /*width: 156px;*/
 background: #F2F2F2;  /* #D6D6D6 #DCDDD3 */
}

css continued. This gives each category a unique color. For each top category, add a new body#[category name] li#cat-[category name] a statement with a different color:

body#business li#cat-business a  {
	border-left: 4px solid #006EC6;
}
body#computers li#cat-computers a {
	border-left: 4px solid #9C9;
}

The fun part is that this works for an individual article (an active class does not).

What makes it even more fun is that you can use the body id to make any part of your site change color according to the category. Say that you have a heading for each category to which you want to add a color coded square. Use this css:

#head-left {
 display: inline;
 font-size: 14px;
 color: #737272;
 font-weight: bold;
 float: left;
 text-transform: uppercase;
}
body#arts #head-left {
	border-left: 16px solid #E56701;
	text-indent: 4px;
}
body#business #head-left {
	border-left: 16px solid #006EC6;
	text-indent: 4px;
}
body#computers #head-left {
	border-left: 16px solid #9C9;
	text-indent: 4px;
}

And this html:

<div id="head-left">[your category header]</div>

The options are truly endless. You can have the whole page change color for each category if you want to. You can add different background images per category. You can even have different lay-outs per category. It is all up to your imagination and available free time. ;-)

In my case it gives me something like this (notice how deep down the category tree this page is):

Click on a different category, and wow, a different color:

Cool, hey!

Last edited by Kjeld (2008-01-17 00:36:32)

Bloke · 2008-01-16 22:49:17

Hey that’s pretty sweet Kjeld. Cunning! Thanks for the site link, btw; lookin good :-)

I didn’t hear any outcry about the plugin all day so smd_parent is now official. That version is a bit more optimized and has better help, so anyone who downloaded the “beta” version above should probably revisit the link to get the proper version.

SebastianS · 2008-01-16 23:04:58

Thank you for posting that Kjeld, I will take time to look at it, it has already given me some ideas.

May I point out in case you are not aware of it that there is a stw_category_tree 1a.2 version linked from stw_category_tree page 25 Paul_U
reply number 249.
And thank you Stef for the smd parent official version.

Last edited by SebastianS (2008-01-16 23:20:44)

Kjeld · 2008-01-17 00:25:09

SebastianS wrote:

Thank you for posting that Kjeld, I will take time to look at it, it has already given me some ideas.

You’re welcome. It is nice to be able to give back to the community.

May I point out in case you are not aware of it that there is a stw_category_tree 1a.2 version linked from stw_category_tree page 25 Paul_U
reply number 249.

I had read over that somehow. ~~Upgrades should be listed on the first entry of the thread, don’t you think?~~ (Edit: the upgrade didn’t come from the author, I found out.) Have adjusted it above.

EDIT: I installed 1a.2, but it gives me lots of errors. Went back to the previous (author made) version.

Last edited by Kjeld (2008-01-17 00:44:38)

Kjeld · 2008-01-17 00:33:42

Bloke wrote:

Hey that’s pretty sweet Kjeld. Cunning! Thanks for the site link, btw; lookin good :-)

Thanks

I didn’t hear any outcry about the plugin all day so smd_parent is now official. That version is a bit more optimized and has better help, so anyone who downloaded the “beta” version above should probably revisit the link to get the proper version.

Thanks, Steff. I have just upgraded.

Last edited by Kjeld (2008-01-17 00:33:56)

Textpattern CMS

Textpattern CMS support forum

#16 2008-01-16 12:46:39

Re: How do I display the parent category of the current category?

#17 2008-01-16 22:49:17

Re: How do I display the parent category of the current category?

#18 2008-01-16 23:04:58

Re: How do I display the parent category of the current category?

#19 2008-01-17 00:25:09

Re: How do I display the parent category of the current category?

#20 2008-01-17 00:33:42

Re: How do I display the parent category of the current category?

Board footer