CSS Tip: Customize Your Blog’s Highlight Color

I’m a tinkerer when it comes to the web, so I like to find ways to customize sites and learn new things, and that’s how I came across this CSS tip. You know that light blue highlighting color you see all over the internet when you highlight text and in those screenshots of articles that have become so popular to tweet? You can customize it! (Go ahead, click-and drag-to highlight some text and see it in action. Nice, huh?)

Read on for how to change your blog’s highlighting look with a bit of CSS.

Blog Bestie's CSS Tip: Customize Your Blog’s Highlight Color

Let’s Give This CSS Tip a Go!

First, do you know where to add CSS on your site? If you’re on WordPress or Blogger, I’ve got the info you need below. If your site is on another platform and they allow you to add CSS, this code will work for you… you’ve just got to figure out where it goes. 😉

Adding CSS on WordPress:

If you’re on WordPress.com and have an upgrade that allows adding CSS, head to Customize > CSS and paste the code in the box.

If your site is a self-hosted WordPress.org site, don’t edit your theme’s stylesheet directly. (Why? When you update the theme next time, the code you’ve added will be lost.) Instead, add a plugin that gives you a place to add CSS. I recommend the Jetpack plugin’s Custom CSS module. If you add Jetpack and turn on the module, you can add your CSS in Appearance > Edit CSS (and it’ll stick around even when your theme requires an update).

Adding CSS on Blogger:

Head to Template > Customize > Advanced > Add CSS and paste it there. Google has detailed directions and screenshots right here to help you find the right spot if needed.

Here’s the CSS:


/* text highlight color */
::selection {
    background: #00dddd;
    color: #fff;
}
 
/* text highlight color for Firefox */
::-moz-selection {
    background: #00dddd;
    color: #fff;
}

Copy all the code in the box and paste it in your site’s CSS area.

Browsers handle things differently, so you’ll notice there are two pieces of code there, including one specifically for Firefox. Add all of it. And if someone views your site using an old browser (and it would have to be a really old one) where this code doesn’t work? They’ll get the standard ol’ blue, so no harm done.

Customize the CSS:

Your blog probably has a different color scheme than mine, so you’ll want to adjust the colors to fit your site’s look. Change the color hex codes next to background and color to exactly the ones you want. Be sure to keep the # and ; there so it’ll work.

CSS Tip! Get rid of that default blue. Customize your blog’s highlight color!Click To Tweet

Need to pick out a color? I like color-hex.com for browsing swatches, and the ColorZilla Chrome extension is a great tool to install if you want to find the hex code for a color you see on any website. It adds a little dropper tool to your browser that you can use to click on a spot on a page and then it tells you the hex code like magic.


And that’s it! With that one quick change, your site is a little more customized and waiting to surprise your readers at any moment. 😉

Still have a little time left to work on your blog? Check out Blogging Tips: Tasks to Manage Your Blog in 10 Minutes.

Be a BFF! Subscribe for access to the BFFs-Only resource page & exclusive content 2x a month.