Changing Gallery Forward/Backward arrows in Portfolio

[VaporDave]

Hi,

Currently the slideshow option in Portfolio (when selecting the Gallery option) has the forward and backwards arrows as “><” icons in white, with a slight drop shadow, as seen here:

https://vaportours.com/portfolio-item/528hz-gardens/

I don’t know which stack this is the default in, no way to tell from looking around, perhaps they appear different in different stacks? If so, is it possible to set different stack for Portfolio items? If not, see below.

Problem is, those arrows are practically invisible against a white background (which some images in a gallery slideshow will inevitably have, such as product shots on a white background as seen in url above).

This makes it unintuitive for the user to know there are more images to be seen, and to potentially miss seeing the majority of the content for a Portfolio Item. Is there a way to add small rectangles behind the arrows so they’re more obvious?

Thanks,
Dave

[prakash_s]

Hello Dave,

Thanks for writing to us.

To add the background in the arrow you need to add this custom CSS under X/Pro--->Theme Option --->CSS

.flex-direction-nav a {
    width: 40px;
    height: 40px;  
    line-height: 40px;  
    background: #000000;
}

Please feel free to change the colour code of the background as per your design.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[VaporDave]

Hi, thanks. Am I just adding that at the end of the CSS here (see attached)?

[ruenel]

Hey David,

You can add the code at the bottom in line 62.

Best Regards.