Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
Are your stylesheets actually getting enqueued? If so, then this is a CSS problem, and out of scope. If the the issue is instead that your stylesheets are not getting enqueued, please clarify your question accordingly. –  Chip Bennett Jan 17 '13 at 13:49
add comment

1 Answer 1

up vote 1 down vote accepted

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!

share|improve this answer
    
This did not work :( –  HoGo Jan 16 '13 at 18:13
    
View your page source (or inspect the element with Chrome developer tools / Firebug) and see what the elements are actually called. –  webaware Jan 16 '13 at 23:50
    
I did many times. I have updated my question with some screenshots and more code, could you please have a look at it? The only thin that looks suspicious is that in source code the link id is wpptabs-config-table-css-css. I do not know where this second css came from, and if this is something that may cause the problem. –  HoGo Jan 17 '13 at 9:16
    
Please see updated answer... –  webaware Jan 17 '13 at 13:36
    
"This did not work" is really insufficient. You need to indicate what exactly you tried, what you expected to happen, and what didn't happen as expected, or happened unexpectedly. –  Chip Bennett Jan 17 '13 at 13:50
show 3 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.