WordPress offers lots of plugins that comes handy but using lots of plugins may slow down your website and lead to plugin conflicts so here is a small piece of CSS code that you can use to highlight content using a feature box.
The below CSS code can be used to show a line or a paragraph in a colored box using HTML tags. Here is an example of how it looks,
Note: Please don’t use plugins for small things like this one which you can do it on your own which will make your website faster.
FEATUREd BOX CSS CODE
|
1 2 3 4 5 6 7 |
.feature-box { padding:15px; margin: 10px 0; background: #F5F5F5; border: 1px solid #DDDDDD; } |
Copy the above CSS code and paste it at the end of your style.css file of your current theme. To update your CSS File from wordpress dashboard just go to Dashboard > Appearance > Editor where you can find style.css file of your current theme.
How to Use the Featured Box in your Posts
In order to make the CSS code to work you need place your content inside a Div tag as shown below,
Your content Here
|
1 |
Alternatively you can also change the border and background color of the featured box from the CSS code see below example of colored featured box.
|
1 2 3 4 5 6 7 |
.feature-box-blue { padding:15px; margin: 10px 0; background: #c4ecff; border: 1px solid #1b97d1; } |
Your content Here
|
1 |
Note: Please don’t use plugins for small things like this one which you can do it on your own which will make your website faster.