How do I to add a css class on wordpress?

user_1483084 0
Viewed 178

I am trying to add a class on wordpress to round images, but I don't know how could I do this. I've already added on style.css but it still doesn´t works. I'm using the Hueman Theme and I've trying to follow this sample.

How could I do this ?

style.css in Apperance>Editor>style.css 

.circular-image img {
               width: 300px;
               height: 300px;
               -webkit-border-radius: 150px;
               -moz-border-radius: 150px;
               -ms-border-radius: 150px;
               -o-border-radius: 150px;
               border-radius: 150px;
}

Using

<div class="circular-image" style="text-align: center;"><img class=" aligncenter wp-image-119 size-thumbnail" src="http://ideiadinamica.com/wp-content/uploads/2018/09/10372571_10200376805178580_8449416293546333562_n-150x150.jpg" alt="" width="150" height="150" /></div>
wordpress css
4 Answers

Wp-admin > appearance > customise then in the "additional css" section, add your code

user_68137990

I would suggest making a child theme so that you don't have to modify any of your theme's files(which would be overwritten if the author ever updates the theme).

Essentially you just have to create a new folder with the same name as your current theme's folder with -child appended to the end of the folder name(or anything really, but this just keeps things clean).

From there you would add a style.css to the child folder with the following code added at the top so that Wordpress knows it's a child theme:

/*
 Theme Name:   Hueman Child
 Description:  Hueman Child Theme
 Template:     hueman
 Version:      1.0.0
*/

Make sure the Template: line matches the template name of the parent theme(you can check this by opening the parent theme's style.css). Then you can add any overriding styles you want to that style.css file as well. Because the child theme's style.css will be loaded last, it will override the theme's default styling(provided they aren't using !important in which case you would have to use !important as well).

Once your child theme has been configured, just activate it in the Appearance section of the admin panel.

user_28274070

You can try doing below, which I did long time ago. Hope that might work for you:

Install WP Image Borders Plugin. Go to settings >> WP Image Borders and then add specific CSS class (if you have built up any) or

Go to particular page where you want to edit that image, click on Image, and under edit section; go to advance options and add your css class to Image CSS Class

user_97083660

Wordpress themes usually block additional styles. To know if your style is being blocked, right-click on your element to open the inspector and look for the styles that may be overriden your class. When you find them you can just add "!important" to your styles to force them to be applied.

class styles being blocked by element styles

This is how you force the styles:

.circular-image img {
           width: 300px !important;
           height: 300px; !important }
user_93526700
Related