Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5

CSS Boxes (Info,Success,Warning...)

#1
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.
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  [Tutorial] Collapsible boxes using only CSS and HTML SpookyZalost 2 4,792 October 5th, 2018 at 3:18 PM
Last Post: SpookyZalost



Users browsing this thread: 1 Guest(s)

Dark/Light Theme Selector

Contact Us | Makestation | Return to Top | Lite (Archive) Mode | RSS Syndication 
Proudly powered by MyBB 1.8, © 2002-2024
Forum design by Makestation Team © 2013-2024