Choose from our various pricing plans. There is a package for everyone!


BBcode Notification Boxes

View previous topic View next topic Go down

Tutorial BBcode Notification Boxes

Post by Mati™ on Tue Jul 31, 2012 2:15 pm

In this tutorial I will show you how to put notification boxes on your message with BBcode only:

Code:

[table style="background: url('http://cdn1.iconfinder.com/data/icons/musthave/24/Information.png') no-repeat 6px #d1e4f3; border: 1px solid #4d8fcb; color: #00529B; padding: 6px 6px 6px 40px; width: 99%; text-shadow: 0 1px 0 #FFFAF1; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset; font-weight: bold; border-radius: 3px 3px 3px 3px;"][tr][td]Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here... [/td][/tr][/table]

[table style="background: url('http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0020/accept.png') no-repeat 6px #effeb9; border: 1px solid #9ac601; color: #4F8A10; padding: 6px 6px 6px 40px; width: 99%; text-shadow: 0 1px 0 #FFFAF1; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset; font-weight: bold; border-radius: 3px 3px 3px 3px;"][tr][td]Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here... [/td][/tr][/table]

[table style="background: url('http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0400/error.png') no-repeat 6px #ffeaa9; border: 1px solid #f9b516; color: #9F6000; padding: 6px 6px 6px 40px; width: 99%; text-shadow: 0 1px 0 #FFFAF1; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset; font-weight: bold; border-radius: 3px 3px 3px 3px;"][tr][td]Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here... [/td][/tr][/table]

[table style="background: url('http://cdn1.iconfinder.com/data/icons/CrystalClear/32x32/actions/messagebox_critical.png') no-repeat 6px #fccac3; border: 1px solid #db3f23; color: #D8000C; padding: 6px 6px 6px 40px; width: 99%; text-shadow: 0 1px 0 #FFFAF1; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset; font-weight: bold; border-radius: 3px 3px 3px 3px;"][tr][td]Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here... [/td][/tr][/table]

[table style="background: url('http://cdn2.iconfinder.com/data/icons/fugue/bonus/icons-32/mail.png') no-repeat 6px #F2F2F2; border: 1px solid #AAAAAA; color: #545454; padding: 6px 6px 6px 40px; width: 99%; text-shadow: 0 1px 0 #FFFAF1; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset; font-weight: bold; border-radius: 3px 3px 3px 3px;"][tr][td]Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here... [/td][/tr][/table]

[table style="background: url('http://cdn5.iconfinder.com/data/icons/woocons1/Light%20Bulb%20On.png') no-repeat 6px #FEEAC9; border: 1px solid #D38E49; color: #bb640c; padding: 6px 6px 6px 40px; width: 99%; text-shadow: 0 1px 0 #FFFAF1; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset; font-weight: bold; border-radius: 3px 3px 3px 3px;"][tr][td]Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here... [/td][/tr][/table]

[table style="background: url('http://cdn2.iconfinder.com/data/icons/drf/PNG/iChat.png') no-repeat 6px #daecfb; border: 1px solid #2078c9; color: #066ac4; padding: 6px 6px 6px 40px; width: 99%; text-shadow: 0 1px 0 #FFFAF1; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset; font-weight: bold; border-radius: 3px 3px 3px 3px;"][tr][td]Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here... [/td][/tr][/table]

[table style="background: url('http://i32.servimg.com/u/f32/14/52/65/41/page_c10.png') no-repeat 6px #D7F8AC; border: 1px solid #149525; color: #7CC104; padding: 6px 6px 6px 40px; width: 99%; text-shadow: 0 1px 0 #FFFAF1; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset; font-weight: bold; border-radius: 3px 3px 3px 3px;"][tr][td]Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here... [/td][/tr][/table]

Live Demo of BBcode:

Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...
Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...
Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...
Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...
Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...
Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...
Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...
Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...

The Icons
These icons are from Iconfinder. Please visit the site for more icons.

If you have any questions please let me know. Thanks and enjoy! Smile


Last edited by Mati™ on Sat Nov 15, 2014 2:13 am; edited 3 times in total
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by Mr.Joker on Tue Jul 31, 2012 2:19 pm

I like this, even I know how to do this before still it's great to share Very Happy


Please read forum rules. Don't request help via PM!

avatar
Mr.Joker
Premium Member


Age : 24
Posts : 283
Join date : 2012-06-24
Reputation : 21

View user profile

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by Mati™ on Tue Jul 31, 2012 2:27 pm

Thanks Mr.Joker, and I like shearing with friends xD
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by Leo on Tue Jul 31, 2012 6:55 pm

Does this go in CSS?
avatar
Leo
Member
Member

Age : 20
Posts : 196
Join date : 2012-07-10
Reputation : 4

View user profile

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by Mati™ on Tue Jul 31, 2012 6:58 pm

No, in your post try this here or in your forum.

Code:
[table style="background: url('http://cdn1.iconfinder.com/data/icons/musthave/24/Information.png') no-repeat 6px #d1e4f3; border: 1px solid #4d8fcb; color: #00529B; padding: 6px 6px 6px 40px; width: 99%; text-shadow: 0 1px 0 #FFFAF1; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset; font-weight: bold; border-radius: 3px 3px 3px 3px;"][tr][td]Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here... [/td][/tr][/table]
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by Leo on Tue Jul 31, 2012 7:02 pm

Matti wrote:No, in your post try this here or in your forum.

Code:
[table style="background: url('http://cdn1.iconfinder.com/data/icons/musthave/24/Information.png') no-repeat 6px #d1e4f3; border: 1px solid #4d8fcb; color: #00529B; padding: 6px 6px 6px 40px; width: 99%; text-shadow: 0 1px 0 #FFFAF1; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset; font-weight: bold; border-radius: 3px 3px 3px 3px;"][tr][td]Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here... [/td][/tr][/table]

Ahh okay I see. This is good.
avatar
Leo
Member
Member

Age : 20
Posts : 196
Join date : 2012-07-10
Reputation : 4

View user profile

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by AM99 on Tue Jul 31, 2012 7:08 pm

Always wanted to know how to do this,
thanks for sharing Very Happy
avatar
AM99
Member
Member

Age : 27
Posts : 152
Join date : 2012-07-27
Reputation : 2

View user profile

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by L! on Tue Jul 31, 2012 11:28 pm

Really nice tutorial. And nice work about these boxes! Smile


Want to make money online? PM Me! Wink

avatar
L!
Premium Member


Age : 19
Posts : 105
Join date : 2012-07-05
Reputation : 5

View user profile http://www.ldevelopment.org/

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by tommycoo on Mon Aug 20, 2012 4:24 am

can u make it for BBcode ?
avatar
tommycoo
Member
Member

Age : 21
Posts : 60
Join date : 2012-08-20
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by Eclipse on Mon Aug 20, 2012 4:25 am

@tommycoo wrote:can u make it for BBcode ?

What are you asking? It is BBcode..?




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by tommycoo on Mon Aug 20, 2012 4:43 am

yup something like .. [warning]content here[/warning]

and it will be like this
Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...
avatar
tommycoo
Member
Member

Age : 21
Posts : 60
Join date : 2012-08-20
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by Eclipse on Mon Aug 20, 2012 5:45 am

I don't think that is possible, or it is, but advanced coding maybe




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by Mati™ on Mon Aug 20, 2012 8:25 am

Not possible on FM you need to use table.
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by koolkat96 on Fri Apr 05, 2013 1:06 pm

Nice! Very Happy

Thanks and can I use this on my forum?
avatar
koolkat96
Member
Member

Age : 21
Posts : 3
Join date : 2013-04-05
Reputation : 0

View user profile http://houkago-tea-time.forumakers.com/

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by Th1nK on Fri Apr 05, 2013 2:48 pm

@koolkat96 wrote:Nice! Very Happy

Thanks and can I use this on my forum?
Yes!
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by refresh101 on Mon May 13, 2013 8:34 am

Hello How Can I Change The Background Color To Black?
avatar
refresh101
Member
Member

Age : 27
Posts : 18
Join date : 2013-05-03
Forum Version : PhpBB2
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by Mati™ on Mon May 13, 2013 11:51 am

Find those parts background: url('http://cdn1.iconfinder.com/data/icons/musthave/24/Information.png') no-repeat 6px #d1e4f3; and change the bg color
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by refresh101 on Mon May 13, 2013 2:42 pm

DELETED


Last edited by refresh101 on Mon May 13, 2013 4:08 pm; edited 1 time in total
avatar
refresh101
Member
Member

Age : 27
Posts : 18
Join date : 2013-05-03
Forum Version : PhpBB2
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by refresh101 on Mon May 13, 2013 3:43 pm

Why Is It Working Here And Mine Not Working?

Mine:

SomeOne Help Sad
avatar
refresh101
Member
Member

Age : 27
Posts : 18
Join date : 2013-05-03
Forum Version : PhpBB2
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by Geek1 on Sat Nov 30, 2013 4:57 am

Hey man!
I love those boxes and they work great for me, got my whole Staff Team to use them!
Is their one that's yellow with a lock that I could use for my forums? Smile
avatar
Geek1
Member
Member

Age : 19
Posts : 4
Join date : 2013-11-30
Forum Version : PunBB
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: BBcode Notification Boxes

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum