Page 1 of 2

Important Notices BBCode

Posted: 08 Mar 2010, 19:22
by 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 623 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]

Re: Important Notices BBCode

Posted: 11 Apr 2010, 05:01
by 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.
:D

Re: Important Notices BBCode

Posted: 11 Apr 2010, 05:17
by Stoker
Lets turn it around :D
How many minutes do you need to test this yourself?

Re: Important Notices BBCode

Posted: 11 Apr 2010, 05:50
by wagu
:D YEAH very good :lol: :lol:

Re: Important Notices BBCode

Posted: 11 Apr 2010, 05:52
by cisco007
if you click on the second Spoiler "show" it tells you how to use each one individually!

Re: Important Notices BBCode

Posted: 11 Apr 2010, 05:58
by wagu
yes, I can change the name of bbcode but the idea is not add nothing to styles/prosilver/theme/colours.css
thanks

Re: Important Notices BBCode

Posted: 11 Apr 2010, 06:04
by 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!

Re: Important Notices BBCode

Posted: 11 Apr 2010, 06:24
by 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.

Re: Important Notices BBCode

Posted: 11 Apr 2010, 11:31
by neptune
very nice bbcode, thx

Re: Important Notices BBCode

Posted: 17 Apr 2010, 01:24
by neuropass
awesome but it doesn't work on my site.. i get nothing with the example posted there... no colors no images...