Hello
How can I change the look of the navigation side bar, to look like this:
with different colors in each link
Hello
How can I change the look of the navigation side bar, to look like this:
with different colors in each link
Last edited by paha; 10 Mar 2008 at 08:37 PM.
You will have to create images for this
Zen-Venom Get Bitten
ok, no problem.
and then, what should I do with them?
Apply the image as a background image to the element you want it in with css
Zen-Venom Get Bitten
Interesting Idea,
But I just see that if the links of categories increase or decrease, the image will not feet corectly.
is nost pocible to add an image per link, so it is independet color for each link, category? so if I add a categorie or product the link image or background color will appear with it, or disappear if the category is deleted
Not possible as the tag for these is the sameis nost pocible to add an image per link, so it is independet color for each link, category? so if I add a categorie or product the link image or background color will appear with it, or disappear if the category is deleted
Zen-Venom Get Bitten
Categories Dressing has features and information that can help you achieve this.
One option is simply using an ability built into tpl_categories.php for per-category styling (instructions given in the file's comments, and expanded on in the Cat Dressing readme.txt).
Last edited by gjh42; 11 Mar 2008 at 09:26 PM.
A close look at your example says that your best bet might be to make one background image for the whole box, and have it positioned relative to the bottom of the box. Then if a category goes away, the top color will move up & out of sight. Make the image with an extra color band at the top, and if you get another category, the whole image will move down to show the previously hidden color.
Yes, you will call the background image in stylesheet.css.
Given the design in your example, I would say to make the main bg image include the round corners at the bottom, and make a top image that has the black rounded corners but otherwise transparent.
Add to your stylesheet:Code:##########___ / \ top image ##########__ / \ | ##########__ | bottom image / \ | ##########__ | / \ | ##########__ | / \ | ##########__ | / \ | | \##########__/Code:#categoriesHeading {display: none;} #categories { background: url(../images/catbottombg.gif) bottom center; } #categoriesContent { background: url(../images/cattopbg.gif) top center; }
Last edited by gjh42; 12 Mar 2008 at 04:51 AM.
Bookmarks