Just after publication of the previous post; one of our Tweeter follower asked, how we have highlighted certain words in that post. Actually, it is very easy, no big knowledge of coding or even installation of plugin is required.
In order to highlight and add effects to certain words in your WordPress blog in WordPress, just follow these easy steps. We will use span style to indicate the browser that this part of text has given special CSS treatment.
Highlighting the text using CSS
Firstly, you need a good (and free of course) software that gives you the hex value of the color you need. As we always say, colorpic is best software for this purpose. So, you got the hex value of the color you need. For example, the hex value of the blue sidebar in the right side of this page is #E9EEF3.
To highlight a text, write it ; then go to HTML mode in WordPress writing panel. Say you want to highlight black (that is the usual text color you are using; if you want to use white text on black background, this code will not affect your other things; it will simply highlight the text with specified color) text with that blue color. For example, the text is “I want to highlight the text in WordPress.”
You have to write in this manner (in HTML mode!) :
<span style="background:<span style="color: #ff0000;">#E9EEF3</span>">I want to highlight the text in Wordpress.</span>
The red colored hex value is determinant of what color you want. The output of the above will be like this:
I want to highlight the text in WordPress.
CSS effects to certain words
Obviously, you can add colored text inside that highlighted text. It can be done by selecting the part of the text and using text color from text editor (normal mode) in WordPress. Formatting as bold, italics font can be done in the same manner. This is an example:
---
I want to highlighted the text in WordPress.
Now, if you want more advanced effects; like pressed text effect to certain texts; using a different font, changing the font size, converting to uppercase (for mass editing), add margin, padding etc; you can do it too. Below is an example where we have formated the text to these following effects:
I want to highlight the text in WordPress.
We used this thing (really big, but we will explain) instead of only background: #E9EEF3; inside the quotation marks:
background-color: #e9eef3; font-color: #000000 font-size; font-family: Arial,Tahoma,Verdana; font-weight: bold; text-shadow: #fff 1px 1px; text-transform: uppercase; margin: 0 0 5px 0; padding: 0;"
Explanation:
- background-color: #e9eef3; Nothing to explain, instead of background, we have used “background-color”.
- font-color: #000000;This defines the color of the font. #000000 is black.
- font-family: Arial,Tahoma,Verdana;This defines the font family.
- font-weight: bold; Self explanatory, we made it bold.
- text-shadow: #fff 1px 1px; We gave the pressed text effect using white color (#FFFFFF= #fff = White) of 1 pixel.
- <span style="color: #ff0000;">text-transform: uppercase; margin: 0 0 5px 0; padding: 0;</span> : We think you have understood the things! We made it uppercase, with 5px margin on the left side and no padding.
This is it, these are basically very easy.
