I’m working on a project right now that uses the WordPress Toolbar, that dark-colored bar at the top of the administration area (and optionally your site) since version 3.3, as part of the site template. Unfortunately the default styles didn’t quite cut it for this project, so I needed to come up with a way to override these styles with my own.
Since the toolbar structure was fine (I really just needed to change some colors and tweak the content), the solution I came up with was this:
First, create a new stylesheet in your theme directory – in my case, I created css/admin-bar.css – then add the following to your functions.php file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/** * If the WordPress admin bar will be visible, enqueue * our 'admin-bar-overrides' stylesheet. */ function grunwell_admin_bar_overrides() { if ( is_admin_bar_showing() ) { /* * I actually used wp_register_script() elsewhere and * just ran wp_enqueue_script( 'admin-bar-overrides' ) * here, but this will also do the trick. */ wp_enqueue_style( 'admin-bar-overrides', get_bloginfo( 'template_url' ) . '/css/admin-bar.css', array( 'admin-bar' ) ); } } add_action( 'init', 'grunwell_admin_bar_overrides' ); |
This will conditionally enqueue/register a new CSS file to be loaded if and only if the “admin-bar” CSS file (wp-includes/css/admin-bar.css) is loaded. Use this stylesheet to contain any overrides to the default styles.
Leave a Reply