How do I to add a css class on wordpress?

Question

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>

Have you cleared your cache?

Marwelln
– Marwelln

2018-09-14 15:32:14 +00:00
Commented Sep 14, 2018 at 15:32 — Marwelln
– Marwelln, Commented Sep 14, 2018 at 15:32

trainmania100 · Accepted Answer · 2018-09-14 15:41:44Z

5

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

edited Sep 14, 2018 at 15:41

answered Sep 14, 2018 at 15:32

trainmania100

4113 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

APAD1 · Accepted Answer · 2018-09-14 17:06:56Z

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.

parth patel · Accepted Answer · 2018-09-14 15:46:29Z

-3

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

answered Sep 14, 2018 at 15:46

parth patel

1

Comments

Brenda Alicia · Accepted Answer · 2018-09-14 16:25:03Z

-3

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 }

answered Sep 14, 2018 at 16:25

Brenda Alicia

11 silver badge1 bronze badge

3 Comments

APAD1 Over a year ago

Wordpress themes usually block additional styles. This is only true if you add the custom CSS the wrong way. There's no reason to use !important here, and in general, it should be avoided at all costs.

Brenda Alicia Over a year ago

@APAD1 I only give him an option, you already post an answer, which is very good. But some times a quick fix can be a good option(depends the type of project), I don't know if this is the case but I'm just trying to help.

APAD1 Over a year ago

A quick fix can be a good option, as long as it follows best practices, which using !important does not. The best practices quick fix here would be @trainmania100's suggestion of adding the custom CSS in the Wordpress backend.

Collectives™ on Stack Overflow

How do I to add a css class on wordpress?

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related