Categories Listed page, images too high / misaligned

[vthomas]

I hope to provide a solution to others with the issue of the images in the categories display page misaligned, and too high. This is the same as problem #1 stated in this post:
viewtopic.php?f=1&t=7246&hilit=categori ... e+too+high

I am using a rocketheme template (crystalline), and noticed that this issue resolved when I switched to a joomla install template, so I know it was a conflict with my template css.

Therefore, I edited one of the phocagallery files to add a class to the table (in my case, phocagallery parameters are set for this), so that I had a means to apply css just to the instance of that categories list page.

Here is the file to edit:
components/com_phocagallery/views/categories/tmpl/default.php

Starting on line 63, you will see this code:
// -------------------
// TABLE LAYOUT
// -------------------
if ($this->tmpl['displayimagecategories'] == 1) {
for ($i = 0; $i < $countCategories; $i++) {
if ( $columns == 1 ) {
echo '<table">';

Edit that last line to add your class:
// -------------------
// TABLE LAYOUT
// -------------------
if ($this->tmpl['displayimagecategories'] == 1) {
for ($i = 0; $i < $countCategories; $i++) {
if ( $columns == 1 ) {
echo '<table class="classname">';

When you reload your menu page that shows all categories, you should see this new class added in the source code.

Now, open the css file for phocagallery, located here:
components/com_phocagallery/assets/phocagallery.css

Then, add your new css, using whatever styling works for you. Here is what I added:
#phocagallery .classname a img {margin: 9px 0 0 0;}

I hope this is helpful to those of you with similar issues!

Regards, Vicky

[Jan]

Hi, great, thank you for this guide.

Jan