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.
- look at my code, look at your code, and play “spot the difference”. Maybe it’s in that.
- 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.
- 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!