Catagory like lenged, but need to add buttons

[Guest toosweets]

I have got the cat moved to the left like the classic or legend style. But want to make them buttons instead of a link. How do i add the buttons. Don't really know the syntax for it.

Here is what i have done, but don't know how to add button image

[Guest aikdo]

What do you mean by buttons, do you want to make them buttons like the buy and more buttons, or do you want to acctualy make them images... << the latter using the GD lib to create them dynamicaly...

[Guest toosweets]

Make them like an image like the tab for catorgies in the original file for my puple glass skin.

[Guest aikdo]

That could either be done as a GD image... a nice option, PM for more details on that, or you could create is as a Div button with a background... an example would be a purple varient of the buttons you see on my test site > http://test.cezz.co.uk/MODx-0.9.0/store/index.php

If you are going to be selling or distributing the skin the latter is the best option...

Again PM me for more details...

[Guest aikdo]

Ok as a Css tip for you all, this is how to do it...

first create two gradient images...

examples would be

And

I appolagise for their size i tried to multiply them so you could all see but it was going crazy...

anyway once you have your images... place them in your skin styleImages folder in the skin directory...

Ok now all you need to do is open style.css

Find

li.bullet {

list-style-type: square;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 75%;

color: #000000;	

}

Replace With

    li.bullet a{

    text-decoration:none;

    display:block;

  width:118px;

  margin:3px 10px 2px -8px;

  padding:5px 0 5px 0px;

  font-size:1.1em;

  font-weight:bold;

  text-align:center;

  background:#eee url(../img/gradient1.png) repeat-x;

  color:#26c;

  border-top:1px solid #ddd;

  border-right:1px solid #bbb;

  border-bottom:1px solid #bbb;

  border-left:1px solid #ddd;

}

li.bullet a:hover {

    display:block;

  width:118px;

  margin:3px 10px 2px -8px;

  padding:5px 0 5px 0px;

  font-size:1.1em;

  font-weight:bold;

  text-align:center;

  background:#eee url(../img/gradient2.png) repeat-x;

  color:#26c;

  border-top:1px solid #bbb;

  border-right:1px solid #ddd;

  border-bottom:1px solid #ddd;

  border-left:1px solid #bbb;

}

Change the image paths In Red and the colors that are Bold to match your site, and now your Catagories now display as mouse over images... ... or atleast they look like that...

Message here if you need aditional advice on this...

EDIT: you will also want to change the width and margins to suit your needs.

Edited December 8, 2005 by aikdo