Displaying Icons over Thumbnail

[tiptobi]

Hello,
The only icon which I display in my gallery is the download icon. Unfortunately, the height of background image (shadow) grows as soon as I activate the download icon and it also looks very bad to show only one small icon below the image.

What I want to reach, is that the Icon is over the Thumbnail as described in the Phoca documentation https://www.phoca.cz/documents/2-phoca-g ... ca-gallery and that the background-image doesn't grow in height as soon as I activate the download icon.

However it seems to be an older version of Phoca Gallery in this documentation-article as it doesn't work with my newest version of phoca. What I want to reach is a styling like in the wallpaper page: https://www.phoca.cz/wallpapers/category/13-barcelona
I tried to copy the CSS-Properties from Firebug to my Gallery but it didn't work as the structure of the HTML seems to be different.

Any proposals how to reach this? I use Joomla 3.2 and Phoca Gallery 4.1. I've got some skills in PHP, CSS & HTML.

[Jan]

Hi, if you run the newest Phoca Gallery and you want to display the buttons like on Joomla! 2.5 (wallpapers demo), the only one solution is to copy the css and find the differences between new and old class names

Jan

[tiptobi]

Ok, thank you very much for your fast answer although i hoped there's another solution^^

Does anyone know in which file (i think php-file) the category-view-HTML-Code is written? I have the css but where do i have to change the HTML-Code?
I need to do this, because some css-properties are defined inline...

[tiptobi]

I found the needed files. If anyone else need it, they are in:
[JOOMLA]/components/com_phocagallery/views/category/view.html.php (Line 1939 is the height of the background-image set).
and
[JOOMLA]/components/com_phocagallery/views/category/tmp/default.php_images.php (Line 31 is the HTML-Code generated).

I'll work at a nice solution and will post it, if i have one.

[Jan]

Ok

[tiptobi]

I got it =)
I'll not describe every detail what I did, just where to customize which things:
In Phoca -> Themes -> Default.css : I customized the pg-icon-detail-class (the container which contains the icons). Maybe you need other numbers in margin-top and padding in your gallery...

Code: Select all

.pg-icon-detail {
	text-align:right;
	margin-top: -25px;
  	padding: 0 3px 0 0;
}

In [JOOMLA]/administrator/components/com_phocagallery/libraries/phocagallery/image/image.php on line 115, there is the function setBoxSize which calculates the width and height of the border / backgroundimage. With some php-skills, it's easy to customize it. I commented out the lines 160-204 (avoids that the icon-detail-container resizes the background-image).

In [JOOMLA]/components/com_phocagallery/views/category/tmpl/default_images.php I moved the whole part, where the div-container "pg-icon-detail" (including the if-part at the beginning) is constructed to line 133. (Not sure if this is needed. I did it before I customized the css...)

At the end, I replaced the download-icon at media/com_phocagallery/images/icon-download.png with another icon.

My gallery looks now exactly as desired =)

[Jan]

Great to hear it and thank you for the guide.

Jan