Featured Blog: Social Embers
Featured Blog: Don't Mess With Taxes

CSS Tips: the new beta Image Gallery

The new beta Image Gallery

In light of our new Image Gallery feature that's currently in Beta, here are some CSS tips to get you started on fitting it to your blog's theme and brand.

Before anything, check out our post on the new Image Gallery, covering the features it now has and how to use them. If you're not already a Beta team member, or aren't sure if you are, you can go to Account > Summary to make your changes. You'll also need to be an Unlimited or higher member to take advantage of the Custom CSS feature.

Note: these CSS changes assume that you will be using the same Image Gallery option setups each time you use the feature. The changes will always be applied. If you do not wish for that to happen, then we recommend placing the CSS inside <style> ... </style> tags in the HTML of the post or page.

Default Styles

Some of the default options are to add multiple images, set to a specific thumbnail size that will display in a grid pattern, and adding a title, description, and border. Those options are all selected and the final default result appears in the screenshot below.

default image gallery styles
The theme chosen for this example is a wide 1-column layout, so you're seeing the 2-thumbnail wide gallery aligned to the left in that space.

 

Before we get into the CSS tips, here is a breakdown of the CSS IDs and Classes used for the gallery:

#featherlight-gallery
    fieldset (fieldset.border)
          legend (legend.border)
      .featherlight-gallery
      #gallery-container
          ul.asset-thumbnails
              li.asset-thumbnail
                a

The offsetting shows which IDs and Classes are parents and children, in case you need to make further customizations than what will be done in the example below.

Width and Position

The first change we'll make is to tell the gallery we want it to take up more horizontal space and to always be positioned in the center of the post. Due to the fact that the example uses a wide 1-column theme, we can make use of the empty space the default gallery leaves to the right. To do that, we would use the following CSS:

/* IMAGE GALLERY - WIDTH & POSITION */
#featherlight-gallery, #featherlight-gallery fieldset { width: 90% !important; /* width of gallery */ margin: 0 auto; /* auto margin to center */ }

The above code sets the gallery width to be near 90% (you may need to make it wider or narrower, depending on your blog's width), so it can then have room to be positioned center to any other content you have in the post or page. Here's what that would then look like:

wider centered gallery
CSS for wider gallery and center positioning is applied.

Title and Description

While the default style works well with the new width, we're going to walk you through how to adjust the font and background color of the gallery title, then the positioning of the description.

Considering the color scheme the design we used has, the title may stand out more with a background color. It's also on the small size, so we'll want to make that a tad bigger. Having it automatically capitalized could look nice as well, so we'll go ahead and make that change too.

/* IMAGE GALLERY - TITLE */
#featherlight-gallery legend { font-size: 125%; /* increase font size */ background-color: #ea9f8f; /* change background color */ text-transform: uppercase; /* transform text to all uppercase */ }

With the color and size changes, it may seem too cramped inside the border of the title. We'll add some space to make that look better by adjusting the margin and padding.

/* IMAGE GALLERY - TITLE */
#featherlight-gallery legend { font-size: 125%; /* increase font size */ background-color: #ea9f8f; /* change background color */ text-transform: uppercase; /* transform text to all uppercase */ margin: 0 15px; /* adjust margin to have 15px space on left-right */ padding: 10px 20px; /* add padding to give text breathing room */ }

The description appears a little close to the bottom of the title, so to fix that, we can use the following:

/* IMAGE GALLERY - DESCRIPTION */
.featherlight-gallery { padding: 15px 0 10px; /* increase padding above and below description */ }

Note: some of these font style changes can be done in the editor but, again, we're assuming you want these style changes to be applied to all instances of the image gallery when it's used. If not, just make individual stylistic changes in the compose editor after inserting the gallery images.

Here is what the above changes would look like on the published blog:

Title and Description changes are applied
CSS for title and descriptions changes are applied

Opacity

The final change we'll make will be to change the opacity of the linked images so that they only show their full opacity when hovered on. This allows viewers to focus on a specific image before clicking to see it larger. Here's the CSS to do that:

/* IMAGE GALLERY - DIM IMAGE OPACITY */
#gallery-container ul li a { 
    opacity: 0.5;  /* set linked image to half opacity by default */
    }

/* IMAGE GALLERY - FULL IMAGE OPACITY */
#gallery-container ul li a:hover { 
    opacity: 1;  /* return full opacity on hover */
    }

The first set of code tells the linked image to appear at half opacity, so that it's dimmed by 50%. The second set of code tells it to return to 100% opacity when it's being hovered over. This is what that looks like in the published blog:

Image Gallery OpacityAnd that's it for today's CSS tips! If there's something we didn't cover in this particular article, and you're wondering if it's possible, feel free to leave a comment or open a help ticket at Help > New Ticket. We're always ready to help!

comments powered by Disqus