Customizing HubSpot's Photo Gallery Module

This post will focus on customizing HubSpot's new photo gallery module to utilize a white background, rather than the default black background. Generally, the white background will blend better with lighter colored websites, where as the default black background is better suited for darker websites or when a more dramatic effect is desired.

To start, first download the following image file updated for use on a white background (classic-map.png).

Next, click on Settings in the top right hand corner of the HubSpot menu bar and then click on File Manager. Upload the image file from above into your images folder or another of your choosing. I've uploaded mine into a folder called 'template.'

Once in File Manager open up the custom.css file. If there isn't a custom.css file in your File Manager you can create one by clicking on Site Home and then choosing the 'New File' menu option, making sure to name the file exactly custom.css.

In your css file, insert the following code:

div.galleria-container {background-color:#fff!important;}

div.galleria-loader {background:#fff url(/Portals/xxxxx/template/classic-loader.gif) no-repeat;}

div.galleria-thumb-nav-left,
div.galleria-thumb-nav-right,
div.galleria-info-link,
div.galleria-info-close,
div.galleria-image-nav-left,
div.galleria-image-nav-right {
background-image:url(/Portals/xxxxx/template/classic-map.png);
background-repeat:no-repeat;
}

div.galleria-counter {color:#000;}

div.galleria-info-text {}
div..galleria-info-title {}

div.galleria-stage img {padding:0!important; border:0 none!important;}
div.galleria-thumbnails div.galleria-image img {padding:0!important; border:0 none!important;}

div.galleria-thumb-nav-left:hover,
div.galleria-thumb-nav-right:hover {
background-color:#fff;
}

div.galleria-info-link {background-color:#fff;}

Make sure to replace 'xxxxx' with your unique Portal ID number and double check that the path to your image is correct. Your Portal ID number can be found in the footer of your HubSpot dashboard.

The final product should look like the following example: