Nice Looking Info Boxes

[Fayaman]

Sup 

This is a code i seen on IPB and XenForo so i decided to make the bbcode for MyBB also

Demo



=================================================================

Error Box

Regular Expression 

\[error\](.*?)\[/error\]

Replacement

<div style="color:#b94a48;background-color:#f2dede;padding:8px 35px 8px 14px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border:1px solid #eed3d7;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;">$1</div>

==================================================================


Info Box


Regular Expression

\[info\](.*?)\[/info\]

Replacement

<div style="color:#3a87ad;background-color:#d9edf7;padding:8px 35px 8px 14px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border:1px solid #bce8f1;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;">$1</div>

=============================================================


Success Box


Regular Expression

\[success\](.*?)\[/success\]

Replacement 

<div style="color:#468847;background-color:#dff0d8;padding:8px 35px 8px 14px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border:1px solid #d6e9c6;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;">$1</div>

=======================================================

Warning Box


Regular Expression

\[warning\](.*?)\[/warning\]

Replacement

<div style="color:#c09853;background-color:#fcf8e3;padding:8px 35px 8px 14px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border:1px solid #fbeed5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;">$1</div>

---

====================================================================================
====================================================================================


An alternative way and add this with image

Demo



Regular Expression

\[infobox\](.*?)\[/info\]

Replacement

<div class="infobox">$1</div>

now go to the theme global.css and at the end add

.infobox {
background: url(https://i.imgur.com/cvc4KbO.png) no-repeat top right;
color:#c09853;
background-color:#fcf8e3;
padding:8px 35px 8px 14px;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);
border:1px solid #fbeed5;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

Repeat for all boxes needed   I prefer this way sinds it cache better on my server setup.


http://jsfiddle.net/cLddt2sq/1/

THIS WILL ONLY WORK ON THE THEMES YOU ADDED THE CSS