Phoca Extensions
Free extensions for Joomla! CMS

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:

components/com_phocagallery/assets/phocagallery.css

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:

 

#phocagallery.pg-categories-view table tr td .small,
#phocagallery.pg-categories-view #phocagallery-categories-detail .pg-cats-name.small .small{
    display:none;
}
 
 

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 Forum - Latest Topics