CSS border width edit

Resolved harveyl12
(@harveyl12)

9 years, 1 month ago

I need some help with the plugin ‘variation swatches’ https://en-gb.ww.wp.xz.cn/plugins/variation-swatches-for-woocommerce/

I have managed to change the front end CSS code so I can change the colour of the white border to green but I am trying to make the border width thicker… I can make the drop showdow thicker but not the actual coloured border. Can you please help.

Website is http://www.camerabeanbags.com/test

Viewing 11 replies - 1 through 11 (of 11 total)

Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

9 years, 1 month ago

I get a DNS error trying to reach www.camerabeanbags.com

Thread Starter harveyl12
(@harveyl12)

9 years, 1 month ago

It’s camerabeanbags.co.uk/test sorry
Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

9 years, 1 month ago
```
.tawcvs-swatches .swatch.selected {
    border-style: solid;
    border-width: 2px;
    border-color: green;
}
```
View post on imgur.com

To add CSS: If you are using WordPress 4.7, use the “Custom CSS” option in the customizer. If your theme has a custom CSS option, use that to add the CSS shown above. If not, install the plugin Simple Custom CSS. Or, if you have Jetpack installed, enable its Custom CSS module.

Learn to use the Chrome Developer Tools to help you see and test changes to your CSS.
Thread Starter harveyl12
(@harveyl12)

9 years, 1 month ago

Thanks you for that I will give it a test.

Thanks for the tips as I am still learning CSS and web code etc. So it is appreciated. I will try and add it to the CSS file I have and if I can’t figure it out then I will add it to the additional CSS. I will also attach the CSS file when I get home and remember to do it 🙂

Thanks

Thread Starter harveyl12
(@harveyl12)

9 years, 1 month ago

Works fine by adding the line of code in the CSS file.

Thanks for the help

Thread Starter harveyl12
(@harveyl12)

9 years, 1 month ago

Would you know how to get rid of the small thin white border before the green border starts? I have tried messing with the chrome dev tools changing everything and i cant seem to remove it?
Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

9 years, 1 month ago
```
.tawcvs-swatches .swatch.selected {
    border-style: solid;
    border-width: 2px;
    border-color: green;
    box-shadow: initial;
    -webkit-box-shadow: initial;
}
```
Thread Starter harveyl12
(@harveyl12)

9 years, 1 month ago

I will give this a try and let you know 🙂
Thread Starter harveyl12
(@harveyl12)

9 years, 1 month ago
Hi,

Adding this code doesn’t remove the white border for me that you can see here around the swatch but before the green border. https://postimg.org/image/5mysm2z8p/

Thanks,

Harvey
- This reply was modified 9 years, 1 month ago by Steven Stern (sterndata).
Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

9 years, 1 month ago

I don’t see the changes above on your site.

Thread Starter harveyl12
(@harveyl12)

9 years, 1 month ago

Please have a look now. I tested this locally but have now changed on live test site http://camerabeanbags.co.uk/test/

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘CSS border width edit’ is closed to new replies.

CSS border width edit

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics