Category list styling with Category Expander plugin - help please!! | Community Support

#1 / Jul 05, 2007 9:10am

Kippi

83 posts

Category list styling with Category Expander plugin from http://gadgets.silenz.org

I have installed this plugin which looks like this:

{exp:cat_expand:wrapper}
{exp:weblog:categories weblog="{my_weblog}" style="nested"}
{exp:cat_expand:expander category="{category_id}" active-style="font-weight:bolder;"}
<a href="http://{path={my_template_group}/index}">{category_description}</a>
{/exp:cat_expand:expander} 
{/exp:weblog:categories}
{/exp:cat_expand:wrapper}

I have managed in a roundabout way to style this but I cannot get any further.

I have put in this style:

.nav_categories ul {
list-style: none;
margin-top: 3px;
margin-bottom: 3px;
margin-left: 0em;
padding-left: 0em;
text-indent: 1em;
}

.nav_categories li {
list-style: none;
margin-top: 3px;
margin-bottom: 3px;
margin-left: 0em;
padding-left: 0em;
background-color: #cccc00;
}

.nav_categories li ul {
list-style: none;
margin-top: 3px;
margin-bottom: 3px;
margin-left: 10px;
padding-left: 0em;
background-color: #999900;
text-indent: 1em;
} 

.nav_categories li ul li {
list-style: none;
margin-top: 3px;
margin-bottom: 3px;
margin-left: 0em;
padding-left: 0em;
text-indent: 0em;
}

Can anyone help me to achieve something along the lines of the attached illustration?

Thanks, Paul

#2 / Jul 05, 2007 10:06am

silenz

1651 posts

And don’t get distracted by the plugin 😉
The question as well applies to just:

{exp:weblog:categories weblog="{my_weblog}" style="nested"}
<a href="http://{path={my_template_group}/index}">{category_description}</a>
{/exp:weblog:categories}

#3 / Jul 06, 2007 8:34am

silenz

1651 posts

Maybe you can take this as a starting point ...

.nav_categories {
    width:150px;
}
.nav_categories a {
    color:black;
    font-weight:bold;
    text-decoration:none;
    padding-top:5px;
    padding-bottom:5px;
    display:block;
}

.nav_categories ul {
    list-style: none;
    padding-left:0px;
}

.nav_categories li {
    list-style: none;
    background-color: #666600;
    text-indent:10px;
}

.nav_categories li ul {
    list-style: none;
    padding-left:0px;
}

.nav_categories li ul li {
    list-style: none;
    background-color: #999900;
        text-indent:20px;
} 

.nav_categories li ul li ul {
    list-style: none;
    padding-left:0px;
}

.nav_categories li ul li ul li {
    list-style: none;
    background-color: #CCCC00;
    text-indent:30px;
}

#4 / Jul 06, 2007 9:06am

Kippi
83 posts

Thanks silenz!! you are a champ.

That has really set me on the right path!
Just need to work on the over/active states.

Would really like to be able to control the colour/background image of the three states of each link.

Cheers, will set the work!!
#5 / Jul 12, 2007 12:54pm

Kippi
83 posts

I have managed to get the styling to work the way I want with all states.
I can share the styling if anyone is interested.

I was wondering if it was possible to have it set up so the Parent category link was not actually a link but only revealed the secondary category when pressed.

I think this has been discussed before “Parent category not a link” but I cannot find a solution.

Thanks for any help 😊
#6 / Jul 13, 2007 6:35am

silenz
1651 posts

I was wondering if it was possible to have it set up so the Parent category link was not actually a link but only revealed the secondary category when pressed.
solution.

I don’t think that’s feasible for what this plugin does, but it sounds like what this system does where ironically this behaviour is unwanted 😉

Thread

Category list styling with Category Expander plugin - help please!!

Kippi

silenz

silenz

Kippi

Kippi

silenz

Username

Password

Thread

Category list styling with Category Expander plugin - help please!!

Kippi

silenz

silenz

Kippi

Kippi

silenz

ExpressionEngine News!

Username

Password

Email Address

Display Name

Password