Common FooGallery Custom CSS Customisation Tweaks

FooGallery Documentation

Common FooGallery Custom CSS Customisation Tweaks

1. Center Caption and Description in FooGallery PRO Lightbox

.fg-medium.fg-panel-info-overlay .fg-media-caption {



2. Change font used by caption and description on gallery thumbnail and in FooGallery PRO Lightbox

.foogallery .fg-caption,

.fg-medium.fg-panel-info-overlay .fg-media-caption{

    font-family: “sans-serif”; /**replace with your preferred font**/


3. Change the Hover Icon appearing when a thumbnail is hovered

/* This is used for the default overlays: Light Foreground/Dark Background */

.foogallery.fg-hover-zoom .fg-image-overlay:before,

.foogallery.fg-hover-zoom .fg-caption-inner:before {

background-image: url(‘URL-TO-LIGHT-ICON’) !important;


/* This is used for the light overlays: Dark Foreground/Light Background */

.foogallery.fg-light-overlays.fg-hover-zoom .fg-image-overlay:before,

.foogallery.fg-light-overlays.fg-hover-zoom .fg-caption-inner:before {

background-image: url(‘URL-TO-DARK-ICON’) !important;


4. Change background color of FooGallery PRO Lightbox when image is opened

.fg-panel-area-inner.fg-panel-content-inner { background-color: #f33737; }

5. Change default white background color of Image Viewer template on gallery page to another color

.fg-image-viewer.fg-light .fiv-inner .fiv-ctrls,  .fiv-count, .fiv-prev, .fiv-next, .fiv-inner-container  {

    background-color: #7ab295 !important;

    border-color: #7ab295 !important; }

6. Move Image Viewer controls and pagination from the bottom to the top

#foogallery-gallery-1 .fiv-inner {

    display: inline-flex;

    flex-direction: column-reverse;


#foogallery-gallery-1 .fiv-ctrls,

#foogallery-gallery-1.fg-border-medium .fiv-ctrls,

#foogallery-gallery-1.fg-border-thick .fiv-ctrls,

#foogallery-gallery-1.fg-border-thin .fiv-ctrls {

    border-bottom-width: 1px;


#foogallery-gallery-1.fg-border-thin .fiv-ctrls {

    border-top-width: 4px;


#foogallery-gallery-1.fg-border-medium .fiv-ctrls {

    border-top-width: 10px;


#foogallery-gallery-1.fg-border-thick .fiv-ctrls {

    border-top-width: 16px;


To make this work, you will need to change the ID ( in this case #foogallery-gallery-1) to the one for the specific gallery you are using.

7. Make Masonry gallery template have one column on mobile devices

/* Force single column on screens 480px or smaller */

@media only screen and (max-width: 480px){

.foogallery.fg-masonry .fg-item {

margin: 5px !important;

width: calc(100% – 10px) !important;

min-width: calc(100% – 10px) !important;

max-width: calc(100% – 10px) !important;



8. Change the color of Filter tags/categories

/* when tag is hovered overĀ */

a.fg-tag-link:hover {

    background: blue !important;


.fg-custom .fg-tag-item .fg-tag-link:hover::before {

     border-color: blue !important; 


/* for selected tagĀ */

li.fg-tag-item.fg-selected a.fg-tag-link {

    background: pink !important;


.fg-custom li.fg-tag-item.fg-selected .fg-tag-link::before {

     border-color: pink !important; 


  • Replace colors with your preferred colors