CSS - Styling Phoca Gallery


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:


components/com_phocagallery/assets/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 */


Phoca News Gadget

Phoca Facebook Phoca on Facebook:
Phoca Twitter Phoca on Twitter:
Phoca - Follow us on Twitter
Phoca Google Plus Phoca on Google+:
Phoca - Follow us on Google Plus
Phoca YouTube Phoca on YouTube:
Phoca on YouTube
Phoca Pinterest Phoca on Pinterest:
Phoca on Pinterest
Phoca News Phoca News:
Phoca News RSS
Phoca Latest Files Phoca Latest Files:
Phoca News RSS

Phoca Forum - Latest Topics