How To Change The Text Select Highlight Color On Wordpess And Blogger




| | 15 comments

Internet ToolboxIf you're a blogger you will know how to copy and paste and the process of highlighting text or code to copy.Regular readers that have followed our tutorials will have copied code from our posts many times.Now, when you highlight text or code you will note by default the background color changes to blue while the text color changes to white.This is of course to give you a visible idea of the text you are selecting.

So the default when you highlight text is for the background to turn blue and the text white, but did you know you can change those colors ? In fact I changed the style of text select on Spice Up Your Blog a few years ago and while I presume many of you may have noticed it, it was just last week someone Emailed me asking how I did it.In fact it just takes a small snippet of Css easily added to your blog to achieve the effect you can see an example of in the image below.

Example Of Default Blue Style And Style Changed To Red

I know it's a small change in the overall look of your blog but when set to match the color scheme of your site it is a neat feature.So if you too want to change the text select color of your blog to any color you choose we have tutorials for both Wordpress and Blogger Users.You can select text in this post to see how it is a different color (#990000) or check out the demo below with a rd style.

View Demo Button

Change Text Select Style On Wordpress


1) In Your Wordpress Dashboard Click 'Apperance' > 'Widgets' > Add A text Widget to your sidebar and paste in the code as shown in the video below :


Code :

::selection {color: white;background-color: red;}::-moz-selection {color: white;
background-color: red;}<a href="http://www.spiceupyourblog.com/">Tips For Bloggers</a>

Step 2) Save the gadget and your done.

Notes - Change The Colors (In Bold) To Suit Your Blog.

Change Text Select Style On Blogger


Step 1) In The New Blogger Dashboard Click The Drop Down For Your Blog > Choose Layout > Click Add A Gadget > Choose HTML/Javascript > Paste In The Code as shown in the video below :


Code :

::selection {color: white;background-color: red;}::-moz-selection {color: white;
background-color: red;}<a href="http://www.spiceupyourblog.com/">Tips For Bloggers</a>

Step 2) Save the gadget and your done.

Notes - Change The Colors (In Bold) To Suit Your Blog.

That's it a simple change that looks great !

AuthorAuthor - Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.


If You Enjoyed This Post Please Take 5 Seconds To Share It.

Stay Connected With Free Updates

Subscribe via Email

15 comments:

  1. nice post paul, can you tell me how can i add hover effect on post titles?

    ReplyDelete
  2. "If you're a blogger" not "your"!

    Your welcome

    ReplyDelete
    Replies
    1. I love it, the Grammar police never take long to show up.Thanks for the heads up ! You're Great :)

      Delete
  3. Great tuto, thx for your time and for sharing with us

    ReplyDelete
  4. Hey Paul. As always thanks for this and I did notice your "make A Rollover Image Effect" post which I will try next. I am on wordpress and used to using text widgets. Though I didn't put anything in the title and changed your url to mine (was that something I shouldn't have done?) the code shows up on my front page and doesn't work. Should I just leave your url in the code? Thanks again. You're great!!

    ReplyDelete
  5. Well, I tried it without changing the url (or color) and it didn't show up on my page but it didn't work even after refreshing the page. Tried it on some other pages as well. Hmmm. Thanks for your help as always!!

    ReplyDelete
  6. Nice..! n thnx for easy method....

    ReplyDelete
  7. That’s really cool. It’s something that most visitor would never see, but the ones that do would like to say that i am surprised by seeing this post. Thanks!!

    ReplyDelete
  8. Cool. very intresting! thank you my friend.

    ReplyDelete
  9. Hello,
    My requirement is bit different. I want certain text in my blog post which is different from normal text. It should be highlighted one, surrounded one etc.
    I currently use "pre" tag for highlighting those texts, but that are not so attractive.
    Please help me out.

    Thanks,
    Ashish
    https://fullsap.blogspot.in

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us