Subcategory Layout Question!!

[gjh42]

It is currently on your public server, or else I wouldn't be able to see it. You should ftp a copy of it to your local computer, edit there and ftp it back to the server.

If you have a local (xampp etc.) server set up on your pc with a copy of your ZC there, edit the local copy and once it works right ftp it to the public server. That's what I do.

[James O]

Are you sorted

[pdxdoug]

Okay Glen,

If I wanted to make the subcategory listings each look as if they had a 'button' around them, is that possible?

I added the border statement to your above example but it extends the full width of the center column. So does the background url statement with a small 200x12px background box.

Any ideas?

Thanks

[gjh42]

I need to see what you have to be sure of how to do what you want.
By "button", do you mean a round-corner box? Outlined or solid color?

[pdxdoug]

Hey Glenn,

On category pages I have some descriptive text and below that are the subcategories. Per your post, I've made the subcategory links text larger, but what would be great is to have those links surrounded by a colored button (rounded corners would be nice).

Here is a sample page:
http://www.broadwayfloral.com/orchid...65db40a8f38a91

You can see subcat links are Plants, Arrangements, Gardens. Books, Fertilizers and Supplies.

I want to make sure that customers know to click on those links for products and a button seems to be a natural.

Now if you have another idea, I'd sure like a second opinion.

Thanks

[gjh42]

For a basic "button" appearance, you can use an outset border on the links:

.categoryListBoxContents a br {display: none;}
.categoryListBoxContents a:link {
    font-size: 1.2em;
	font-weight: bold;
	color: #FF0000;
    padding: 0.3em;
    background: #99aabb;
    border: 3px outset #667788;
	}
.categoryListBoxContents a:hover {
    font-size: 1.2em;
	font-weight: bold;
	color: #000000;
	}
.categoryListBoxContents {
	float: left;
	text-align: center;
	}

You don't need the last rule, as it duplicates previous ones exactly.

A nicer rounded button that stretches to fit the text will take some more complex CSS.
A button image that is the same for all subcat links can be applied to
.categoryListBoxContents {
as a background, with no-repeat and center center positioning.

[pdxdoug]

You are truly the wizard of stylesheets!
Any thoughts on how to make them the same width?

I know, I ask a lot.

Thanks!

[gjh42]

If you want the buttons all the same width, that is easy. Just add

display: block;
width: 15em;
margin: auto;

to the
.categoryListBoxContents a:link {
rule (adjust as desired.)

If you want fancier buttons, use a background image as mentioned above.

[pdxdoug]

You are a genius! The ccs stuff is starting to make sense, but I've got a long way to go.

Thanks again.
Any free time to help on category dressings yet? And maybe smart backgrounds?

[gjh42]

I have just finished the update to Categories Dressing, and posted it in the support thread for some beta testing, so I should be able to confidently work with that next week. We can get together on details.