Product Image Background/Size and Meta Slider Icon Colors

[charo]

Hello,

I would like your help with a few minor things.

1. My product images have a transparent background.  I would like to have a grey background on the images, both thumbnails and in the product preview.  Is there a way to make a global change so the back ground of all product images are the same without manually changing each photo?  I have worked around this by making the entire background a grey, but I would still like to know how to do it if it’s an option.

2. My product images come a certain size, but they get cut off in the home page product thumbnails.  Is there a way to make a global change to make all the product images show at a certain percent smaller? Let’s say 90% so they don’t get cut off?

3. The buttons on the Meta Slider: I would like the buttons to be yellow, but the border of the buttons is white and you cannot see the arrows against the yellow.  Is there a way to change the accent color of the icons and wording on the Meta Slider to black instead of white?

I may have some other questions as I continue to build the site. Thanks in advance for your help!  🙂

• This topic was modified 7 years, 7 months ago by Harry.

[Harry]

Hi,

1. You can add default grey background for all of your product by add custom css in JanStudio > Theme Option > General Layout > Custom CSS

.product-image.pr, .single-product-thumbnail .p-item,  .p-nav img { background: #d2d2d2; }

Change #d2d2d2 with your color

2. I saw your product images are square, i help you  changed config of images dimension in WooCommerce > Settings > Product > Display > Product Image

I changed to square and regenerate thumbnail at Tools > Regenerate.

3. You can change button to yellow with border white and color on slider by add custom css in JanStudio > Theme Option > General Layout > Custom CSS

a.button-o-w { background: #dd8500;}

.metaslider .flexslider .caption-wrap h2, .metaslider .flexslider .caption-wrap h3, .metaslider .flexslider .caption-wrap h4 {color: #000;}

.flex-prev::before, .flex-next::before { color: #000;}

Best regards

 

 

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[charo]

Thanks so much!  Incredibly helpful!

[Author]

Posts