Makestation

Full Version: CSS Boxes (Info,Success,Warning...)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hello. I'll show you how to use boxes like this one in your mybb forum!
(Preview can be found here.)
Step 1: Go to: Admin CP/ Templates & Styles / Default /
global.css / Edit StyleSheet Advanced mode and paste this code:
Code:
.info, .success, .warning, .error, .mes, .tips, .chat, .cnb 
{
    margin: 10px 0px;
    padding: 10px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    border-radius: 4px 4px 4px;
}
.info {
    background-color: #d1e4f3;
    background-image: url("http://cdn1.iconfinder.com/data/icons/musthave/24/Information.png");
    color: #00529B;
    border: 1px solid #4d8fcb;
}
.success {
    background-color: #effeb9;
    background-image: url("http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0020/accept.png");
    color: #4F8A10;
    border: 1px solid #9ac601;
}
.warning {
    background-color: #ffeaa9;
    background-image: url("http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0400/error.png");
    color: #9F6000;
    border: 1px solid #f9b516;
}
.error {
    background-color: #fccac3;
    background-image: url("http://cdn1.iconfinder.com/data/icons/CrystalClear/32x32/actions/messagebox_critical.png");
    color: #D8000C;
    border: 1px solid #db3f23;
}
.mes {
    background-color: #F2F2F2;
    background-image: url("http://cdn2.iconfinder.com/data/icons/fugue/bonus/icons-32/mail.png");
    border: 1px solid #AAAAAA;
    color: #545454;
}
.tips {
    background-color: #FEEAC9;
    background-image: url("http://cdn5.iconfinder.com/data/icons/woocons1/Light%20Bulb%20On.png");
    border: 1px solid #D38E49;
    color: #bb640c;
}
.chat {
    background-color: #daecfb;
    background-image: url("http://cdn2.iconfinder.com/data/icons/drf/PNG/iChat.png");
    border: 1px solid #2078c9;
    color: #066ac4;
}
Don't forget to save it.
Step 2: Go to Admin CP / Configuration / Mycode / Add new MyCode and enter a title and a description.
Paste this to Regural Expression:
Code:
\[info\](.*?)\[/info\]
And this to Replacement:
Code:
<div class="info">$1</div>
Now Save it.
Step 3: Use this whenever you want to have that box in your post:
Code:
[info] Text here. [/info]

You can do this for info, success, warning, error, tips, mes and chat.
Just re-do the step 2 replacing the word "info" with one of the above.

Note: I didn't make the code for this nor the graphics. I just made the tutorial on how to do this for mybb.