Move all custom CSS to a separate file

  • Hi,

    Here is the situation:

    I am using OceanWP theme in WordPress. All of my custom CSS have been entered in the OceanWP custom CSS/JS area. I copied all of these custom CSS and created a separate css file which I then enqueued. I deleted the custom CSS in the custom CSS/JS area of OceanWP. Technically nothing should have changed. While most things are fine, I am seeing a few things that are different to what they should be. If I reverse these steps, then it all goes back to normal. What could be the cause of these anomalies? How can I achieve my aim of putting the custom CSS into a separate file. I find it easier to see and manage the CSS in VS Code.

    Any help would be appreciated!

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello @pawanahluwalia,

    Thank you for reaching out,

    The issue with your custom CSS in your website may arise from:

    1. Enqueueing a separate CSS file that loads after the OceanWP styles, causing conflicts if it overrides earlier styles. To solve this, ensure to put all your custom CSS in a valid separate file. Check the console log and ensure there isn’t any 404 file related to that CSS.

    To enqueue correctly you can use the following PHP code in the child theme:

    function my_custom_css() {
  wp_enqueue_style( 'my-custom-style', get_stylesheet_directory_uri() . '/my-custom-styles.css', array( 'oceanwp-style' ) );
}
add_action( 'wp_enqueue_scripts', 'my_custom_css' );

    https://developer.www.ads-software.com/reference/functions/wp_enqueue_style/
    https://docs.oceanwp.org/article/90-sample-child-theme

    2. Differences in specificity between your selectors and OceanWP, where more specific selectors in your custom CSS override less specific ones from OceanWP. To solve it, you can change your CSS and make them stronger, for example, add “!important” on them:
    https://developer.mozilla.org/en-US/docs/Web/CSS/important

    I hope it helps.
    Best Regards

    Thread Starter pawanahluwalia

    (@pawanahluwalia)

    Thank you! I think that has worked. It was just a matter of adding ‘oceanwp-style’ as a dependency.

    I’m glad that you were able to resolve that.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Move all custom CSS to a separate file’ is closed to new replies.