Main and Sub-Category button name/text position

[danielosko]

Hello,

How do I position the category name to go over my category image on my main category and sub-category pages?

Right now, I can't find anything in my CSS, and the admin control panel only lets you put it over or under your category image.

I'm using 1.5.0.

Thanks all!
Danny

[danielosko]

Re:
"How do I position the category name to go over my category image".

Does anyone have any ideas about this? I have around three hundred sub-category button images, and I really don't want to type each category name into my category image.

Here is what a category button looks like with the one title within the image and the one generated by ZebCart below the image:



ANY help would be greatly appreciated.
Danny

[stevesh]

You could probably do it in the stylesheet using absolute positioning, but each image would have to be the same size and in the same position on the page.

[danielosko]

Hi Stevesh,

Thanks for the quick reply. I tried, (for example) something like: position: absolute; top: 1.0em; right: 1.75em;, However, where-ever I place it in the Stylesheet.css file, it has no effect. Any Idea what I should place it under?

Thanks,
Dan

[stevesh]

We'll need a link to the site, then.

[danielosko]

Hi Stevesh,

The site is not live yet, I'm doing on my PC. Any thoughts?

Thanks,
Dan

[stevesh]

Not without seeing what you have, no. We have no way of knowing what template you're using, what changes you've made already, etc. A screenshot doesn't tell us anything. This is the reason I, unlike many here, don't recommend a local installation.

I will say that if you added the absolute positioning in the proper place and nothing happened, I would check to see if the changes actually were added to the stylesheet.

[gjh42]

The standard category listing code does not allow addressing the name separately from the whole individual category item. There is only a link containing an image, a <br /> and text. You could use absolute positioning to move the image down and let the text rise to the top (since the image would no longer be occupying any space in the layout), but this would as stevesh mentioned require the images to all be the same height (or at least, a given maximum height, which all categories would use whether their images needed it or not).

Other than that, you would need to make a small change to the output code in /includes/modules/your_template/category_row.php.
Find this

    $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>'); 

and change to this

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

The relocated and expanded
'<div class="catName">' . $categories->fields['categories_name'] . '</div>' .
puts the name first and lets you address it individually if desired.

[danielosko]

Hello gjh42,

You are the Master! A true Wizard! Thank You!

I applied your code to the /includes/modules/your_template/category_row.php file and insured that all of my category button images were the same dimensions. Then I removed all references to categoryListBoxContents in my stylesheet.css and added the following to my stylesheet.css:

.categoryListBoxContents a {
font-size: 1.0em;
font-weight: bold;
text-shadow: 0 0 10px #000;
}

.categoryListBoxContents {
text-align: center;
padding-bottom: 10px;
float: left;
}

.catName {
position: relative; top: 2.00em;
}


Here is the result:


Thank you again,
Danny