August 02, 2017

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.

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