Author: Alex

Web Developer. I also love board games, Dungeons and Dragons, and drum corps.

Using Stylus to Change the WordPress Admin Bar

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:

Admin Color Bar

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

  1. Install the add-on (Firefox, Chrome)
  2. Visit your site where you need the custom styles
  3. 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.
  4. Add your CSS (see the CSS below)
  5. 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.)
  6. 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!

Warming Up with Coding Cardio

One of my favorite resources to point front-end people to is Wes Bos’s JavaScript30 course on YouTube. In particular two of the videos which he calls “Array Cardio.” While most of the videos are little projects you can make in about 30 minutes, those two days have less of a result and are mostly about using all the array methods and just printing all the results into the console.

It’s a really enjoyable process: focusing on the fundamentals of the language you’re working in. And this morning I found myself needing something similar. I have a couple heavier projects on my mind and getting my mind ready to work on them was proving difficult. It wasn’t a procrastination problem, just a clarity problem.

For some reason the “cardio” idea came to mind, which reminded me of another little project I have on the backburner: working through Learn Python the Hard Way. That course is almost entirely code cardio, very intentionally. To use Zed’s words:

It’s only the “hard” way because it uses a technique called instruction. Instruction is where I tell you to do a sequence of controlled exercises designed to build a skill through repetition.

To start my coding session off, instead of getting right into the PHP I’d be doing the rest of the morning: I actually did a lot of typing in Python using the next exercise from LPTHW. Like a light jog before a workout, it was exactly the trick I needed.

What You Do and How You Do It

When examining my career, I describe most of my efforts both ways. It’s why I’ve pushed so hard to improve on a craft I believe in. Until today I don’t think I’ve ever sold myself that way.

What I do: WordPress developer, front-end developer, full-stack developer, PHP developer.

How I do it: on time, just-in-time, humbly, transparently, remotely, honestly.

I used to think the “what” could make me rare and valuable. But more and more the feedback I get says it’s the “how.”

The Right Work with a Bad Result

The poker player has bet well for a few rounds and thinks they have the best hand, all the way up to the river. Now she feels like the one opponent remaining may have been holding onto a straight draw they way overplayed… until it just hit. After a minute of deliberation, she folds the hand. It hurts to lose a big pot she took the time to build, but it was the right call.

The lesson learned isn’t that she shouldn’t have bet all those times. It’s that bad results can still happen, even when you do the right work. Do the right work again. Try to keep doing it better. 

That sales call where you followed up as promised, but the client you thought you had rapport with had nothing but a snarl for your latest proposal. That short story you wrote with the perfect twist ending, that had nothing but rejections from your favorite magazines. That conversation you’ve been meaning to have with a parent for so long, but doesn’t go as well as you’d hoped. You made the right call to make the effort, and the bad result was out of your control.

Make more calls, and keep trying to make them better. Learn the work, not the result.