Released Amazing Template for Phoca Cart
Learn More ...

CSS - Styling Phoca Gallery

Category: Phoca Gallery Component

CSS - Styling Phoca Gallery

Phoca Gallery design may be changed by parameters or by CSS. This guide describes some tips how to change design of Phoca Gallery with help of CSS. You can customize your template CSS or directly Phoca Gallery CSS files:


media/com_phocagallery/css/custom/phocagallerycustom.css (in case you are using custom CSS for your gallery)


1. Hide number of images in category in Categories View

Numbers (count of images in category) may be hidden by CSS, just paste following code to your CSS file: table tr td .small, #phocagallery-categories-detail .pg-cats-name.small .small{

2. Displaying detail icon over thumbnail (not below thumbnails like it is displayed as default)

Icons (for example - detail icon) may be displayed over thumbnails if they are stylized so - see example: Phoca Wallpapers page.
#phocagallery .detail {
    bottom: 52px; /*Use own settings - depends on used items below the thumbnails */
    margin: 0;
    padding: 0;
    position: absolute;
    right: 18px; /*Use own settings */


Powered by Phoca