Disclaimer: This guide is for those using a version of FooGallery that is below version 3.0.0. For those using FooGallery 3.0.0 and above, go to this guide.
1. Center Caption and Description in FooGallery PRO Lightbox
.fg-medium.fg-panel-info-overlay .fg-media-caption {
text-align:center;
}
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
