Plugin css

I am wanting to change the css for BuddyPress group Calendar (and other plugins).

I was wondering if there is a way to do it that doesn't mean I have to change it every time there is an upgrade, like one does with a parent child theme. I had one plugin that told me to put the css in the child directory and another that has provided a setting page for styling.

However, I would like to know if there is a way for plugins that do not provide this functionality or have instructions regarding this.

  • drmike

    You *should* have a call to a custom.css file where your custom css coding goes. The problem though it the custom.css file is looked for with the theme's subdirectories. (The only example I can find right off.)

    We cheat though. We place all of our extra css (ie plugins) into a single file kept somewhere save. (wp.com puts theirs as an upload to s.wordpress.com) and then use a simple mu-plugin to call that file within wp_head. That's probably the best way to go as you're never going to erase your s.* blog's uploads and the call is outside of your theme so it won;t get erased.

    Does that help? I've explained it a couple times before and gotten back "Huh?"s so I know it;s kind of hard to understand.

  • AquaPebble

    @drmike

    I have read over what you have written and at first it was a "Huh?" moment. :slight_smile:

    I have reread and reread it and looked at that most you linked to. I think the relevant line was point 2 that Tammie made in her advice (if I am correct).

    I have a few questions that I need to know to further understand what you are saying:

    1. Where should you have this call to the custom css?

    2. Where should this custom css be - in the plugin or somewhere else?

    3. I am not entirely sure I understand what you mean by the custom css is looked for with the theme's directory. (that thread was about a confusion about the parent and child css: you can read what I tried in this thread: https://premium.wpmudev.org/forums/topic/child-theme-question - I thought that I could call that plugins css in the child theme's style css before I called the child css, where I pasted the styling changes from the plugin and that the changes I made would take precedence - however that never worked.)

    I get the part of creating a single css with all the custom styling from your plugins and calling that in the header. (or at least that is what I think you mean)

    4. What I don't get is why that works or take precedence over the css in the plugin.

    Thanks for your help.

  • drmike

    Where should you have this call to the custom css?

    We create a simple mu-plugin that calls it. Something like this:

    function add_sitewide_css() {
    ?>
    <style type="text/css">
    @import url("http://s.yourdomain.tld/files/whateverthedateis/sitewidestyle.css");
    </style>
    <?php
    }
    add_action('wp_head', 'add_sitewide_css');

    That'll add in a sitewide call to load in that css file. You'll have to create the s blog (or whatever you use) and upload the file yourself of course.

    2. Where should this custom css be - in the plugin or somewhere else?

    We load it as a separate file. You can load it via a plugin but usually you;re going to wind up actually putting the css in the head of the outputted html which mean a bigger header. That's something we try to stay away from.

    Re: File

    Take a look at the custom css line at the post I used:

    /home/trainlif/public_html/wp-content/themes/bp-scholar-child/_inc/css/custom.css

    As an example in this case, the theme loads a custom.css if it;s present. That's where you should be loading css from when this theme is used. The problem though (No offense to Tammie) is that the file sits within the theme directory. (ie '/bp-scholar-child/') If you were to delete and replace the theme, you would also delete the custom.css file. That's why we create a separate blog and upload all of our sitewide stuff to there. The uploaded files are uploaded to blogs.dir and there's no way you;re going to delete that. (At least I hope you;re not. Endusers would "express their annoyance in raised voices" if you did.)

    4. What I don't get is why that works or take precedence over the css in the plugin.

    Depends on the theme actually. Nine times out of ten, the wp_head call is the very last thing that theme developers put in the head of their header.php. CSS goes from top to bottom. What comes last as the browser reads the page is what winds up getting used.

    That's actually how the wpmu css editors out there work, including wp.com's. They don;t actually edit the theme's css. The static css files created for the theme get read by the browser first followed by the edits made in the custom.css by the endusers.

    Hope that makes sense. I know it;s kind of hard to understand. On our installs we actually do all of our sidewide data via this method. Most of my clients don;t understand it either.

  • Marty Thornley

    You can also add a priority number to the add_action function to make sure your function is called after all the other functions that have been added through wp_head.

    Other plugins and settings may also tie into the wp_head action so if you add your css, then something else is added after, it may overrule it.

    try:

    add_action('wp_head', 'add_sitewide_css',10);

    You can increase or decrease that number until it seems to work.

    If a plugin used:

    add_action('wp_head', 'add_plugin1_css',9);

    and another used

    add_action('wp_head', 'add_plugin2_css',13);

    you might need:

    add_action('wp_head', 'add_sitewide_css',20);

    sometimes I just get selfish and use a really high number to make sure no one goes higher :slight_smile:

    add_action('wp_head', 'add_sitewide_css',99);

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.