Below is the CSS code to add colored content boxes to any WordPress theme.
| /* Colored content boxes */ | |
| .content-box-blue, | |
| .content-box-gray, | |
| .content-box-green, | |
| .content-box-purple, | |
| .content-box-red, | |
| .content-box-yellow { | |
| margin: 0 0 25px; | |
| overflow: hidden; | |
| padding: 20px; | |
| } | |
| .content-box-blue { | |
| background-color: #d8ecf7; | |
| border: 1px solid #afcde3; | |
| } | |
| .content-box-gray { | |
| background-color: #e2e2e2; | |
| border: 1px solid #bdbdbd; | |
| } | |
| .content-box-green { | |
| background-color: #d9edc2; | |
| border: 1px solid #b2ce96; | |
| } | |
| .content-box-purple { | |
| background-color: #e2e2f9; | |
| border: 1px solid #bebde9; | |
| } | |
| .content-box-red { | |
| background-color: #f9dbdb; | |
| border: 1px solid #e9b3b3; | |
| } | |
| .content-box-yellow { | |
| background-color: #fef5c4; | |
| border: 1px solid #fadf98; | |
| } |
The HTML code below shows how to wrap your custom text inside div tags with a class applied to it.
| <div class="content-box-blue">Enter content box text here.</div> |