Custom CSS in main files?

Is there a place I can add my Custom CSS in the main file system? Upfront slowly builds the site using the global css and it just looks unsightly for me at the moment.

Is there a way of creating a CSS file and adding it into the theme somewhere so it can load as the theme is loading?

Regards

Matt

  • Adam Czajczyk

    Hello Matt,

    I hope you're well today and thank you for your question!

    There's no regular "customizer" available with Upfront, which would usually be used for this (via "Appearance -> Customize -> Additional CSS" option) but it still can be done.

    The simplest way is to use a plugin such as for example "Simple Custom CSS" that you'll fine here: https://wordpress.org/plugins/simple-custom-css/

    Another option would be to create a custom css file and then create a simple MU plugin that would enqueue that style using "wp_enqueue_style()" native WP function.

    Best regards,
    Adam

  • Rupok

    Hi Matthew Hartnet,

    In my personal opinion, it's easier to use custom CSS by adding your custom CSS code to "Dashboard > Appearance > Customize > Additional CSS" section.

    However, if you want to use the MU Plugin method, then at first, create a CSS file in your theme directory or anywhere else. Then create a MU Plugin with the following code:

    <?php
    function add_custom_stylesheet() {
        wp_enqueue_style( 'style-name', get_template_directory_uri() . '/custom.css' );
    }
    add_action( 'wp_enqueue_scripts', 'add_custom_stylesheet' );
    ?>

    On this code, "get_template_directory_uri()" will print the directory path of your currently active theme (this example is assuming that you put your custom CSS file in the root of your theme directory). And custom.css file is a sample file name. You will need to use your file name which you created with your custom CSS Code.

    I believe this will help. Please let us know if you still have any confusion. We will be glad to help further.

    Have a nice day. Cheers!
    Rupok

  • Adam Czajczyk

    Hi Matt!

    This is an Upfront Builder built theme, right? Such theme is a child-theme of Upfront and in that case it'd be slightly different. The code that Rupok shared would work with parent theme only as "get_template_directory_uri()" function returns path to root of the parent theme.

    That said, there should be a small change. This code of the mu-plugin

    wp_enqueue_style( 'the-basis-online-v2-0', get_template_directory_uri() . '/style.css' );

    should in this case be

    wp_enqueue_style( 'the-basis-online-v2-0', get_stylesheet_directory_uri() . '/style.css' );

    However, this I'm actually confused a bit about what you're trying to achieve here. It looks like you're trying to include a main style of the theme that you built. If this theme is enabled on site, there's no need to additionally enqueue this style, it's fetched and included automatically.

    You wrote previously: " Upfront slowly builds the site using the global css and it just looks unsightly for me at the moment.". I understood that as in "you want to add your own custom styles to the theme but don't want to add them to Global CSS via Upfront". This solution would work then. It is not, however, meant to "alternate" the way the main stylesheet is loaded.

    If I'm missing something here, let me know please.

    Best regards,
    Adam

  • Predrag Dubajic

    Hi Matt,

    Since the code is added in the main CSS style of your child theme already so there's unfortunately no way of speeding up when that code would be loaded.

    What you could try is using a preloader plugin like this one https://wordpress.org/plugins/the-preloader/ that will hide the page behind the loader until the page is loaded, that way visitors will not see the changes on site during the load.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.