Styling Images Independently

If styling the image using the wp-image-xx CSS class related to the image is not working this is likely an issue with your theme or possibly a caching issue. I’d suggest adding the !important tag to the CSS for the image and if it still does not take the styling then provide a link so that we can try to better help you or at least get you the correct support from your theme developer. Also, without a link to the site in question it will be hard to provide suggestions.

Good day Davood,

We tried clearing caches and also adding the specificity to the css that we added and still was not working.

We inclusively added the Catch ID plugin to help us out identifying the images separetely but it didn’t work either.

We asked the theme developer, but unfortunately we couldn’t get an answer for this issue.

The link is https://www.momentosvivos.com

In advance, thank you for your help and interest.

Are you adding the CSS code under
Appearance → Customize → Additional CSS?

Yes we are.

Would you share you CSS code with me? It might help me to better guide you!

Also, based on some tests I ran on your site I can see you are using at least one caching plugin Autoptimize … I have a feeling that this plugin is causing you issues. Try disabling it and seeing if your custom CSS is being picked up. If you are using any other Caching plugins or CDN services I’d disable them as well.

We disable the plugins that you suggested but the issue still persists. We don’t have an issue adding the border or changing the shape of it. Our problem is being able to style the images separately. The code that we tried so far was the following:

.wp-image-ID {
code in css
}

#wp-image-ID {
code in css
}

#img-ID {
code in css
}

.feature-box.wp-image-ID {
code in css
}

.feature-box .card. wp-image-ID {
code in css
}

Thank you for your help and interest.

pro-tip; you can disable Autoptimize on a per-request basis by adding ?ao_noptimize=1 to the URL.

if the problem is not there at that point, some autoptimize (re-)configuration might be needed to fix this. there are troubleshooting tips and info on how to exclude in the AO FAQ.

hope this helps debugging,
frank (ao dev)

Hello to all from Toronto;
Techinacally, this is not an answer to the question, but may be an option.
As I am totally unfamiliar with coding, I import previously edited image (with Photoshop or any other editor) into the library. That image may include text, transparency and other features as well.
Assuming that you can handle photo editor, it may be simpler option to achieve wanted effect.
Have a great day ?

Hello Frank,

Thank you for the note. We tried again and disabled your plugin to see if this was affecting our work but it seems that it didn’t. Normally we can add the code after checking the changes through the ispector.

How can we share our configuration so that you can provide advice to the changes?

Hello Davor0305,

We thought of this option, but we want it to be our last resource. Thank you for sharing.

Thank you for your help and interest.

@copiaurbietorbi – I need to see the actual CSS. Saying “Code in css” does not allow me to help you, I need to see the actual code you are trying to implement.

Okie Dokie.

The css code for the image class combinations in some cases is:

.wp-image-xx {
border: 10px solid red;
border-radius: 50%;
}

In others, only using the border style.

As we mentioned before, we tried adding the specificity also, but it didn’t work.

Thank you for your help and interest.

.wp-image-xx {
border: 10px solid red !important;
border-radius: 50% !important;
}

So you tried this and replaced xx with the actual number of the image? Also, would you tell me which image you did it with so I can look at it directly on your site?

Hello Davood,

Yes we did. We tried all the images in the services section.

I would suggest contacting your themes developers for further assistance…. it looks like the css is at least partially taking on my end but you are using a premium theme Hestia Pro so you need to contact the developers to see what the custom CSS is not being used. My guess is they have some caching features built into the theme that you need to disable or something along those lines. You can contact them here: https://themeisle.com/contact/

Here is what I am seeing and it looks like the CSS is working…. https://imgur.com/a/rmHqHAp, if that is not what you intend for it to look like proceed to contact the theme developer at the link above. If that is what you intend for it to look like but it is not what you are seeing you then you probably need to clear your browser cache. If clearing your browser cache is not working this means there is a problem with your sites caching and/or CDN settings.

Unfortunately, though, we will not be able to help you here because you are using a premium theme and we are only here to provide support for themes and plugins that are provided here on wp.org.