Archived topic
Custom class to image
5 replies · Started by Henk on April 29, 2021
Hi,
I want to add the following custom class to one of my images:
img {
padding: 10px;
border: 4px solid #ffffff;
background-color:#F0F5F9;
}
The problem is, this is only working when I use IMG. But when I add a custom class (because I want it to be applied on one image only) it's not working. Under advanced --> Additional CSS class(es) I have added my custom class. But then the custom class is applied to the container, and not to the image.
What am I doing wrong?
Hi there,
img is the elements tag - so it will apply to all images.
Instead you would create your own custom class eg.
.img-has-border {
padding: 10px;
border: 4px solid #ffffff;
background-color:#F0F5F9;
}Then add the Additional CSS Class to your block of: img-has-border
Hi David,
That is the problem, that does not work. When I do that, I get a border around my div instead of around my image.
I now have: is-style-rounded img-has-border
- is-style-rounded for the round image
- img-has-border for the border
See my website adress in the private information field.
Update your CSS to this:
.img-has-border img {
padding: 10px;
border: 4px solid #ffffff;
background-color:#F0F5F9;
}This will target the img that is inside the <div class="img-has-border">
Thanks David!
You're welcome
