[ficklefishParticipant]

Thanks for this great theme!
I’ve created a child theme from the ones you provide: the renew child theme.
When I add rules to the style.css within this child theme they don’t override the main style.css of the Xtheme.

/*

Theme Name: Child theme
Theme URI: http://theme.co
Author: Theme.co
Author URI: http://www.ficklefish.nl
Description: Theme for Client 
Version: 1.0.0
Template: x

*/

@import url( '../x/framework/css/site/stacks/renew.css' );

.x-recent-posts a.x-recent-post4 {
width: 25%;}

When I use !important it does work, which ofcourse I like to avoid. Any ideas? Thanks

[CousettMember]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have have provided us with your URL, we will be happy to assist you with everything.

[Patrick ZParticipant]

Same problem here. Pretty annoying. Overrides only work with !important.
URL: http://www.tv-magden.ch

[RadModerator]

Hi Patrick,

@import downloads the other css file while your css already executed. Thus, if you’re having a slow internet and download finished later than your custom css, then it will override your own css. Because browser will need to re-render downloaded css.

You could try another css file of your own 🙂 and use import too. Example, create custom.css at your child theme folder.

Then from your style.css do it like this.

Theme Name: Child theme
Theme URI: http://theme.co
Author: Theme.co
Author URI: http://www.ficklefish.nl
Description: Theme for Client 
Version: 1.0.0
Template: x

*/

@import url( '../x/framework/css/site/stacks/renew.css' );
@import url( 'custom.css' );

Then add your customization under custom.css and make sure that you always clear caches before testing.

Cheers!

[Patrick ZParticipant]

Thanks for your help! This is not the solution we are looking for though. This way I can’t see any advantage of using a child theme over just the customizer with the parent theme.

Is there really no better way?

[ChristopherModerator]

Hi there,

Would you please change the code you have added in child theme before and mentioned in the thread to this:

body .x-recent-posts.vertical a.x-recent-post4.with-image {
    width: 25%;
}

I made it more specific regarding overriding the original generated css and I think it works. (Please change x-recent-post4 to whatever post number that you like)

Hope it helps.

[senzacquaParticipant]

SAme Problem Here !!!!!

I have the same issue with ICON Child Theme, just working with !important. Is an Issue in all Child Themes ???.

I work in localhost so I don´t understand why dosent work, I will put tomorrow the web online and send the link :). Hope some one can help me.

@import url( ‘../x/framework/css/site/stacks/icon.css’ );
@import url( ‘custom.css’ );

I will try this solution, but I think is not the best one.

Saludos……

[Kosher KMember]

Hi There,

you don’t necessarily need to use !important to make your CSS work when adding on child theme.

The thing is the child theme CSS is loaded first than other CSS file, and X have multiple CSS files loaded depending on your settings,

if you are using the same selector from other CSS file, the best thing to make it work in your child CSS is to add a .site class or body on that selector.

e.g. you want to override this css found in x/framework/css/site/stacks/integrity-light.css

.x-navbar .x-nav>li>a {
float: none;
padding: 0 1.429em;
line-height: 1;
font-weight: 500;
letter-spacing: 2px;
text-decoration: none;
color: #b7b7b7;
}

you can simply override it in your child theme by having this selector

.site .x-navbar .x-nav>li>a {
//your style
}
or 
body .x-navbar .x-nav>li>a {
//your style
}

I hope this clarifies.

Have a great day

[senzacquaParticipant]

Just try your solution, and nothing changes. I just clean cache too.

I don´t understand why you have a Child Theme in X Theme if dosent work right.:(

@import url( ‘../x/framework/css/site/stacks/icon.css’ );
@import url( ‘custom.css’ );

I try body and .site

Your Child themes are not working like a normal child Theme ???? or I m really missing something.

Someone find a simple solution ??

[ZeshanMember]

Hi Senza,

Thank you for writing in!

I’m sorry to hear about the issue you are facing. Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks!

[senzacquaParticipant]

This reply has been marked as private.

[Kosher KMember]

Hi there,

It looks like you are confuse with multiple CSS selector.

I’ve seen this on your child theme style.css

body .x-navbar .x-nav > li > a:hover, .x-navbar .x-nav > .sfHover > a, .x-navbar .x-nav > .current-menu-item > a, .x-navbar .sub-menu a:hover, .x-navbar .sub-menu .sfHover > a, .x-navbar .sub-menu .current-menu-item > a, .x-nav .x-megamenu > .sub-menu > li > a

you need to add body or .site to all the selector,

to break it down, it has 7 selector and you need to add .site or #top or body before those selector.

#top .x-navbar .x-nav > li > a:hover, 
#top .x-navbar .x-nav > .sfHover > a, 
#top .x-navbar .x-nav > .current-menu-item > a, 
#top .x-navbar .sub-menu a:hover, 
#top .x-navbar .sub-menu .sfHover > a, 
#top .x-navbar .sub-menu .current-menu-item > a, 
#top .x-nav .x-megamenu > .sub-menu > li > a {
 //CSS elements here
}

I have created a sample in your child theme style.css to that overwrite your navigation menu without using !important.

Hope that helps

[senzacquaParticipant]

Hi Support, Thanks for the quick answer. I just have one simple question. Why I have to apply a extra .site class to every selector, I didn´t find this information in your Child Theme Video or any other documentation about Child Themes ?.

Is a little bit confuse this way.

I will try to switch my workflow in to this new system, but I still don´t get the point to do in this way.

Sorry for my English….. Hope you understand what I mean and Thanks Again.

Have a nice day wherever you are 🙂

[MrinalMember]

Hi There,

We don’t any special kind of tricks for child theme, as described here in WordPress Codex: https://codex.wordpress.org/Child_Themes any of our child theme works exact same.

You need to target exact element with specific css selector that’s why you need to use .site selector of our previous reply.

[danielmoutouParticipant]

Adding the .site class worked for me. Thank you, Mr X !

[Author]

Posts