How to change the highlight colour of your Tumblr page

Aug 2014

Changing the highlight colour of your Tumblr page is extremely easy and requires minimal ability to navigate your theme’s HTML in order to implement it.

Open up the ‘Edit HTML’ option in your tumblr customisation window and search for the start of the inline css. You need to ensure that you are writing the following code underneath the <style> tag. It may also been written as <style type=“text/css”>.

Place the following code anywhere underneath this opening tag. I usually position it after the body { #CONTENT } styling in order to allow me to find it easier but this is down to personal preference.

::-moz-selection { 
    background: #COLOUR-HEXADECIMAL-VALUE-HERE; 
}
::selection { 
    background: #COLOUR-HEXADECIMAL-VALUE-HERE; 
}

Replace everything after the hashtags with the colour hexadecimal value of your choice. That’s pretty much it.

*You may also want to change the text colour when highlighting it to avoid something ugly.

To do this, add color: #TEXT-COLOUR-CHOICE-HERE; on the line after the background value.

This will ensure that the text is still legible with the highlight colour if it’s a strong colour that clashes.

Your final code will look something like this:

::-moz-selection { 
    background: #c0392b; 
    color: #000;
}
    
::selection { 
    background: #c0392b; 
    color: #000;
}

Done!