Child theme stylesheet doesn't work - Cornerstone

[Berube]

Hi,

I installed the X Child Theme that now appears in my Editor. I have the “Theme Functions” with some functions I tried to add over my attempt to make changes work (the first “add_filter” was aleready there).

<?php add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );

add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_theme_style’ );
function enqueue_parent_theme_style() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri( ).’/style.css’ );
}
function custom_scripts() {
wp_enqueue_style( ‘child_css’, get_stylesheet_directory_uri().’/custom.css’ );
}
add_action(‘wp_enqueue_scripts’, ‘custom_scripts’, 9999 );
add_filter( ‘get_shortlink’, function( $shortlink ) {return $shortlink;} );

And there is also the Stylesheet with nothing in it.

Was I suppose to add more files from the parent X theme? I’m not sure I understand how this really works… There is a good number of changes I made so far but with some difficulty because all the CSS I put in my stylesheet don’t apply and is overrided by Cornerstone so I have to put the CSS in every specific page in Cornerstone. Even then, there are some things that can change and others that can’t, so I have to manage with both to get the expected results…

I read a lot on the forum and on the internet but it’s alway trials and errors…

In short, I would really like to be able to keep all the codes at the same place in the Child Theme Stylesheet and that it can be applied to the entire website and through the multiple pages so it can be easier to manage. Is there a way to do that? Is there a way that Cornerstone could only serve to put elements in place but without overriding my styles in CSS?

Here is my website so far. https://stephanieberube.com

Thank you so much in advance.

[ruenel]

Hello There,

Thanks for writing in!

add_filter( 'x_enqueue_parent_stylesheet', '_returntrue' ); will load the parent style and it will be based on the stack that you have chosen to be used in your site.

And this code is not necessary because the parent theme’s style.css is empty. It does not have anything on it.

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri( ).'/style.css' );
}

Most of the style will be loaded in the stack stylesheet which was already taken cared of with the first line of code add_filter( 'x_enqueue_parent_stylesheet', '_returntrue' );.

You must understand the order of the how the styles were loaded in the front end so that you will know why some of your styles were being overridden with the other styles you have.

• X theme’s Stack styles
• Child theme’s style.css
• WordPress Additional CSS (Appearance > Customize > Additional CSS)
• X theme’s Theme Option settings
• X Theme’s Global custom css
• Cornerstone’s {element} default settings
• Cornerstone’s custom css

And with your code, your custom.css will will be applied last.

Hope this helps.

[Berube]

Thank you for your rapid answer RueNel!

I also have a couple of others random questions… I tried without success a lot of options for each of them. I’m sorry if all of these sounds silly, I’m really trying to control all the concept.

1- So in short, there’s not really a way I can put the Child Theme in priority so it overrides what there’s after and so I can simply put everything at the same place in the Child Theme? We have to put most of the code in the Cornerstone custom CSS? Even then, by example, for some elements I can custom the font but have no control over the color or the font-size, which I have to select directly into the element setup. It is the way to go?

2- In which cases do I have to upload files from the parent theme into the child theme? That too I need to understand more…

3- In my home-one-page navigation the anchor points work well but depending on the section, it stops a bit too early, is there a code I can put so it stops a couple pixels down?

4- For the portfolio section (stephanieberube.com/portfolio/) I would like to put a space between the different projects but in percentage so it’s more responsive (because if I add by example 100px in the element setup, it stays 100px even when the picture are way smaller on small screen which is way too big spaces)

5- Is there a way so that the logo serves to only scroll back to the top of the page instead of reloading it?

6- I was able to make the logo shrink on scroll down, but not the menu with it and neither going back to bigger when we scroll up. What should I add?

7- Can the collapsed menu also be sticky and stay in the page as the main menu?

So sorry I know it’s a lot of questions and thank you in advance for your help, it means a great lot to me!

[ruenel]

Hello There,

Thanks for writing in!

1.) There is. You have to update your code to make sure that the child theme and your custom css will be loaded last so that it will become a priority.

//add_filter( 'x_enqueue_parent_stylesheet', '_returntrue' );


function custom_scripts() {
  wp_enqueue_style( 'child_css', get_stylesheet_directory_uri().'/custom.css' );
  wp_enqueue_style( 'child_css', get_stylesheet_directory_uri().'/style.css' );
}
add_action('wp_enqueue_scripts', 'custom_scripts', 9999 );
add_filter( 'get_shortlink', function( $shortlink ) {return $shortlink;} );

2.) The child theme is a place where you can add your modifications to a theme or feature. This will allow your changes not to be overwritten when there is an update to the parent theme. For more details, please review how we recommend making template changes in Customization Best Practices.

3.) This issue is because of your custom JS. Have it updated and make sure that the height of the navbar wrap is the same as the navbar inner:

$('body.x-navbar-fixed-top-active .x-navbar-wrap').css("height", "50px");
$('.x-navbar-inner').css("min-height", "20px");

4.) Do you use Essential grid for the portfolio? You will have to edit your grid and adjust spacing. You might not be able to use percentage as the plugin only uses px.
https://www.themepunch.com/essgrid-doc/item-spacing-grid-padding/

5.) Yes you can add this custom JS code:

(function($){
	$('.x-brand').attr("href", "#top");
})(jQuery);

6.) You can also shrink down you menu using a custom css. Please make use of this code:

.x-navbar .desktop .x-nav > li > a {
  transition: all 1s ease;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
  font-size: 10px !important;
}

7.) By default, the mobile menu is not sticky. You can make it sticky by using this code:

@media (max-width: 979px){
  .x-navbar-fixed-top{
    position: fixed;
  }
}

We would loved to know if this has work for you. Thank you.

[Berube]

Hi thank you so much again!

Most of the adjustments worked perfectly!

I really didn’t get the Child Theme CSS to work even with the given code so I had to put it back in the Cornerstone CSS. There is clearly something I do wrong but I can’t figure out what?

The menu shrinks well on scrolling down in Chrome, but in Safari it jumps instead of doing a smooth transition. Is there a reason for that or something I should adjust? Also I would like it to go back to normal size as soon as we scroll up and not only at the top of the page. What should I add to do that?

The sticky header works on mobile thank you! I noticed though that when I click the arrow to scroll down to the menu/next image it scrolls way too late. Where should I adjust that?

Thank you!

[christian]

Hey Stéphanie,

Because of CSS Precedence, the CSS that must override the theme’s styles must be placed in either the Global CSS or the Content CSS. This is not something that you do incorrectly. You’ll know if there’s something wrong with your custom CSS if it won’t work everywhere. In which case, you can check your site in a service like http://csslint.net/

Regarding the customization @RueNel gave for shrinking of the navbar and making it sticky on mobile, regretfully, we could not continue on providing a solution for that.

Those features are already available in Pro. Upgrading would be the solution. We could not continue on fixing custom code as that would be custom development which is outside the scope of our support. Please see our Terms

Thank you for understanding.

[Berube]

Oh I understand yes thank you for everything!

[jade]

You’re welcome, Stéphanie.