Article explaining CSS/JS customization options

Support
#1

On the old forum (I think), there was an article that described the different options for adding/customizing CSS (and JavaScript) in the different locations and the pros and cons of each… kind of a best practices. (i.e.: child-theme files vs customizer vs Cornerstone). I can’t seem to find that any longer, but it would be helpful to know where it is and have it listed in that KB overview.

Also, related… if CSS/JS are added via Cornerstone (vs Customizer or child style.css) are they applied only to that page? (If I could find the above document, I think it answered that.)

One reason I ask is that one of my client’s older sites used a plugin that allowed them to apply CSS/JS to specific pages or sets of pages (i.e.: not globally). But, that would be somewhat redundant if I’m understanding correctly… and that plugin has been causing some issues (so it might be best if we can get rid of it).

1 Like
#2

Hi there,

Thanks for writing in.

I can’t find that article/post either but I think you’re looking a way to output the CSS into the file? If that’s the case, just use child theme’s style.css for your CSS and you’re good :slight_smile:

Then to make sure it’s more prioritized from other CSS, then please add this code to your child theme’s functions.php

function x_enqueue_site_styles() {

    //
    // Stack data.
    //

    $stack  = x_get_stack();
    $design = x_get_option( 'x_integrity_design' );

    if ( $stack == 'integrity' && $design == 'light' ) {
      $ext = '-light';
    } elseif ( $stack == 'integrity' && $design == 'dark' ) {
      $ext = '-dark';
    } else {
      $ext = '';
    }



    //
    // Enqueue styles.
    //

    wp_enqueue_style( 'x-stack', X_TEMPLATE_URL . '/framework/css/dist/site/stacks/' . $stack . $ext . '.css', NULL, X_ASSET_REV, 'all' );

    do_action( 'x_enqueue_styles' );

    if ( is_rtl() ) {
      wp_enqueue_style( 'x-rtl', X_TEMPLATE_URL . '/framework/css/dist/site/rtl/' . $stack . '.css', NULL, X_ASSET_REV, 'all' );
    }

    if ( X_BBPRESS_IS_ACTIVE ) {
      if ( x_is_bbpress() ) {
        wp_deregister_style( 'buttons' );
      }
      wp_deregister_style( 'bbp-default' );
      wp_enqueue_style( 'x-bbpress', X_TEMPLATE_URL . '/framework/css/dist/site/bbpress/' . $stack . $ext . '.css', NULL, X_ASSET_REV, 'all' );
    }

    if ( X_BUDDYPRESS_IS_ACTIVE ) {
      wp_deregister_style( 'bp-legacy-css' );
      wp_deregister_style( 'bp-admin-bar' );
      wp_enqueue_style( 'x-buddypress', X_TEMPLATE_URL . '/framework/css/dist/site/buddypress/' . $stack . $ext . '.css', NULL, X_ASSET_REV, 'all' );
    }

    if ( X_WOOCOMMERCE_IS_ACTIVE ) {
      wp_deregister_style( 'woocommerce-layout' );
      wp_deregister_style( 'woocommerce-general' );
      wp_deregister_style( 'woocommerce-smallscreen' );
      wp_enqueue_style( 'x-woocommerce', X_TEMPLATE_URL . '/framework/css/dist/site/woocommerce/' . $stack . $ext . '.css', NULL, X_ASSET_REV, 'all' );
    }

    if ( X_GRAVITY_FORMS_IS_ACTIVE ) {
      wp_enqueue_style( 'x-gravity-forms', X_TEMPLATE_URL . '/framework/css/dist/site/gravity_forms/' . $stack . $ext . '.css', NULL, X_ASSET_REV, 'all' );
    }

    if ( X_CONTACT_FORM_7_IS_ACTIVE ) {
      wp_deregister_style( 'contact-form-7' );
    }

    if ( is_child_theme() && apply_filters( 'x_enqueue_parent_stylesheet', false ) ) {
      $rev = ( defined( 'X_CHILD_ASSET_REV' ) ) ? X_CHILD_ASSET_REV : X_ASSET_REV;
      wp_enqueue_style( 'x-child', get_stylesheet_directory_uri() . '/style.css', array(), $rev, 'all' );
    }


    x_enqueue_google_fonts();

  }

As for specific pages, you really need to add it in cornerstone’s custom CSS. Or, you can create your own style.css for each of your page, example, style-232.css where 232 is your page or post’s ID. Then simply add this code before x_enqueue_google_fonts(); from the above code.

if ( is_page ( 232 ) || is_single( 232 ) ) wp_enqueue_style( 'x-child-232', get_stylesheet_directory_uri() . '/style-232.css', array(), '1.0.0', 'all' );

Then add your CSS to style-232.css, and repeat each process if you wish to add more.

Please note that we can’t provide support for any customization, what I provided is the idea how it can be done :slight_smile:

Thanks!

#3

Thanks… yes, that second part is very helpful in terms of replacing the plugin I noted in my final paragraph.

However, if the article I mention can’t be found, it would be really helpful if another like it could be created. (And added to the KB.)

Basically, it explained the difference between using style.css (in child theme), compared to global CSS when you launch X, versus the CSS customization in the Customizer, vs the CSS on individual Cornerstone pages, etc.

It talked about (if I remember correctly) which took priority, and some best practices for when deciding which to use.

I’m guessing given your response that using the individual Cornerstone page CSS is similar to your ‘style-232.css’ example above, and the CSS in style.css (child theme) is global. But, I’m a bit confused on the role the Global CSS when launching X and the CSS in the Customizer play in comparison.

#4

Hello There,

Thanks for getting back to us. This is the order of the styles being implemented within the page.

  • X Stack style
  • Child theme’s style.css
  • WordPress Customizer’s Additional CSS
  • X Customizer’s Custom CSS
  • Cornerstone’s Custom CSS

Cornerstone’s custom css will be only be applied on page by page basis. All the other css will be loaded sitewide. Please take note where you may have added your custom css because if in case it does not take effect, then there must be another css overriding it somewhere in the other place.

Hope this helps.

1 Like
#5

Thanks, yes, this is what I was looking for.

The document I was referring to was longer and more detailed, but this is the essence of it, and what I was wanting to know. That certainly helps, and if there is nothing like it in the KB, please add something there. :slight_smile:

Personally, I usually test stuff in the X Customizer Global CSS or WordPress Customizer’s Additional CSS, and then put it into the child style.css… cleaning them out and helping reduce potential conflicts. Good to know about Cornerstone Custom CSS (and the above style-ID.css technique) being limited to the page/post. That info is very helpful!

Also, I assume Javascript works a bit the same way in Customizer and Cornerstone. That info or any techniques like the style-ID.css method for Javascript would also be worth noting in the same or similar article in the KB.

Thanks again!

#6

Hey There,

I am glad I was able to explain things in a brief manner. Thanks for letting us know!
If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.