A member of the WordPress Louisville meetup that I co-organize sent me an email today. They recently found where you can change your admin color scheme in the WordPress user settings. But a caveat with that setting is that when logged into the site but viewing the front end with the admin bar, that bar does not receive the dashboard styles.
When you’re working in client sites or have several instances of a site, it can be useful for that bar to somehow signal that environment appropriately. The typical dashboard settings obviously fail to do that.
If you don’t mind having a plugin running for just this purpose – like if it’s your own site and you can damn well do what you want – then I recommend this plugin from the ServerPress folks:
It provides a simple settings page that lets you change the color of the admin bar and also add a message as well (e.g. DEV or STAGING or PROD).
But it doesn’t offer anything regarding user-specific settings, so what you choose will take effect for all users. And it’s yet another plugin in the list that you may get email about, asking why you installed it. And maybe your client doesn’t like that shade of pink you chose. And… you may find this just to be the wrong choice on a site that isn’t totally yours.
In those circumstances I turn to a browser extension that’s useful all over the web: Stylus. I was a big Stylish user until its big privacy controversy and Stylus was the obvious alternative. I hear Stylish is available again, but why bother switching?
In brief, this add-on lets you save CSS styles that will run only where you can decide, and the styles will be specific only to your browser where you save the styles.
Here’s the step-by-step for our Admin Bar change
- Install the add-on (Firefox, Chrome)
- Visit your site where you need the custom styles
- Click on the Stylus button in the browser and click the link where it says “Write style for:” . This will open up a CSS editor where the styles will only run on the domain you’re currently on.
- Add your CSS (see the CSS below)
- If you want to, add more refined rules (like maybe you only want to run this on the homepage, not any page on the domain? I dunno, it’s your customization.)
- Save.
Look at your page again and notice your custom styles are in place. Visit that page in another browser or with the add-on not running, your custom styles are missing. Cool, huh
The admin bar itself has the id wpadminbar so the following CSS will change its background color:
#wpadminbar {
background-color: #FFB6C1;
}I don’t care you don’t like my shade of “Production Pink.”
But of course it doesn’t have to stop there, you can add any CSS you want for effect you want. I find the background for my needs, but the point is that this solution is specific only to your browser, in places where you tell it to be. So no worries what anyone else might think because anyone else won’t see it.
Once you’ve made this first change to your browser, its hard to go back. Custom CSS rules can make some unbearable websites usable again. But little hacks like these to make your life easier are the first step!
Alex Gustafson 