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;
}
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.