<div class="page large-header article light raleway pid_7574 page-7574"> <div class="background"> </div> <article> <header> <div class="container"> <h1> How to change the highlight color on your site </h1> <div class="summary"> </div> <p class="byline"></p> </div><!--container--> </header> <section> <div class="container"> <p>When I read text on websites, I tend to highlight sentences as I read them. And I've noticed that lately a lot of websites are forgoing the standard blue color highlight, and it's awesome. Changing the highlight color on your website can add a bit of personality and fun - the little details are often what people remember most. Follow the 4 steps below to change the highlight color on your website!</p><!--more--><h2>Step 1.</h2><p>Find out where the CSS code for the highlight ("selection") is in your website's stylesheet. To do this, highlight some text on your site, right-click, and check Inspect Element. <img class="aligncenter wp-image-6203" src="http://tiffdotcom.com/wp-content/uploads/2014/12/step1-changewebsitehighlightcolor.png" alt="step1-changewebsitehighlightcolor" height="215" width="339"></p><h2>Step 2.</h2><p>The Inspect Element box will pop up at the bottom of your screen. In the lower right, you'll see a) what your selection color is and b) where you selection color is located in your website's stylesheet. <img class="aligncenter wp-image-6202 size-full" src="http://tiffdotcom.com/wp-content/uploads/2014/12/step2-changewebsitehighlightcolor.png" alt="step2-changewebsitehighlightcolor" height="113" width="324"></p><h2>Step 3.</h2><p>Navigate to your website's stylesheet*. Using Inspect Element as your guide, find the line with the selection color (it's the number in the right of the above photo: "style.css: 176"). Here, you'll find two classes for selection color. This is because different browsers read this differently - they need to be kept separate in order to work across all browsers. Now that you know where the color is, you can change it to match your site's theme. Make sure to save a copy of your stylesheet <strong>before</strong> making changes, just in case anything goes wrong! Make your changes, save, and clear your site's cache if necessary. The first image below is what I currently have on my site. The image directly below is what I changed it to for the purposes of this blog post.</p><p><img class="aligncenter size-full wp-image-6199" src="http://tiffdotcom.com/wp-content/uploads/2014/12/step4-changewebsitehighlightcolor.png" alt="step4-changewebsitehighlightcolor" height="177" width="263"><img class="aligncenter wp-image-6201 size-full" src="http://tiffdotcom.com/wp-content/uploads/2014/12/step3-changewebsitehighlightcolor.png" alt="step3-changewebsitehighlightcolor" height="186" width="428"></p><p><em>* Please note, when I say stylesheet, I mean your child theme's stylesheet. Making changes to the theme itself is a no-no, since any upgrade you make to your theme will override all custom code that you've put in. Hard work = gone.</em></p><h2>Step 4.</h2><p>Check out your site's new selection color! Pretty cool, right?</p><p><img class="aligncenter wp-image-6200" src="http://tiffdotcom.com/wp-content/uploads/2014/12/step5-changewebsitehighlightcolor.png" alt="step5-changewebsitehighlightcolor" height="150" width="493"></p> </div><!--container--> </section> </article> </div><!-- page-->