[kjdennyParticipant]

Hello,

Followed all instructions on your video for setting up child theme. But have never been able to make it work, except by putting changes in Customiser. Would much rather make changes via editor in style.css sheet. But changes made there to not apply. Please can you give simple, clear, step-by-step instructions to how to set up? At the moment, you just say upload the zipped child theme file and activate. And that is it. Going by all the threads, lots of people have the same problem.

As I’m now working on a new website, I really want to get this sorted.

My website is http://www.vivalogue.com. Any help you can give would be very much appreciated.

[kjdennyParticipant]

Further elaboration: installing the child theme results in the style.css and functions.php being loaded to this path:
x-child/ [which also contains ‘framework’ folder]

It is these two files that can be viewed/edited by ‘editor’ in dashboard. But making changes here does not work.

Following your “Customization best practice” I copied ALL the files from x/framework/views/integrity to x-child/framework/views/integrity.

However, these files CANNOT be viewed/edited via the dashboard.

So obviously doing something wrong.

[kjdennyParticipant]

Did a reinstall of latest child theme; checked that
add_filter( ‘x_enqueue_parent_stylesheet’, ‘__return_true’ );

is in the child theme’s functions.php file.

Still, changes made to style.css in editor do not override the original css.

Obviously some very crucial step missing from all your instructions. Some help?

[RadModerator]

Hi there,

That means it’s correctly installed, your CSS is just being overridden by another CSS. How about we load your style.css on the very end? Please add the code mentioned here https://community.theme.co/forums/topic/change-header-menu-on-renew/?replyto=808702#post-810973 to your child theme’s functions.php.

Thanks!

[kjdennyParticipant]

Hello, I have added that code to the functions.php. It has made no difference. What do you mean by “your child theme’s style.css should be loaded after all other CSS.”

Do you mean that I should delete the child theme css file, then upload again? Or do you mean that it should be placed in a different file?

Please advise.

Thanks

PS Have never had a problem with child themes with other templates or with my own themes. Just have never been able to make them work with x

[RadModerator]

Hi there,

You don’t have to delete, add, or move it. The provided code should do it for you. Though I’m not really sure why it’s not working from your end.

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!

[kjdennyParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Thank you for providing your login credentials.

Upon checking, I didn’t see any code getting added to your child theme’s style.css (wp-content/themes/x-child/style.css)

Kindly add your codes back so we can check why it is not working.

Thanks

[kjdennyParticipant]

Presumably you are looking at the Tidewater site. Have coped all the coding to the style.css file. This is a duplicate of what I had been entering in customizer. Have now deleted this code from customizer and you will see that the child theme is not working (ie none of the styles being applied to the website)

[kjdennyParticipant]

To clarify: if I copy all this code into the “Customize” section of Customizer, they work fine.

[ChristopherModerator]

Hi there,

Upon checking your style.css file, I noticed you’ve commented all CSS.

Please update it to :

/*

Theme Name: X – Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x
*/
@import url( '../x/framework/css/site/stacks/integrity-light.css' );

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "FuturaPT-Light", sans-serif;
	font-weight: normal;
	font-style: normal;
}
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: 1px 0 0 0 #1b1d96 inset;
}
.x-navbar .desktop .x-nav > li > a {
    height: 20px;
    padding-top: 5px;
padding-right: 30px;
    padding-left: 10px;
text-transform:none;
}
.x-btn, .x-btn:hover, .button, .button:hover, [type="submit"], [type="submit"]:hover {
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.x-btn.x-btn-small {
    font-size: 14px;
    padding: 0.429em 1.143em 0.543em;
}
.x-btn, .button, [type="submit"] {
   border-top:none;
border-right:1px solid #363896;
border-bottom:4px solid #363896;
background-color: #eaeaea;
}
.x-btn:hover, .button:hover, [type="submit"]:hover {
   border-top:none;
border-right:1px solid #009966;
border-bottom:4px solid #009966;
background-color: #eaeaea;
}
.x-main {
    width: 64.3333%;
}
.x-sidebar {
    border-left: 1px solid rgba(54, 56, 150, 0.9);
padding-left: 40px;
    width: 29.6667%;
}
.x-topbar {
    background-color: #eaeaea;
    
border-bottom: 0px;
    box-shadow: 0 rgba(0, 0, 0, 0);
    min-height: 46px;
    position: relative;
    z-index: 1031;
}
.x-colophon {
    background-color: #fff;
    border-top: 0 ;
    box-shadow: 0 rgba(0, 0, 0, 0);
    position: relative;
}
.x-main.full {
    display: block;
    float: none;
    padding: 50px;
    width: auto;
}
.site, .x-navbar.x-navbar-fixed-top.x-container.max.width {
    max-width: 1200px;
    width: 100%;
}
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: 1px 0px 0 0 #1b1d96 inset;
}
.x-navbar .desktop .x-nav {
    margin:40px 0 0 0;
}
.x-navbar {
    background-color: #fff;
    border-bottom: 1px solid rgba(56, 56, 150, 0.5);
    box-shadow: 0 rgba(0, 0, 0, 0);
    font-size: 14px;
    overflow: visible;
    position: relative;
    transform: translate3d(0px, 0px, 0px);
    z-index: 1030;
}
.x-main.full {
    display: block;
    float: none;
    padding: 0;
    width: auto;
}
.x-boxed-layout-active .entry-wrap {
    border: medium none;
    margin-top: -1px;
}
.entry-wrap {
    background-color: #fff;
    border-radius: 0;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    display: block;
    padding: 0;
}
.x-column.x-2-3 {
    width: 64.3333%;
}
.x-column {
    float: left;
    margin-right: 6%;
}
.x-column.x-1-3 {
    width: 29.6667%;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 0 0 0.2em;
text-transform:none;
    }
h1, .h1 {
    font-size: 250%;
    line-height: 1.3;
   }
h2, .h2 {
    font-size: 200%;
    line-height: 1.2;
    }
h3, .h3 {
    font-size: 175%;
    line-height: 1.2;
    }
h4, .h4 {
    font-size: 150%;
    line-height: 1.2;
    }
h4, .h4 {
    font-size: 125%;
    line-height: 1.2;
    }
.x-column.x-1-3 {
    border-left: 1px solid rgba(54, 56, 150, 0.9);
padding-left: 40px;
    width: 29.6667%;
}
.x-main {
    width: 64.3333%;
}
.x-sidebar {
    border-left: 1px solid rgba(54, 56, 150, 0.9);
padding-left: 40px;
    width: 29.6667%;
}
.x-btn, .x-btn:hover, .button, .button:hover, [type="submit"], [type="submit"]:hover {
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.x-btn.x-btn-small {
    font-size: 14px;
    padding: 0.429em 1.143em 0.543em;
}
.x-btn, .button, [type="submit"] {
    box-shadow: 0 0.15em 0 0 #363896, 0 1px 2px rgba(0, 0, 0, 0.75);
}
.x-btn:hover, .button:hover, [type="submit"]:hover {
    box-shadow: 0 0.15em 0 0 #009966, 0 1px 2px rgba(0, 0, 0, 0.75);
}
.x-navbar .desktop .x-nav > li ul {
    top: 50px;
}
.x-btn, .button, [type="submit"] {
    font-size: 1rem;
    padding: 0.429em 1.143em 0.543em;
}
body .gform_wrapper .ginput_complex label, body .gform_wrapper .description, body .gform_wrapper .gfield_description, body .gform_wrapper .gsection_description, body .gform_wrapper .instruction {
    font-family: inherit;
    font-size: 90%;
    opacity: 0.99;
}

Please remove @import url( '../x/framework/css/site/stacks/integrity-light.css' ); from this file as you’re using new child theme.

Thanks.

[kjdennyParticipant]

It was commented out on the Vivalogue site, but not the Tidewater site.

Have removed that line.

Both websites have full child themes (newest version), with complete css in the child theme. But for BOTH sites, the css of the child theme is not overwriting and the styles are NOT being applied.

Please could you have another look to explain to me why. (For the moment, both look rubbish, because I have removed the special styles from Customizer so you can see my problem.)

Clearly, there is a problem.

[ChristianModerator]

Hey there,

The child theme CSS or style.css is an external CSS. Customizer CSS on the other hand is outputted as internal CSS. Internal CSS has more weight than external CSS so child theme CSS overrides won’t work. Please see https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/. To override X styles, CSS must be added in the Customizer.

style.css is best used for your own custom styles.

Thanks.

[kjdennyParticipant]

Sooo. In other words, the child theme does not work. And the style.css stylesheet included with the child theme does not work and should NOT be used.

Any custom coding should be done through Customizer.

If would be EXTREMELY helpful if you made that clear. Because most child themes work using a style sheet within the child theme.

But then you say “style.css is best used for your own custom styles.” which contradicts what you say at the beginning of your response. You say that child theme css does not work.

Given all the problems – especially with the new Cornerstone, I will NOT be purchasing any more X-theme licenses. Simple too much work and too many problems.

[kjdennyParticipant]

If the customize field in Customizer is EMPTY (as is the case with my websites) then why does the style.css in the child theme not work?

[Author]

Posts