August 02, 2017

Beta: Image Gallery Change Arrow Color and Size

The Image Gallery includes a pop-up gallery for readers to navigate through photos. You can customize the look of the navigational arrows with the Custom CSS feature.

The Image Gallery feature is in Beta. Join the Typepad Beta team to check out all the new features at Account > Summary.

Custom CSS is a feature available with the Unlimited and higher plans. If you do not see the Custom CSS option, you can upgrade at Account > Billing Info > Upgrade/Downgrade. Learn more.

Change Arrow Color

At Design > Custom CSS, enter the below code in the text field, make changes to the color code #000000, and click Save Changes.

.featherlight-next span,
.featherlight-previous span {
color: #000000;
}

For color codes, you can use the w3schools.com HTML Color Picker.

Change Arrow Size

At Design > Custom CSS, enter the below code in the text field, make changes to the font size 20px, and click Save Changes.

.featherlight-next span,
.featherlight-previous span {
font-size: 20px;
}

Change Hover Background Color and Transparency

At Design > Custom CSS, enter the below code in the text field, make changes to the rgba color code 211,211,211, increase or decrease the transparency 0.25, and click Save Changes.

.featherlight-next:hover,
.featherlight-previous:hover {
background: rgba(211,211,211,0.25);
}

For color codes, you can use the w3schools.com HTML Color Picker.

Example

The below code will change the arrow color to black with a light grey hover color and makes it smaller. This combination may be helpful for smaller images.

.featherlight-next:hover,
.featherlight-previous:hover {
background: rgba(211,211,211,0.25);
}

.featherlight-next span,
.featherlight-previous span {
color: #000000;
font-size: 20px;
}

Arrow Edit Example

Updated 03 August 2017

Not quite what you are looking for? Check out these other articles:

  • For information on the features of the compose editor, see the article on the Rich Text toolbar.
  • Tips for improving SEO are available in the SEO Overview article.
  • To create a custom, responsive design, you can use the Design Lab and choose from dozens of fonts for posts and pages.
Search


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services