Categories Sidebox Styling

[top hatt]

I am trying to change the styling of the Categories sidebox.

I want the Top Categories to be a bigger font, bold, and double spaced with the subcats being smaller font, normal, and double spaced.

I'm sure this has been asked before but a search came up dry.

I have been playing around with the stylesheet but I don't know enough to come up with anything useful.

Any help would be appreciated.

Dave

[gjh42]

Using Firefox and its Web Developer or Firebug extensions will let you see the exact classes/ids that apply to various elements like different kinds of categories; they will also let you try styling and see the results instantly, so you know what to add to your stylesheet.
If you want some kinds of styling distinctions or enhancements that the stock categories sidebox cannot accommodate, you can use Categories Dressing from Plugins.

[top hatt]

Thanks, I did not know Firefox could do that. I will check it out and give it a try.

Dave

[top hatt]

OK, after looking at about a million more sites I have changed my thinking on how I would like my navigation to work.

On the front page, I want the navigation to just be on the top navbar and turn off the left sideboxes. I do not have any right sideboxes at all.

When a person clicks on a heading they go to that category and the left sidebox reappears with the subcategories related to the top heading that was clicked as well as all the other left sideboxes that are active.

Here is what I have done so far.

In the Zen Cart tutorials about turning off the sideboxes I found the code to turn off the left sidebox for the front page only.

To turn off the left column for the home page only, you would insert the following:
if ($this_is_home_page) {
$flag_disable_left = true;
}

This went in the includes/templates/custom template/common/tpl_main_page.php file.

That works. The sideboxes are hidden on the main page only. That makes my body the entire width of the page for a big image etc., and makes the layout cleaner.

In another thread, I found code that would just show the subcategories in the left sidebox that were associated with the main category.

a.category-top {display: none;}

I tried this but could not get it to work. It shut off all the categories in the sidebox. Both the main categories and the subcategories.

I played around with the Firebug but I guess I'm just not that good because I couldn't seem to get the hang of it.

I tried to style the top navbar and replaced some of the code.

Original code:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #ffffff;
border-bottom: 2px solid #1975ff;
padding: 0.5em 0.2em;
font-weight: bold;
font-size: 1.1em;
color: #000000;
height: 1%;
}


#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: .5em;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #000000;
white-space: nowrap;
}

Replaced it with the following:

#navMainWrapper, #navSuppWrapper, {
margin: 0em;
background-color: #ffffff;
border-bottom: 2px solid #1975ff;
padding: 0.5em 0.2em;
font-weight: bold;
font-size: 1.1em;
color: #000000;
height: 1%;
}

#navCatTabsWrapper {
margin-top: 1.0em;
background-color: #ffffff;
border-top: 2px solid #1975ff;
border-bottom: 2px solid#1975ff;
padding: 0.4em 0.2em;
font-weight: bold;
font-size: 1.4em;
color: #000000;
height: 1%;
}


#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: .5em;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #000000;
white-space: nowrap;
}

As you can see I tried to break out the navCatTabs and style it. This resulted in the Home, Log in and My Cart headings losing their styling. It also affected the styling in the footer headings and EZ Pages.

I also tried to style the category sidebox without much success.

.sideBoxContent {
background-color: #ffffff;
border-radius: 0px 0px 0px 0px;
padding: 0.4em;
font-size: 1.1em;
color: #000000;
font-weight: bold;
text-align: left;
line-height: 2.4em;

}

The headings would not change color.

If you want to take a look the site is http://poolcuesexpress dot com/testsite

If someone could point me in the proper direction it would be appreciated.

Dave

[gjh42]

#navMainWrapper, #navSuppWrapper, {

You have to delete the trailing comma when you move a selector out of a list. This causes an error and the current rule will be ignored.

[top hatt]

Thanks, that fixed the one problem. I can get the style working for the elements.

Can you offer any help to have just the subcategories to show in the sidebox? I am trying to use less addon's so I was hoping not to go to Categories Dressing if I didn't have to.

Dave

[gjh42]

You said you tried the a.category-top CSS selector before, but this worked correctly for me just now:

#categories .category-top, #categories .category-top+br {display: none;}

[top hatt]

Wow!

That's exactly what I was looking for. I could not get it to work but my syntax was wrong.

Thank you for all your help. It is greatly appreciated.

Dave