CSS styling not working in a custom metabox

Question

I have some difficulies styling Meta Box content of a custom post. No CSS styling is applied. I made a really simple testbased on what I have read on the other post here.

metabox creation:

add_meta_box('wpptabs_company_details', __('The Meta box name', 'wpptabs'), array(&$this, 'render_meta_content'), 'wpptabs', 'normal', 'high');

Meteabox content:

<label> THIS IS TEST </label>

This is waht I have tried with css

.postbox label{color : red!important;  }
#meta_wpptabs_company_details .postbox label{color : red!important;  }
#meta_wpptabs_company_details label{color : red!important;  }
#wpptabs_company_details .postbox label {color : red!important;  }
#wpptabs_company_details label {color : red!important;  }
#meta_wpptabs_company_details {color : red!important;  }
label {color : red!important;  }

This is how it looks like in Chrome with "inspect element" -> link When I wite directly to element.style{} it works, but when I add a new style rule with '+' button a label{} field appears and when I write the style in it it does not work.

Here is some evidence the css is loaded: -> link

and this is how it looks in page source in header

<link rel='stylesheet' id='wpptabs-config-table-css-css'  href='http://namio.pl/wp-content/plugins/wp-pricing-tables/css/admin.css?ver=null' type='text/css' media='false' />

And this is how I load the css:

class MyClass {

function __construct() {
    add_action('admin_enqueue_scripts', array(&$this,'wpptabs_table_modifier'));
    add_action('admin_print_styles', array(&$this,'wpptabs_enqueue_styles'));
  }

function wpptabs_enqueue_styles() {
        global $typenow; if ($typenow=="wpptabs") {
        wp_register_style('wpptabs-config-table-css', WPPTABS_URLPATH . '/css/admin.css', 'null', 'null', 'false');
        wp_enqueue_style('wpptabs-config-table-css');
        }
    }   

I have no idea what else it could be. If some more details are needed please let me know.

Answer 1

The metabox div gets an ID of 'meta_' + your metabox ID, thus:

Sorry, that was me looking at my own metaboxes, forgetting that I actually prefix them like that to differentiate the container from elements within the container :(

Let's work through your code and see if we can find the answer.

First, your metabox has the id 'wpptabs_company_details', so the container has (as you originally stated before I messed you up!) an element ID 'wpptabs_company_details'. Given nothing else, the following CSS should set the text colour of labels:

#wpptabs_company_details { color: red; }

So, I stick that into a file 'css/admin.css' inside a plugin folder, and I make a plugin with the following code in it:

class wpse_81783_metaproblems {

    public function __construct() {
        add_action('init', array($this, 'init'));
    }

    public function init() {
        add_action('add_meta_boxes_post', array($this, 'add_meta_boxes'));
        add_action('admin_enqueue_scripts', array($this,'wpptabs_enqueue_styles'));
    }

    public function add_meta_boxes() {
        add_meta_box('wpptabs_company_details', __('The Meta box name', 'wpptabs'), array($this, 'render_meta_content'), 'post', 'normal', 'high');
    }

    public function render_meta_content() {
        echo "<label> THIS IS TEST </label>\n";
    }

    public function wpptabs_enqueue_styles() {
        global $typenow;

        if ($typenow == 'post') {
            wp_register_style('wpptabs-config-table', plugins_url('css/admin.css'), null, null, false);
            wp_enqueue_style('wpptabs-config-table');
        }
    }

}

new wpse_81783_metaproblems();

Your code is for a custom post type, but I've stuck with 'post' just for simplicity. Note that I've cleaned up a couple of simple errors in your enqueue call: where you are passing 'null' and 'true', those are strings and should instead be null and true which are not the same. I also just used the function plugins_url() to locate the CSS file, which may be your problem. Otherwise, I'm not sure if I've really done much different. It works. I get a red label element in a metabox.

A couple of things come to mind here.

1. look at my code, look at your code, and play "spot the difference". Maybe it's in that.
2. go back to Chrome's Inspect Element, and look at the right-hand column where it says "Styles". It lists the CSS rules that apply to an element, including any that are overridden (which it shows by striking them out with a line through them). See if your rule is there, and if it is, is it overridden by something else.
3. when you view source and see a link to your CSS file, click the link and see if it actually loads your CSS file!

Good luck!