overriding parent css

kitchup
(@kitchup)

11 years, 7 months ago

Hi,
I created a child theme called Simone Child by creating a new folder within the theme. Then I created a new style.css and have the following:

/*
Theme Name: Simone Child
Description: Simone Child Theme
Author: K T
Template: simone
Version: 1.0.0
Tags: responsive-layout, accessibility-ready
*/

@import url(“../simone/style.css”);

/* =Theme customization starts here
————————————————————– */

I then add my styles below that. For example, I’ve made some css change on the title-box class, I then view the code in Firebug. Realized my css is before the parent for some reason? So it’s keeps overriding mine.

Please kindly shed me some light on this? Greatly appreciated.

Thanks.

Viewing 8 replies - 1 through 8 (of 8 total)

stephencottontail
(@stephencottontail)

11 years, 7 months ago

Can you post a link to your site?

Thread Starter kitchup
(@kitchup)

11 years, 7 months ago

http://s1076174.instanturl.net/

So any custom ones will load just fine but existing class in Parent will not be override.

Thanks in advance!

stephencottontail
(@stephencottontail)

11 years, 7 months ago

It seems to be working fine. Can you post a specific CSS rule that isn’t working correctly?

Thread Starter kitchup
(@kitchup)

11 years, 7 months ago

Hi Stephen,

.entry-content for example, i made it width: 108rem but it got override.

Under Firebug, you will see .title-box is rendering twice, first mine, so it will take the property like background-color, positioning, text-align, etc. But then right after, it will render again and it will do the border and padding which I DO NOT want any of them.

Thanks.

Thread Starter kitchup
(@kitchup)

11 years, 7 months ago

And as I was thinking, for the style that was declare on the Parent that I don’t want, would I have to do something like:

padding: initial;
border: initial;

To get rid of them?

But what happen to .entry-content? Why does it get override?
stephencottontail
(@stephencottontail)

11 years, 7 months ago
For your .title-box, you would have to explicitly override the border and padding with something like this:
```
.title-box {
line-height: 130%;
position: absolute;
right: 0;
text-align: right;
top: 20px;
background-color: red;
border: none;
padding: 5px;
}
```
And as for .entry-content, the max-width on that is set in another stylesheet, content-sidebar.css, that’s loaded after your child theme’s stylesheet. A dirty fix would be to use !important:
```
.entry-content {
max-width:108rem !important;
}
```
Thread Starter kitchup
(@kitchup)

11 years, 7 months ago

Any other solution than !important? I really wouldn’t want to unless it’s impossible.
And thanks for your previous response.
stephencottontail
(@stephencottontail)

11 years, 7 months ago
Try something like:
```
article .entry-content{
max-width:108rem;
}
```
That would give you more specificity.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘overriding parent css’ is closed to new replies.

Tags