Important Notices BBCode

[BBCode Bot]

Important Notices BBCode

Author: Corey
Description: The Important Notices BBCode allows you to post eye catching notices to denote important messages to your users.
Attached file:

notices.zip

(4.22 KiB) Downloaded 640 times

Download, unzip and upload the entire notices folder to your themes images folder.

Instructions:
Open styles/prosilver/theme/colours.css
At the bottom add:

Code: Select all

span.attention, span.notice, span.alert, span.download, span.approved, span.media, span.note, span.cart, span.camera, span.doc {display: block;padding: 8px 10px 8px 36px;margin: 15px 0;}
span.attention {color: #B79000;border: 1px solid #E7BD72;background: #FFF3A3 url("{T_THEME_PATH}/images/notices/attention.png") 10px 50% no-repeat;}
span.notice {color: #648434;border: 1px solid #9BCC54;background: #CDEFA6 url("{T_THEME_PATH}/images/notices/notice.png") 10px 50% no-repeat;}
span.alert {color: #CF3738;border: 1px solid #FFACAD;background: #FFD5D5 url("{T_THEME_PATH}/images/notices/alert.png") 10px 50% no-repeat;}
span.download {color: #1C6B8B;border: 1px solid #6ABCE2;background: #A8CDE3 url("{T_THEME_PATH}/images/notices/download.png") 10px 50% no-repeat;}
span.approved {color: #666;border: 1px solid #a8a8a8;background: #ccc url("{T_THEME_PATH}/images/notices/approved.png") 10px 50% no-repeat;}
span.media {color: #C76E34;border: 1px solid #FFBB65;background: #FFE0B6 url("{T_THEME_PATH}/images/notices/media.png") 10px 50% no-repeat;}
span.note {color: #B79000;border: 1px solid #E7BD72;background: #FFF3A3 url("{T_THEME_PATH}/images/notices/note.png") 10px 50% no-repeat;}
span.cart {color: #666;border: 1px solid #C5C5C5;background: #E6E6E6 url("{T_THEME_PATH}/images/notices/cart.png") 10px 50% no-repeat;}
span.camera {color: #666;border: 1px solid #C5C5C5;background: #E6E6E6 url("{T_THEME_PATH}/images/notices/camera.png") 10px 50% no-repeat;}
span.doc {color: #C76E34;border: 1px solid #FFBB65;background: #FFE0B6 url("{T_THEME_PATH}/images/notices/doc.png") 10px 50% no-repeat;}

Open styles/subsilver2/theme/stylesheet.css
At the bottom add:

Code: Select all

span.attention, span.notice, span.alert, span.download, span.approved, span.media, span.note, span.cart, span.camera, span.doc {display: block;padding: 8px 10px 8px 36px;margin: 15px 0;}
span.attention {color: #B79000;border: 1px solid #E7BD72;background: #FFF3A3 url('./images/notices/attention.png') 10px 50% no-repeat;}
span.notice {color: #648434;border: 1px solid #9BCC54;background: #CDEFA6 url('./images/notices/notice.png') 10px 50% no-repeat;}
span.alert {color: #CF3738;border: 1px solid #FFACAD;background: #FFD5D5 url('./images/notices/alert.png') 10px 50% no-repeat;}
span.download {color: #1C6B8B;border: 1px solid #6ABCE2;background: #A8CDE3 url('./images/notices/download.png') 10px 50% no-repeat;}
span.approved {color: #666;border: 1px solid #a8a8a8;background: #ccc url('./images/notices/approved.png') 10px 50% no-repeat;}
span.media {color: #C76E34;border: 1px solid #FFBB65;background: #FFE0B6 url('./images/notices/media.png') 10px 50% no-repeat;}
span.note {color: #B79000;border: 1px solid #E7BD72;background: #FFF3A3 url('./images/notices/note.png') 10px 50% no-repeat;}
span.cart {color: #666;border: 1px solid #C5C5C5;background: #E6E6E6 url('./images/notices/cart.png') 10px 50% no-repeat;}
span.camera {color: #666;border: 1px solid #C5C5C5;background: #E6E6E6 url('./images/notices/camera.png') 10px 50% no-repeat;}
span.doc {color: #C76E34;border: 1px solid #FFBB65;background: #FFE0B6 url('./images/notices/doc.png') 10px 50% no-repeat;}

---

BBCode:

Code: Select all

[notice={IDENTIFIER}]{TEXT}[/notice]

HTML:

Code: Select all

<span class="{IDENTIFIER}">{TEXT}</span>

Helpline:

Code: Select all

Notice: [notice=class]Text[/notice]

Example:

Code: Select all

[notice=alert]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice]
[notice=approved]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice]
[notice=attention]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice]
[notice=camera]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice]
[notice=cart]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice]
[notice=doc]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice]
[notice=download]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice]
[notice=media]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice]
[notice=note]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice]
[notice=notice]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice]

Demo:
[spoiler][notice=alert]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice]
[notice=approved]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice]
[notice=attention]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice]
[notice=camera]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice]
[notice=cart]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice]
[notice=doc]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice]
[notice=download]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice]
[notice=media]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice]
[notice=note]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice]
[notice=notice]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/notice][/spoiler]

---

Instead of using one BBCode as we have done here, you can create a bbcode for each notice:

[spoiler]BBCode usage:

Code: Select all

[alert]{TEXT}[/alert]

HTML replacement:

Code: Select all

<span class="alert">{TEXT}</span>

Helpline:

Code: Select all

alert: [alert]...some text...[/alert]

Example:

Code: Select all

[alert]...some text...[/alert]

BBCode usage:

Code: Select all

[approved]{TEXT}[/approved]

HTML replacement:

Code: Select all

<span class="approved">{TEXT}</span>

Helpline:

Code: Select all

approved: [approved]...some text...[/approved]

Example:

Code: Select all

[approved]...some text...[/approved]

BBCode usage:

Code: Select all

[attention]{TEXT}[/attention]

HTML replacement:

Code: Select all

<span class="attention">{TEXT}</span>

Helpline:

Code: Select all

attention: [attention]...some text...[/attention]

Example:

Code: Select all

[attention]...some text...[/attention]

BBCode usage:

Code: Select all

[camera]{TEXT}[/camera]

HTML replacement:

Code: Select all

<span class="camera">{TEXT}</span>

Helpline:

Code: Select all

camera: [camera]...some text...[/camera]

Example:

Code: Select all

[camera]...some text...[/camera]

BBCode usage:

Code: Select all

[cart]{TEXT}[/cart]

HTML replacement:

Code: Select all

<span class="cart">{TEXT}</span>

Helpline:

Code: Select all

cart: [cart]...some text...[/cart]

Example:

Code: Select all

[cart]...some text...[/cart]

BBCode usage:

Code: Select all

[doc]{TEXT}[/doc]

HTML replacement:

Code: Select all

<span class="doc">{TEXT}</span>

Helpline:

Code: Select all

doc: [doc]...some text...[/doc]

Example:

Code: Select all

[doc]...some text...[/doc]

BBCode usage:

Code: Select all

[download]{TEXT}[/download]

HTML replacement:

Code: Select all

<span class="download">{TEXT}</span>

Helpline:

Code: Select all

download: [download]...some text...[/download]

Example:

Code: Select all

[download]...some text...[/download]

BBCode usage:

Code: Select all

[media]{TEXT}[/media]

HTML replacement:

Code: Select all

<span class="media">{TEXT}</span>

Helpline:

Code: Select all

media: [media]...some text...[/media]

Example:

Code: Select all

[media]...some text...[/media]

BBCode usage:

Code: Select all

[note]{TEXT}[/note]

HTML replacement:

Code: Select all

<span class="note">{TEXT}</span>

Helpline:

Code: Select all

note: [note]...some text...[/note]

Example:

Code: Select all

[note]...some text...[/note]

BBCode usage:

Code: Select all

[notice]{TEXT}[/notice]

HTML replacement:

Code: Select all

<span class="notice">{TEXT}</span>

Helpline:

Code: Select all

notice: [notice]...some text...[/notice]

Example:

Code: Select all

[notice]...some text...[/notice]

[/spoiler]

[wagu]

one question Can I use any images from this bbcode so this way I can create example a new bbcode like tipoinfo, example typoinfo2 and change the background color and using a rename image from this bbcde important notices bbcode?:

bbcode

Code: Select all

[typo_info2]{TEXT}[/typo_info2]

Html

Code: Select all

<p style="background: url(./images/info2.gif) center no-repeat; background-color:#F8FAFC ; background-position: 15px 50%;  padding-left: 8%; font-size: 13px; padding: 5px  20px 5px 45px; border-top: 2px solid #B5D4FE ; border-bottom: 2px solid #B5D4FE">{TEXT}</p>

HELPLINE

Code: Select all

Typo Info BBcode: [typo_info2]Your Text[/typo_info2]

in this part of code I can rename the image on my computer and then up to my folder images?:

Code: Select all

 url(./images/info2.gif)

I dont know IF Can understand to me cause my bad english but the idea is I can use separately bbcodes not all together.

[Stoker]

Lets turn it around
How many minutes do you need to test this yourself?

[wagu]

YEAH very good

[cisco007]

if you click on the second Spoiler "show" it tells you how to use each one individually!

[wagu]

yes, I can change the name of bbcode but the idea is not add nothing to styles/prosilver/theme/colours.css
thanks

[cisco007]

oh, i don't see why not, unless Stoker or the author say anything different i don't see why you can't modify it to your liking!

[wagu]

It better to use all the original bbcode important notices bbcode, the question is I use one mod call MSSTI ABBC3 v1012 and I was experimenting about this.

[neptune]

very nice bbcode, thx

[neuropass]

awesome but it doesn't work on my site.. i get nothing with the example posted there... no colors no images...