(SOS) BBCodes Warning, Success, Information and Error for VB4

[preemz10314]

Description:

A set of professional looking BBCode Warning, Success, Information, and Error boxes.


Note:

These BBCodes were created for IPBoard by a user named Fellon.
I take no credit for the coding of these BBCodes. I just seen these for IPBoard, and decided to find a way to Port them over to my Vbulletin Board. So I figured I would share this with the community.


Installation:

1)Upload the contents of the "upload" folder to your forum root
2)Go to: AdminCP>Custom BB Codes>Add New BB Code
3)Type in the following Info:

Success BB Code:

Title

Success

BB Code Tag Name

success

Replacement


<div class="noticeui noticeui-success">
<h5>{option}</h5>
<p>{param}</p>

<span></span>
</div>
<style type="text/css">
.noticeui
{
background: url(http://img638.imageshack.us/img638/4026/noticebg.png) repeat-x 0 0;
color: #FFF;
width: 83%;
font-weight: normal;
padding: 13px 15px 0;
margin-bottom: 2.5em;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
box-shadow: 1px 1px 2px rgba(0,0,0,.4);
position: relative;
left: 34px;
}

.noticeui p { margin-bottom: 1.5em; }
.noticeui p:last-child { margin-bottom: 0; }

.noticeui ul { margin-left: 8px; margin-bottom: 1.5em; }
.noticeui ul:last-child { margin-bottom: 0; }

.noticeui li { background: url(http://img59.imageshack.us/img59/9923/noticetabs.png) no-repeat 0 -95px; list-style-type: none; padding-left: 18px; margin-bottom: .75em; }
.noticeui-success li { background-position: 0 -95px; }
.noticeui-warn li { background-position: 0 -895px; }
.noticeui-error li { background-position: 0 -495px; }
.noticeui-info li { background-position: 0 -1295px; }

.noticeui h5 { font-size: 14px; font-weight: bold; margin-bottom: .65em; }

.noticeui span { background: url(http://img59.imageshack.us/img59/9923/noticetabs.png) no-repeat 100% 0; width: 33px; height: 40px; position: absolute; left: -34px; top: 9px; }

.noticeui-success { background-color: #EEF4D4; color: #596C26; border: 1px solid #8FAD3D; }
.noticeui-success span { background-position: 100% 0; }
.noticeui-warn { background-color: #FFEA97; color: #796100; border: 1px solid #E1B500; }
.noticeui-warn span { background-position: 100% -800px; }
.noticeui-error { background-color: #EFCEC9; color: #933628; border: 1px solid #AE3F2F; }
.noticeui-error span { background-position: 100% -400px; }
.noticeui-info { background-color: #C6D8F0; color: #285797; border: 1px solid #4381CD; }
.noticeui-info span { background-position: 100% -1200px; }
}
</style>


Example

Content


Description

Success BB Code Box


Use {option}: YES

Button Image

images/infoibe.png

Remove Tag If Empty: YES

Disable BB Code Within This BB Code: NO

Disable Smilies Within This BB Code: YES

Disable Word Wrapping Within This BB Code: NO

Disable Automatic Link Parsing Within This BB Code: NO

SAVE

-----------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------

Error BB Code:

Title

Error

BB Code Tag Name

error

Replacement


<div class="noticeui noticeui-error">
<h5>{option}</h5>
<p>{param}</p>

<span></span>
</div>
<style type="text/css">
.noticeui
{
background: url(http://img638.imageshack.us/img638/4026/noticebg.png) repeat-x 0 0;
color: #FFF;
width: 83%;
font-weight: normal;
padding: 13px 15px 0;
margin-bottom: 2.5em;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
box-shadow: 1px 1px 2px rgba(0,0,0,.4);
position: relative;
left: 34px;
}

.noticeui p { margin-bottom: 1.5em; }
.noticeui p:last-child { margin-bottom: 0; }

.noticeui ul { margin-left: 8px; margin-bottom: 1.5em; }
.noticeui ul:last-child { margin-bottom: 0; }

.noticeui li { background: url(http://img59.imageshack.us/img59/9923/noticetabs.png) no-repeat 0 -95px; list-style-type: none; padding-left: 18px; margin-bottom: .75em; }
.noticeui-success li { background-position: 0 -95px; }
.noticeui-warn li { background-position: 0 -895px; }
.noticeui-error li { background-position: 0 -495px; }
.noticeui-info li { background-position: 0 -1295px; }

.noticeui h5 { font-size: 14px; font-weight: bold; margin-bottom: .65em; }

.noticeui span { background: url(http://img59.imageshack.us/img59/9923/noticetabs.png) no-repeat 100% 0; width: 33px; height: 40px; position: absolute; left: -34px; top: 9px; }

.noticeui-success { background-color: #EEF4D4; color: #596C26; border: 1px solid #8FAD3D; }
.noticeui-success span { background-position: 100% 0; }
.noticeui-warn { background-color: #FFEA97; color: #796100; border: 1px solid #E1B500; }
.noticeui-warn span { background-position: 100% -800px; }
.noticeui-error { background-color: #EFCEC9; color: #933628; border: 1px solid #AE3F2F; }
.noticeui-error span { background-position: 100% -400px; }
.noticeui-info { background-color: #C6D8F0; color: #285797; border: 1px solid #4381CD; }
.noticeui-info span { background-position: 100% -1200px; }
}
</style>


Example

Content


Description

Error BB Code Box


Use {option}: YES

Button Image

images/infoibe.png

Remove Tag If Empty: YES

Disable BB Code Within This BB Code: NO

Disable Smilies Within This BB Code: YES

Disable Word Wrapping Within This BB Code: NO

Disable Automatic Link Parsing Within This BB Code: NO

SAVE
----------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------

Information BB Code:

Title

Information

BB Code Tag Name

info

Replacement


<div class="noticeui noticeui-info">
<h5>{option}</h5>
<p>{param}</p>

<span></span>
</div>
<style type="text/css">
.noticeui
{
background: url(http://img638.imageshack.us/img638/4026/noticebg.png) repeat-x 0 0;
color: #FFF;
width: 83%;
font-weight: normal;
padding: 13px 15px 0;
margin-bottom: 2.5em;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
box-shadow: 1px 1px 2px rgba(0,0,0,.4);
position: relative;
left: 34px;
}

.noticeui p { margin-bottom: 1.5em; }
.noticeui p:last-child { margin-bottom: 0; }

.noticeui ul { margin-left: 8px; margin-bottom: 1.5em; }
.noticeui ul:last-child { margin-bottom: 0; }

.noticeui li { background: url(http://img59.imageshack.us/img59/9923/noticetabs.png) no-repeat 0 -95px; list-style-type: none; padding-left: 18px; margin-bottom: .75em; }
.noticeui-success li { background-position: 0 -95px; }
.noticeui-warn li { background-position: 0 -895px; }
.noticeui-error li { background-position: 0 -495px; }
.noticeui-info li { background-position: 0 -1295px; }

.noticeui h5 { font-size: 14px; font-weight: bold; margin-bottom: .65em; }

.noticeui span { background: url(http://img59.imageshack.us/img59/9923/noticetabs.png) no-repeat 100% 0; width: 33px; height: 40px; position: absolute; left: -34px; top: 9px; }

.noticeui-success { background-color: #EEF4D4; color: #596C26; border: 1px solid #8FAD3D; }
.noticeui-success span { background-position: 100% 0; }
.noticeui-warn { background-color: #FFEA97; color: #796100; border: 1px solid #E1B500; }
.noticeui-warn span { background-position: 100% -800px; }
.noticeui-error { background-color: #EFCEC9; color: #933628; border: 1px solid #AE3F2F; }
.noticeui-error span { background-position: 100% -400px; }
.noticeui-info { background-color: #C6D8F0; color: #285797; border: 1px solid #4381CD; }
.noticeui-info span { background-position: 100% -1200px; }
}
</style>


Example

Content


Description

Information BB Code Box


Use {option}: YES

Button Image

images/infoibe.png

Remove Tag If Empty: YES

Disable BB Code Within This BB Code: NO

Disable Smilies Within This BB Code: YES

Disable Word Wrapping Within This BB Code: NO

Disable Automatic Link Parsing Within This BB Code: NO

SAVE

-----------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------

Warning BB Code:

Title

Warning

BB Code Tag Name

warn

Replacement


<div class="noticeui noticeui-warn">
<h5>{option}</h5>
<p>{param}</p>

<span></span>
</div>
<style type="text/css">
.noticeui
{
background: url(http://img638.imageshack.us/img638/4026/noticebg.png) repeat-x 0 0;
color: #FFF;
width: 83%;
font-weight: normal;
padding: 13px 15px 0;
margin-bottom: 2.5em;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
box-shadow: 1px 1px 2px rgba(0,0,0,.4);
position: relative;
left: 34px;
}

.noticeui p { margin-bottom: 1.5em; }
.noticeui p:last-child { margin-bottom: 0; }

.noticeui ul { margin-left: 8px; margin-bottom: 1.5em; }
.noticeui ul:last-child { margin-bottom: 0; }

.noticeui li { background: url(http://img59.imageshack.us/img59/9923/noticetabs.png) no-repeat 0 -95px; list-style-type: none; padding-left: 18px; margin-bottom: .75em; }
.noticeui-success li { background-position: 0 -95px; }
.noticeui-warn li { background-position: 0 -895px; }
.noticeui-error li { background-position: 0 -495px; }
.noticeui-info li { background-position: 0 -1295px; }

.noticeui h5 { font-size: 14px; font-weight: bold; margin-bottom: .65em; }

.noticeui span { background: url(http://img59.imageshack.us/img59/9923/noticetabs.png) no-repeat 100% 0; width: 33px; height: 40px; position: absolute; left: -34px; top: 9px; }

.noticeui-success { background-color: #EEF4D4; color: #596C26; border: 1px solid #8FAD3D; }
.noticeui-success span { background-position: 100% 0; }
.noticeui-warn { background-color: #FFEA97; color: #796100; border: 1px solid #E1B500; }
.noticeui-warn span { background-position: 100% -800px; }
.noticeui-error { background-color: #EFCEC9; color: #933628; border: 1px solid #AE3F2F; }
.noticeui-error span { background-position: 100% -400px; }
.noticeui-info { background-color: #C6D8F0; color: #285797; border: 1px solid #4381CD; }
.noticeui-info span { background-position: 100% -1200px; }
}
</style>


Example

Content


Description

Warning BB Code Box


Use {option}: YES

Button Image

images/infoibe.png

Remove Tag If Empty: YES

Disable BB Code Within This BB Code: NO

Disable Smilies Within This BB Code: YES

Disable Word Wrapping Within This BB Code: NO

Disable Automatic Link Parsing Within This BB Code: NO

SAVE

-----------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------

NOTE: You could also download Advanced BB Code Permissions (https://vborg.vbsupport.ru/showthread.php?t=122942) for Vbulletin 3.6. You can make it so that only your STAFF has access to these BB Codes. I can confirm, that the Advanced BB Code Permissions work on Vbulletin 4.2.1.

[RedTurtle]

Seems pretty cool but would recommend not linking to images on imageshack. They may disappear in the future and break the entire mod.

[preemz10314]

Seems pretty cool but would recommend not linking to images on imageshack. They may disappear in the future and break the entire mod.


I agree. But this Mod was made a really long time ago, and that was the original coders work. All I did was port it to Vbulletin.

However, I guess I could change the coding and link to the images on the server, instead of imageshack. Ill update this tomorrow with the code changes.

[ckgb]

I like it )) Images are easy to move.

[thetechgenius]

Here are the images. Just put them in "forum_root/images/" .

You will also need to edit the CSS in the BBCodes and change the image URLs, there are only 3 URLs you need to change in each BBCode.

I also included 4 BBCode button images for the BBCodes. When you link the button image when you create the BBCode, type: "images/infoibe_error.png" or which ever image you are using for the BBCode.

images/infoibe_error.png = Error BBCode Button Image
images/infoibe_success.png = Success BBCode Button Image

You get the idea. lol

[Marv]

Hey, that´s nice. But is it possible to restrict the use (and display of the buttons) to certain usergroups?

[thetechgenius]

Hey, that?s nice. But is it possible to restrict the use (and display of the buttons) to certain usergroups?

Yes you can, at the end of the First Post he posted a link to Advanced BB Code Permissions (https://vborg.vbsupport.ru/showthread.php?t=122942). That mod was made for 3.6.x, but I can confirm that it does work for 4.1.x to 4.2.x.

[Dr. HaZaRd]

Big problems with Imageshack! When I use this bbcode appear imageshack logo and text!

This: http://img59.imageshack.us/img59/9923/noticetabs.png

Someone can provide original images please?

Thanks! ;)

[thetechgenius]

Big problems with Imageshack! When I use this bbcode appear imageshack logo and text!

This: http://img59.imageshack.us/img59/9923/noticetabs.png

Someone can provide original images please?

Thanks! ;)

2 posts up, I posted the images.

Here is the direct link to my post:

https://vborg.vbsupport.ru/showpost.php?p=2507473&postcount=5

[Cem01]

Just edit imageshack parts of codes.
I like the design of these boxes much.
It has worked on vB 4.2.3. Thanks!

[mobster46]

I have suggestions:

I think the message should go out when you edit the message.

[Elixar]

I have suggestions:

I think the message should go out when you edit the message.

You mean for the message to disappear when you edit it?

[IggyP]

ive noticed some issues in this with some common bbcodes.....

for example fonts.....or tables.....i know at least those 2 dont work....shoves them outside the box in a mess at top left....

any ideas on fixes?

thanks