Backround buttons on main page category

[hengxi]

Hello,

Is it possible to add a background button to the categories link ?

I have try with the css but it hav only one class : categoryListBoxContents

I have ry many way but nothing work.

Thank you for your help.

[niccol]

I am not sure what you are trying to do. But I am guessing that you want to apply a stlye to the list of links that are in the category sidebox. Is that correct?

If so try styling in the stylesheet:

a .category-top{}

This will only style the main categories and not the sub-categories. Let us know if this is not what you want.

Also a URL always helps people understand what you want

[hengxi]

Sorry but at this time my shop is in local also i can't give you an url.

It is not in the sidebox that i want to change but in the home page with category.

The css have only one class with image and link together also it is not easay.

I have try with .categoryListBoxContents and add "a"

.categoryListBoxContents a {xxxxxxxx}

That work but i can't add image, only repeat backgound.

Thank you

[niccol]

OK find a file called category-row.php.

It is in includes - modules - yourtemplate - category-row.php

At about line 39 you will find:

    $list_box_contents[$row][$col] = array('params' => 
'class="categoryListBoxContents"' . ' ' . 'style="width:' . 
$col_width . '%;"',

                                           'text' => '<a href="' . 
zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . 
zen_image(DIR_WS_IMAGES . 
$categories->fields['categories_image'], 
$categories->fields['categories_name'], 
SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) 
. '<br />' . $categories->fields['categories_name'] . '</a>');

This is where the html for that div is created. So you can edit it to something like:

    $list_box_contents[$row][$col] = array('params' => 
'class="categoryListBoxContents"' . ' ' . 'style="width:' . 
$col_width . '%;"',
                                           'text' => '<a href="' . 
zen_href_link(FILENAME_DEFAULT, $cPath_new) . '"><span 
class="newclass">' . zen_image(DIR_WS_IMAGES . 
$categories->fields['categories_image'], 
$categories->fields['categories_name'], 
SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT)
 . '</span><br />' . $categories->fields['categories_name'] . 
'</a>');

Which will add a new span ( with the class new class ) around the image. then you can add a rule for this class in the style sheet. you will be able to stlye the image and text separately. If you want to put in a background you may want to use display:block to control the size of the container.

Now the page html will look something like:

<div class="categoryListBoxContents" style="width:100%;">
<a href="http://www.nickcollie.co.uk/catalog/index.php?main_page=index&amp;cPath=1&amp;zenid=e6ivvs15ede6hl5h7oknhfnta6">
<span class="newclass">
<img src="images/categories/category_hardware.gif" alt="Hardware" title=" Hardware " width="81" height="57" />
</span>
<br />Hardware</a>
</div>

[niccol]

Of course you could target just the image with css by using the rule

.categoryListBoxContents img{border:3px red outset;}

this will create a simple button effect around the image which might be enough.

If you want a more complex background then you are going to find that it is best to add a <span> around the image.

[hengxi]

Thank you very much Nick for your time.

It is not exactly this that i want to do:

Under the image of the category, it have a link with the name of the category.

It is a simple link, not very nice.

I want to add an image in backround of this link.

I have made with : background-image in css for the product without problem but for the category, i can't find.

I know than it is not easy without url also i send you 2 pictures attached.

Thank you for your help.



This is good for products:
.itemTitle{
text-align:center;
background-image: url(../images/name.png);
width:180px;
max-width:70%;
margin-top:7px;
padding-left:auto;
padding-right:auto;
margin-left:auto;
margin-right:auto;
background-repeat:no-repeat;
height: 30px;
line-height: 24px;
}




But not for category

[niccol]

Well then you just need to put the <span> in a different place:

    $list_box_contents[$row][$col] = array('params' => 
'class="categoryListBoxContents"' . ' ' . 'style="width:' . 
$col_width . '%;"',
                                           'text' => '<a href="' . 
zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . zen_image(DIR_WS_IMAGES . 
$categories->fields['categories_image'], 
$categories->fields['categories_name'], 
SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT)
 . '<br /><span 
class="newclass">' . $categories->fields['categories_name'] . 
'</span></a>');

Then you can style .newclass any way you want.

As it is a <span> you may want to change it to a <div> or use a display:block so that you can adjust its size.

eg:

.newclass{
display:block;
text-align:center;
background-image: url(../images/name.png);
width:180px;
max-width:70%;
margin-top:7px;
padding-left:auto;
padding-right:auto;
margin-left:auto;
margin-right:auto;
background-repeat:no-repeat;
height: 30px;
line-height: 24px;
}

[hengxi]

Thank you very much, work fine.

[inteltronic]

Hello, can anyone help me, i want to replace text of product in caegory with button, and this next time after i add new product to do automatically not manually. here i am add a picture. thank you

[inteltronic]

Hello, can anyone help me how to add a buttons in category sidebox

happy easter to all you.

Wbr, Carmelo