Printable View
Greetings, I would like to change the color of my MAIN categories, the color of my sub-categories, and the color of my sub-sub-categories...
View the attached image for an example of what I want.
Thanks for the help!
http://img184.imageshack.us/img184/6111/help2zq0.th.jpg
Top categories can be styled by calling on
a.category-top { color: #001122; }
and subcategories can be styled with
a.category-subs, a.category-products { color: #001122; }.
There is not a facility built in to distinguish sub-subcats, but you could code it in tpl_categories.php.
I love you. Thanks for the swift responses!! :clap:Quote:
Originally Posted by gjh42
I have been fighting this for weeks. I am pretty good at CSS and untangling other people's but I am stumped as to how to change the color of my categories at the top of my website. I have tried everything. Here is the coding from the stylesheet:
A.category-top, A.category-top:visited {
color: black;
text-decoration: none;
font-size: 15px;
}
I tried to change it to black. No dice. It is still grey (too light a grey might I add). What am I doing wrong? Should I change the A to a? :frusty:or what. Gahhh!
Here is my website: http://www.possets.com I am trying to change the categories at the top : Classics, Naturals, Seasonals, etc.
In your stylesheet2:Quote:
Originally Posted by fabienne
#navCatTabs ul li a {
color:#9a9a9a; <- this one is controlling the color
}
HTH,
Shirley
*deep breath* Ok. I did do that and it changed my page quite a bit. So, I think I should ask the first question, why are there two stylesheets, stylesheet.css and stylesheet2.css? Is it just so your site can come with options, hook up one or the other? My site calls out both sheets, but when I modified stylesheet2 some of the text got much smaller, the background went black (I was trying to change the category text to black). So....
I thought that stylesheet was controlling the categories.
I will admit that I had tried to get rid of stylesheet2 about a month ago and did manage to get off all of the duplicate elements but got scared to eliminate it entirely. Somehow it seems to be overriding stylesheet in some elements. What does stylesheet2 control? I am a bit unfamiliar with the parts of Zen Cart being controlled here and thing it wisest to ask the experts. Thanks.
I am a bit confused here.
I am bumping this because I am still curious about the question of stylesheet vs. stylesheet2. Why are there two, can they be combined? Also, I have not quite gotten to the bottom of my original question and thought I would ask again. Thanks for any help you can give on this.
Having a stylesheet.css and stylesheet2.css is not default zen cart behavior. Someone working with your site put the stylesheet2.css up there. Perhaps stylesheet2.css is just a copy of the original stylesheet? If so, just delete it from the server. anything named stylesheetXXXXX.css that is on the server in the css/ folder will be auto loaded with zen cart. If you have two up there, and they are duplicates, then changes in ONE will not show up, because the original is still there. That may be the source of your frustrations.Quote:
Originally Posted by fabienne
Well, the foul fiend who put up the Zen Cart and the extra stylesheet2 was...me! Honest, that's the way it came. They were not exactly the same and that is why I was a bit loathe to just can stylesheet2, scared of what will happen if I did.
Of course, after much dithering, I just went in and renamed the stylesheet2 to see what would happen and be able to quickly put it back in if it all blew up. All my changed appeared and my site looks much much better and more readable. So, I will just leave things that way for a while and see if I need anything from stylesheet2. If not I will can it.
Thanks so much for giving me the push I needed. I was afraid you would say that stylesheet2 contained all the most valuable information of all and etc.
The question remains as to where the stylesheet2 came from. There is no such thing in standard Zen Cart; someone (was it you in early experiments?) added it. Any changes there can just as well be put in stylesheet.css if they are actually needed.
Perhaps there's a template out there that has two stylesheet files on accident? What template are you using fabienne?Quote:
Originally Posted by gjh42
I am trying to set the top category color different than and the subs and products. I have tried several variations of the code below with no luck. I can set the navColumnOne color, but then the top category, subs and products are all the same color.
www.sweetzouzou.com
a:link, #navEZPagesTOC ul li a:link, #navTOC ul li a:link, #navMain ul li a:link, #navSupp ul li a:link, #navCatTabs ul li a:link {
color: #f00;
text-decoration: none;
}
a:visited, #navEZPagesTOC ul li a:visited, #navTOC ul li a:visited, #navMain ul li a:visited, #navSupp ul li a:visited, #navCatTabs ul li a:visited {
color: #f00;
text-decoration: none;
}
a:hover, #navEZPagesTOC ul li a:hover, #navTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #000;
text-decoration: none;
}
a:active, #navEZPagesTOC ul li a:active, #navTOC ul li a:active, #navMain ul li a:active, #navSupp ul li a:active, #navCatTabs ul li a:active{
color: #000;
text-decoration: none;
}
#navColumnOne .category-top a:link {
color: #FFD700;
text-decoration: none;
}
#navColumnOne .category-top a:visited {
color: #FFD700;
text-decoration: none;
}
#navColumnOne .category-top a:hover {
color: #fff;
text-decoration: none;
}
#navColumnOne .category-top a:active {
color: #fff;
text-decoration: none;
}
Thx Sweet
If you are wanting to modify the categories sidebox colors, none of the code you have posted will work.
For starters,
#navColumnOne .category-top a:link {
is not valid, because it applies to links inside an element with class category-top.
The links themselves have class category-top, so you would write them like this:
#navColumnOne a.category-top:link {
Better than specifying #navColumnOne, use this to specify the categories sidebox wherever it is:
#categories a.category-top {color: #112233;}
#categories a.category-subs {color: #223344;}
#categories a.category-products {color: #334455;}
(You don't need to repeat "text-decoration: none;" because it is inherited from the original a:link {} declaration; and you actually shouldn't need the #categories in your case.)
I realize you only have navColumnOne, but it is good practice to use meaningful code wherever possible, and "categories" means more in this case than "navColumnOne".
#navCatTabs applies to the header categories-tabs menu, which you are not using.
By the way, I like your approach to presenting only exactly what is needed to use your site, without distracting gewgaws. I understand the work it took to look so simple. Nice design!
Thx Glenn. I am getting close to posting the site up for review in a week or 2 and I am glad to get your opinion. I know you have seen a thousand+ websites in process so the props are greatly appriciated!
I was able to get the color changed for the a.category-top and a.category-products but the a:link, a:visited, a:hover and a:active are giving me fits. The below css does not change the link color or decoration. Nothing happens when mouse over.
a.category-top {
color:#FFD700;
}
a.category-top a:visited {
color:#FFD700;
}
a.category-top a:hover {
color: #fff;
}
a.category-top a:active {
color: #fff;
}
a.category-products {
color: #fff;
}
a.category-products a:visited {
color: #fff;
}
a.category-products a:hover {
color:#fff;
text-decoration: underline;
}
a.category-products a:active {
color:#fff;
}
Thx, Sweet
Remove the second "a" and tighten the :visited etc. up to the products:
a.category-products {
color: #fff;
}
a.category-products:visited {
color: #fff;
}
a.category-products:hover {
color:#fff;
text-decoration: underline;
}
a.category-products:active {
color:#fff;
}
Perfect! Thx again Glenn
Quote:
Originally Posted by gjh42
Could a kind hearted soul tell this completely clueless soul how I can code this? I'd really appreciate it! I've changed the color on my sub-categories successfully, but I have one sub-category that has a sub-category and it's hard to distinguish, so I'd like to have it a different color. Thanks
Denise
That won't be hard, but I can't do it right now.
Post a link to your site and I'll take a look at it when I have time.
Thanks Glenn, I greatly appreciate that!Quote:
Originally Posted by gjh42
Site is http://www.satinweddingcompany.com
Denise
Edit your /includes/templates/your_template/sideboxes/tpl_categories.php. Find this near the top:and add to your stylesheet:PHP Code:// many variations of this can be done
// case ($box_categories_array[$i]['path'] == 'cPath=3'):
// $new_style = 'category-holiday';
// break;
case ($box_categories_array[$i]['top'] == 'true'):
$new_style = 'category-top';
break;
case ($box_categories_array[$i]['has_sub_cat']):
$new_style = 'category-subs';
break;
default:
$new_style = 'category-products';
}
. (substr_count($box_categories_array[$i]['path'],'_') = 2)? '2': ''
in two places to getand addPHP Code:// many variations of this can be done
// case ($box_categories_array[$i]['path'] == 'cPath=3'):
// $new_style = 'category-holiday';
// break;
case ($box_categories_array[$i]['top'] == 'true'):
$new_style = 'category-top';
break;
case ($box_categories_array[$i]['has_sub_cat']):
$new_style = 'category-subs' . (substr_count($box_categories_array[$i]['path'],'_') = 2)? '2': '';//class .category-subs2 for sub-subcat
break;
default:
$new_style = 'category-products' . (substr_count($box_categories_array[$i]['path'],'_') = 2)? '2': '';//class .category-products2 for sub-subcat
}
a.category-subs2, a.category-products2 {color: #336699;}
This will strictly make new classes for second-level subcats, no more, no less.
A simpler mod that will distinctly identify all levels of subcats is to add
. substr_count($box_categories_array[$i]['path'],'_')
to getand replace thePHP Code:// many variations of this can be done
// case ($box_categories_array[$i]['path'] == 'cPath=3'):
// $new_style = 'category-holiday';
// break;
case ($box_categories_array[$i]['top'] == 'true'):
$new_style = 'category-top';
break;
case ($box_categories_array[$i]['has_sub_cat']):
$new_style = 'category-subs' . substr_count($box_categories_array[$i]['path'],'_');//class .category-subsx for subcat level x
break;
default:
$new_style = 'category-products' . substr_count($box_categories_array[$i]['path'],'_');//class .category-productsx for subcat level x
}
a.category-subs, a.category-products {}
in your stylesheet with
a.category-subs1, a.category-products1 {color: #7733ff;}
a.category-subs2, a.category-products2 {color: #336699;}
etc.
Glenn,
Thanks so much for the code, but I can't get it to work properly and I can't figure out what I'm doing wrong. The first code didn't work at all, it wiped out all my boxes all together. The second code worked, but it only changed the color for the sub-category title, not the listings below it. And all the listings have the same color despite being assigned different ones. (if you check the website and click on "Themed Favours", you'll what I mean.)
I must have missed something?
Denise
I'll take a look at this when I get back to my home computer with the right tools, and test it on my local site. (I forget if I tested it before or not...)
Just came across this old thread and want to note that I have tested the code in post 20, second version, and it does correctly generate class names of .category-subs1, .category-products1, .category-subs2, .category-products2, etc. reflecting subcat level.
There are a couple of other classes that could affect these elements, so you want to make sure you know what you are doing in styling them.
Just reviving an old thread... Ive been searching through the forums to find a way to 'bold' the currently selected element in the category sidebox list.
I can style top level menu items and subs (thanks to this thread) - but Im wondering if we can style the prod category that is currently active?
Thanks,
Scott.
Add to your stylesheetCode:.category-subs-parent, .category-subs-selected {
font-weight: bold;
}
Aah Greg, yet again you come to my aid.
Thank you!
-Scott.
Glenn your patience is truly endless! Let me abuse of it: I was wondering it there was an easy way (CSS modification) to change the color of the links in the side columns (One and Two I believe they're called) independently from those of the central column?
My website should be accessible here: http://87.210.162.199/catalog/ (it might takes a few attempt)
thanks
Carlo
I seem to have found it, just adding:
.centerColumn a {
}
will affect only the links in the center columns, being able to change the properties of every other link with the
a: link ..... ul li a {
}
statement
Yep, and you can affect just the left or right column with
#navColumnOne a {}
or
#navColumnTwo a {}
And one more to go, this has been quite a ##########: the "categories" list of links (which is not an "ul li a", by the way) is quite tight! Adding padding or margin to the
A.category-top, A.category-top:visited {
text-decoration: none;
padding: 1em;
}
Only add padding to the LEFT of the links, not BETWEEN each link, the space remain the same, ditto for "margin".
It could have something to do with the <br /> at the end of each line? As per the source code:
<!--// bof: categories //-->
<div class="leftBoxContainer" id="categories" style="width: 150px">
<h3 class="leftBoxHeading" id="categoriesHeading">Categories</h3>
<div id="categoriesContent" class="sideBoxContent">
<a class="category-top" href="/catalog/index.php?main_page=index&cPath=69">Intense</a><br />
<a class="category-top" href="/catalog/index.php?main_page=index&cPath=70">Mild</a><br />
<a class="category-top" href="/catalog/index.php?main_page=index&cPath=71">Light</a><br />
<a class="category-top" href="/catalog/index.php?main_page=index&cPath=75">Balsamico ABTM</a><br />
<a class="category-top" href="/catalog/index.php?main_page=index&cPath=74">Books</a><br />
<a class="category-top" href="/catalog/index.php?main_page=index&cPath=73">Bundles</a><br />
<hr id="catBoxDivider" />
<a class="category-links" href="/catalog/index.php?main_page=products_new">New Products ...</a><br />
</div></div>
<!--// eof: categories //-->
Thanks again in advance! :D
Carlo
P.S. Any idea why the CSS won't load in IE7?
If the CSS is not loading in IE7, that is a problem with your computer/browser.
Since the links are inline elements, with <br /> to ensure they stay on separate lines, they will not respond to padding properties. You can use line-height:, but that will also space out any long names that wrap to two lines. To get total control over categories sidebox styling, try Categories Dressing (which also converts the categories and subcats to a properly nested set of <ul> lists).
Thanks Glenn for you answer. However, Categories Dressing (as I'm not, nor I plan to, using any subcategories) seemed a bit like shooting mosquitos with a cannon, I just patched the tpl_ to produce statically (your usage of an ad-hoc class is quite ingenious) the ul li that I needed. That's life :D
Unfortunately the glitch in IE7 was referred to me and I have no way to check it, I'm trying to browse online, it *seems* that IE7 has problem with long CSS. We'll report if I'll know more.
If you will not have subcategories, coding a straight <ul> into tpl_categories.php is fine.
I don't have IE7 (my computer is too old to install it), but I know that IE6 was unable to handle more than two classnames applied to an element - that is part of the history of the Categories Dressing classname structure. They could have been a bit simpler if IE handled classes better.
Hi guys
I am a newie to Zencart and learning my way through....
I have three questions, sorry if they have already been answeared.
1. How to change the colour of categories text....
I tired to fine the tpl_categories.php. file but could only find categories.php and when i added the line a.category-top { color: #001122; } everything but the top header disapeared when i uploaded.
2. Is there a ways to keep the categories all open?.... I would like it so it appears category, and products listed underneith without having to click on the category button to make it open up. I think it would be easier for people to find what they want, or see something else they may like. (And maybe bold the categories?)
3. Is there a way to take away the automated total adding up in the shopping cart on the right side panel?.... I would like to keep the cart there but not the total price, because I am thinking it may stop people from buying as much on the run.
Any help would be sooooo thank full
Thanks All
Gian
a.category-top { color: #001122; } is a styling rule, and does not go in any php file but in the stylesheet (/includes/templates/your_template/css/stylesheet.css).
What you want is known as "expanded categories". There are several mods that do this in one way or another, but if you want the products to appear in the sidebox with the categories, look at Expanded Category List in Free Addons. If you will only ever have a few dozen products total, this may work well for you. Bolding the categories is a matter of adding an appropriate style rule.
Any display modification is possible; this one would probably be easy with a "display: none;" style on the correct element. A link to see your site will let us give the right answer.
This is an extremely simple question, and I have looked for the answer, which is what brought me to this thread.
After installing Categories Dressing, I simply want to change back the text color of cats (no sub cats in my site yet) to the stock green color (and bold green for current selection) from before installing Cat Dressing.
The main stylesheet of course is still set to show green (see below) and I cannot find an equivalent selector in the Dressing stylesheet. It's as though the text color is ignoring the main stylesheet green setting, but using the the site-wide default (blue and red).
Any help is appreciated.
vintage-adventures.com
I think maybe I know what to do .. create stylesheet entries in the Dressing stylesheet for these classes:
using the values I want, from the classic Zen Cart template stylesheet which uses these classes:Quote:
li class="cat-top"
a class="cat-selected-text"
etc.
Am I on the right track to get category text back to green and bold green for the top level?Quote:
a class="category-top"
a class="category-subs-parent"
etc.
here is the code I now have on the bottom of the Dressing stylesheet to make the text green again w/ bold on active and number of items not bold. I also changed the border color of the box and you can easily use an image program such as GIMP to change the bullet images into a different color. Next I want to find a way of making the bulleted list items use a hanging indent .. not sure why they don't automatically do that like most bulleted lists.
Quote:
#categories li.cat-top a {
color: #008000;
}
#categories li a.cat-selected-text {
font-weight: bold;
}
span.catCount {
color: #000000;
font-weight: normal;
}
The Cat Dressing list items use standard list-item styling, except applied to the <a> elements inside them; do you have the admin indents turned off? (Layout Settings > Categories separator between subcategories).
I don't recall that ordinary <ul> lists have hanging indents, but you could try a negative text-indent on the display: list-item; styling.
thank you for your message, Glenn.
www.vintage-adventures.com
yes, I did end up using negative text indent. Take a look. Turns out, when an image is used to lead in the bullet, the standard hanging indent feature of ULs is lost. Here is an excellent resource for list issues. http://www.alistapart.com/articles/taminglists.
so, what I did, was took out the stock Zen separators, and then applied positive padding and negative text indent to the top cat UL container inside of the overall UL container that could contain multiple top cat groupings. You really allowed for a lot of customization when you built this mod.
Leaving all bullet elements flush left, and using some color, I've got somewhat of a 'sliding' bullet menu now. The only downside I noticed is a difference in the number of pixels that FF uses between the bullet image and the first letter of text, which causes a slight difference in the amount of negative text-indent that would be needed for precision left-side flushness IE8 vs. FF. I tried to find a cross-browser solution to get the same left-side flush for both browsers, such as using 'outer' on the bullet and then pushing it all back in with margin or padding, but nothing else worked quite right, because I wanted the hyperlink area to go wall-to-wall inside the list, so what I've got is, I think, as close as I'm going to get.
I LOVE THIS!! I just implemented it on my site. THIS SHOULD BE STANDARD ON ZENCART! How do I nominated this for inclusion?Quote:
Originally Posted by gjh42
I've been searching for days for a solution for how to style sub-cats within sub-cats within sub-cats on my leftside menu. This deserves it's own thread!
This is my result. I still need to work on making the levels more distinct. But I'm thrilled it can be done!
http://focalpointhardware.net/index....11_12_15_17_20
Thanks, gjh42! You are the Zenest of the Zen.
Glad this simple old mod was helpful for you. It does allow some of the same kinds of customizations as the much more complex code in Categories Dressing (which generates correctly nested <ul><li> lists for about any possible display permutation).