Images: Remove Theme border & styling on specific images
Xtreme lets you set a border and or shadow for all images.
Customizer: Images > Global Image Settings
Legacy Admin: Main Options > Content Areas > Images
Sometimes, you may want a way to remove that styling on some specific images within your content or even the Theme elements.
This is how to proceed.
First, create a class(like noborder) that removes all border/shadow styling, by adding the rule below to the Global Custom Custom CSS Rule Box
.noborder { background-color:transparent !important; border: none !important; -moz-box-shadow:none !important;-webkit-box-shadow:none !important;box-shadow:none !important; padding:0 !important; }
Then simply add that class to any image that should not have the border.
To do that, Switch your content editor to text mode, and add the class to the Image tag class attribute (in yellow).
If the image tag does not have a class attribute add one.
For example if your image tag looked like
<
img class="class1 class2" .../>
make it
<
img class="noborder class1 class2".../>
If you want to remove the border/shadow on images you have no acces to, like the Theme showhide icons or others, you need to inspect your page with your browser developer tools to find the selector that can target them and add it to the rule.
For example, to target the showhide icons you would selectors are img[alt=show], img[alt=hide], so you would add these selectors to the initial rule, making it
.noborder, img[alt=show], img[alt=hide] { background-color:transparent !important; border: none !important; -moz-box-shadow:none !important;-webkit-box-shadow:none !important;box-shadow:none !important; padding:0 !important; }
Instead of removing the Theme image styling, you can use that same method to simply change the style of specific images