we all make custom design joomla templates for projects. sometimes it happend that we ignore the most basic things in our design or forgot to add them in our css say e.g joomla alert box styling and it really takes additional time to make a good style alert box same like joomla alert box. in that case use the below css to make a alert box. you can change the color values to make it suite according to your need.
/* Alert box css */
.alert {
padding: 8px 14px 8px 14px;
margin-bottom: 18px;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.alert,
.alert h4 {
color: #c09853;
}
.alert h4 {
margin: 0 0 .5em;
}
.alert .close {
position: relative;
top: -2px;
right: 5px;
line-height: 18px;
float:right;
}
.alert-success {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #468847;
}
.alert-success h4 {
color: #468847;
}
.alert-danger,
.alert-error {
background-color: #f2dede;
border-color: #eed3d7;
color: #b94a48;
}
.alert-danger h4,
.alert-error h4 {
color: #b94a48;
}
.alert-info {
background-color: #d9edf7;
border-color: #bce8f1;
color: #3a87ad;
}
.alert-info h4 {
color: #3a87ad;
}
.alert-block {
padding-top: 14px;
padding-bottom: 14px;
}
.alert-block > p,
.alert-block > ul {
margin-bottom: 0;
}
.alert-block p + p {
margin-top: 5px;
}