[thobriParticipant]

Hi there.

I’m struggeling to remove the borders around both main img and thumbs-imgs on a productpage. In fact I would like the shop to look like the shop in the Icon-demo. But even if I replace the style.css with all code from the icon.css it still looks 99% like integrity.

1. Is there an easy fix to to border and hover regarding the images in the product-page?

2. How can I easily change my shop to look more like icon – minimalistic and without too many borders and hover etc.?

[thobriParticipant]

This reply has been marked as private.

[thobriParticipant]

I’m using WP 4.1
Woocommerce: 2.3.3

Thanks…

/t

[ThaiModerator]

Hi There,
Thanks for writing in!
Try adding following CSS under Appearance > Customize > Custom > CSS:

.single-product a.x-img-thumbnail:hover {
border: none !important;
}

Hope it helps.

[thobriParticipant]

Thanks for the reply.

However, it does not help.

Also – is the !important; needed also if I write in style.css in childtheme?

If you take a look on the shop – and choose a single product, you will see both a frame around the image (not really a img-border I think) – which changes to red by hover…
I want to get rid of this “frame” or border – but have tried almost everything I can think of.

Also, is there somewhere where I can find all the css-values for integrity that can be modified?

I have tried to pasta the icon.css into my style.css in childtheme – but it is very little that get’s changed. I’m surprised by this and have the feeling that my style.css in childtheme get’s overwritten somewhere….???

Thank you.

Kind regards

[ZeshanMember]

Hi there,

Thanks for writing in!

You can use following CSS instead:

body.single-product a.x-img-thumbnail {
    border: none;
}

The integrity default CSS file can be found under /wp-content/themes/x/framework/css/site/stacks/integrity-light.css, however, it is advisable that you don’t make any changes to the core theme files. In regards to the child theme CSS, so make sure to add a body or html selector before every CSS rule so that it takes priority over default theme CSS, e.g.,

body .entry-content {
   background-color: red;
}

Cheers!

[thobriParticipant]

Thanks – it helps a bit..
However, there is still some kind of “glow” around the images, both main image and thumbs.

Also – is there a way to download the demo-content .css files (integrity and icon) without installing the demo-content? I am afraid to overwrite my files – and I accidental reset my .json file today and have lost all my styling.

Thanks again for your help.

Regards

[Paul RModerator]

Hi,

To remove the glow, you can add this under Custom > CSS in the Customizer.

body .woocommerce .related ul.products li.product,
body .woocommerce-page .related ul.products li.product,
body .woocommerce li.product, .woocommerce-page li.product {
      box-shadow:none;
}

With regards to demo content, it does not have a css file.
In case you have overwritten your core css files, you can download again the theme at your themeforest download page
and you can get the css files at wp-content/themes/x/framework/css/site/stacks

For more info on demo content please see -https://theme.co/x/member/demo-content/

Hope that helps.

[thobriParticipant]

Thanks for the feedback.

The glow is still there though…

It’s a hard one to kill I guess!

Any more suggestions?

Now it is getting a matter of princip!

Thanks.

[RadModerator]

Hi there,

Would you mins showing screenshot showing these glowing edges?

For the meantime, please try this :

.woocommerce .upsells ul.products li.product, .woocommerce .related ul.products li.product, .woocommerce .cross-sells ul.products li.product, .woocommerce-page .upsells ul.products li.product, .woocommerce-page .related ul.products li.product, .woocommerce-page .cross-sells ul.products li.product, .x-img-thumbnail {
box-shadow: none !important;
}

Thanks!

[thobriParticipant]

Hey

Great – the last one finally killed it.

box-shadow – aha.

Is there a list/overview somewhere where one can see all these different names/attributes that is possible to adjust via css?
It would be great to all of us without css-expert-knowledge…

However, thanks so much for your help.

Regards

[NicoModerator]

Hi There,

Developers usually use inspect elements in your browser.

In chrome, you press right click in a site where you want to check the html code then inspect element and it will show the sites html code.

Firefox and IE has also ways to inspect element.

Hope it helps.

Thanks.

[Author]

Posts