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.

Todoist: My Current Toy for Tasks

Speaking of toys, one of my latest favorite toys is the task manager Todoist. At work we had project management software and I made a point to route most of my day through that, but all my personal notes, todos, reminders and whatnot have been through Todoist since August. Now that I’m flying solo, I’m putting all my freelancing tasks through Todoist as well and it’s been amazing.

What to look for in a Todo app

The only thing I care about in a todo app is “what does the app assume I care about?” Productivity apps almost always work better when you follow their system instead of trying to force your system upon them. So when I started considering Todoist what really sold me was a particular blog post from the company’s founder in 2016, “Systemist: A modern productivity workflow“. The post outlines how Todoist assumptions basically start with the classic Getting Things Done (GTD) methods but let’s all admit to ourselves that some of the GTD decision tree is just in the way. What Todoist assumes I want is to capture tasks and thoughts into my inbox really quickly, from everywhere you’d expect to get tasks and thoughts. From there it assumes I want nicely filtered views while I’m in action mode so I can concentrate on only the tasks I want to work on. On these two fronts I’ve been able to more rapidly adopt Todoist than any other task application I’ve used in the past.

Quick add even quicker

Many features and integrations make it easy to add tasks. Perhaps most importantly they don’t feel like additional tools to learn, they’re just part of the system.
  • The quick-add toolbar feels a lot like Alfred workflows, but even better
  • The natural language syntax for projects, labels, and reminders doesn’t have to be taught, it just happens
  • Todoist for GMail and Todoist for Chrome are really stable and make adding emails or webpages as tasks really fast
Between those three options, I already was capturing more tasks than I normally would.

Endorsement

I wholeheartedly endorse Todoist if you’re in the market for a todo application. However,going into it you should really think of it as a $30/yr application not a freemium application. The free version is great for giving you a feel for how it works, but I really cannot imagine trying to tame a monkey brain without the premium features. Labels, reminders, and comments are really all essential.

Questions

I’ve been avoiding opening comments on my blog posts, but in this case I’m kind of interested to know if any of my friends use Todoist and what they think about and I’m also open to questions on how I use it. So comments are open!

Referral

If you purchase Todoist Premium and use my referral link I get 2 extra months of premium, which I love. Thanks in advance for the click: https://todoist.com/r/alex_xiwmok