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> |