4/07/2011

How to customize your blog's selection/highlight text

4/07/2011

This post will help you to customize your regular mainstream text selection into your own preference and style that will fit your blog template perfectly.

Change background color (click here for preview)

The original color of text selection is in this very boring blue. Of course, you can change the whole mood of your blog by changing it to another color! Follow these easy steps:

1. Go to Template and then click Edit HTML
2. Find  ]]></b:skin>  or </style> for classic template)
3. Paste this codes above/before the codes that you have found just now.
 ::-moz-selection {
background:#ddd0d0;
color:#000000;
}
::selection {
background:#ddd0d0;
color:#000000;
}
You may change the color of the font and the background of your blog text selection to you own colors. To get the color hex, you can use this site for reference - Colorpicker (the simplest and most functional site I've ever found) and the easiest way of choosing colors is by installing Color Zilla onto your browser.

Adding Text Shadow (click here for preview

Basically, the way of applying this look is the same as the steps given in changing background version, with different codes. 

::-moz-selection {
background:#E0F8F7;
color:#000000;
}
::selection {
text-shadow: 1px 1px 1px #999999;
color:#000000;
}

In addition to it, you can customize the shadow's color too!

Goodluck in designing your blog. For any questions and suggestions, you may comment down below :)