Phoca Forum

I have a "list of images (Category View)". Unfortunately when showing the "Categories above Images"the icon is not centered. This problem exists for all my categories and also for the "back" button. The problem is that the icon/image starts at the top (or even outside the top) of the border. Can I adjust this somewhere?

Hi, then you should change it in CSS - to center image above the name.

Jan

yes, thanks for the hint. but I'm rather surprised why this is necessary. because when I have a look an these page there it seems to work out of the box:

https://www.phoca.cz/demo/gallery-categories

in my case the picture that should be centered within the shadow is some pixel outside on top of the shadow.

is it really necessary to adapt the css?

Hi, if you will change it without CSS styling, then there is no need to change the CSS,

I had a similar problem with the thumbnails not centered vertically on the shadow background in Category list. When I switched to one of the standard Joomla templates the problem went away so I knew it was related to my template.

I am no expert at CSS but started using the chrome browser "Inspect Element" option to find out why the image was shifted vertically and also why the text link to the right of it was not centrally aligned. After some frustration I finally found that my template CSS had a statement in the first line which was causing the mis-alignment with Phoca Gallery thumbnails in Category List. Once this code was removed from the first line of my template CSS file and the cache cleared, everything was golden with Phoca. I have not found any problems elsewhere in my site after removing this code.
The template I use is a modified version of RocketTheme Afterburner if that helps anyone else with the same problem.

Phoca Gallery really rocks. Keep up the good work.

I think I have to describe my problem once again. I have the same problem that is mentioned here:

viewtopic.php?f=1&t=20502

And now I also can provide an example: http://tinyurl.com/cdotblj

And the problem seems to be caused from the template I used. With the template Beez2 everything is fine.

So could you please tell me what I need to configure in the CSS (or maybe in the options) to center the image.



Thanks for you help!

I had exactly the same problem with my template (Rocket Theme: Afterburner) and managed to solve the problem earlier this week.
In your template "templates/lightbreeze-yellow/css/template.css" there is an entry on line 36:

vertical-align: baseline;

If you remove, or comment out this statement your icons will magically center. It may have other knock-on effects with other elements on your site, but that is another subject.

I tried to post this solution earlier in the week but my posting never appeared. I have my fingers crossed that this post appears and is helpful to you and others with the same issue.

Pabloboyo

hey Pabloboyo, thanks a lot! your "hack" solved my problem.

thx!