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


Tutorial: CSS Notification Boxes

View previous topic View next topic Go down

Tutorial Tutorial: CSS Notification Boxes

Post by Mati™ on Sat Jun 23, 2012 1:36 pm

In this tutorial I will show you how to put or moderating members with notification boxes on your forum with CSS:

The CSS you put them into your AC-P => Display => Colors --> CSS Stylesheet:

The CSS
Code:

.info, .success, .warning, .error, .mes, .tips, .chat, .cnb {
    margin: 10px 0px;
    padding: 10px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    border-radius: 4px 4px 4px;
}

.info {
    background-color: #d1e4f3;
    background-image: url("http://cdn1.iconfinder.com/data/icons/musthave/24/Information.png");
    color: #00529B;
    border: 1px solid #4d8fcb;
}

.success {
    background-color: #effeb9;
    background-image: url("http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0020/accept.png");
    color: #4F8A10;
    border: 1px solid #9ac601;
}
.warning {
    background-color: #ffeaa9;
    background-image: url("http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0400/error.png");
    color: #9F6000;
    border: 1px solid #f9b516;
}
.error {
    background-color: #fccac3;
    background-image: url("http://cdn1.iconfinder.com/data/icons/CrystalClear/32x32/actions/messagebox_critical.png");
    color: #D8000C;
    border: 1px solid #db3f23;
}

.mes {
    background-color: #F2F2F2;
    background-image: url("http://cdn2.iconfinder.com/data/icons/fugue/bonus/icons-32/mail.png");
    border: 1px solid #AAAAAA;
    color: #545454;
}

.tips {
    background-color: #FEEAC9;
    background-image: url("http://cdn5.iconfinder.com/data/icons/woocons1/Light%20Bulb%20On.png");
    border: 1px solid #D38E49;
    color: #bb640c;
}

.chat {
    background-color: #daecfb;
    background-image: url("http://cdn2.iconfinder.com/data/icons/drf/PNG/iChat.png");
    border: 1px solid #2078c9;
    color: #066ac4;
}

The XHTML you put them in your message box.

The XHTML
Code:
<div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ante mauris, sagittis condimentum odio. Donec sodales magna</div>

<div class="success">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ante mauris, sagittis condimentum odio. Donec sodales magna</div>

<div class="warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ante mauris, sagittis condimentum odio. Donec sodales magna</div>

<div class="error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ante mauris, sagittis condimentum odio. Donec sodales magna</div>

<div class="tips">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ante mauris, sagittis condimentum odio. Donec sodales magna</div>

<div class="mes">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ante mauris, sagittis condimentum odio. Donec sodales magna</div>

<div class="chat">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ante mauris, sagittis condimentum odio. Donec sodales magna</div>

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

Screenshots
Spoiler:


Last edited by Matti on Sun Dec 29, 2013 7:17 am; edited 1 time 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: Tutorial: CSS Notification Boxes

Post by Th1nK on Sat Jun 23, 2012 2:31 pm

Awesome!
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: Tutorial: CSS Notification Boxes

Post by BlackNite on Sun Jun 24, 2012 6:24 am

i put xhtml to generalities?
avatar
BlackNite
Member
Member

Posts : 86
Join date : 2012-04-07
Reputation : 4

View user profile http://designforums.forumtl.com/

Back to top Go down

Tutorial Re: Tutorial: CSS Notification Boxes

Post by Dusan on Sun Jun 24, 2012 7:40 am

You put them in topics , or where ever you want Smile
avatar
Dusan
Member
Member

Age : 22
Posts : 711
Join date : 2012-06-08
Forum Version : PunBB
Reputation : 36

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

Back to top Go down

Tutorial Re: Tutorial: CSS Notification Boxes

Post by BlackNite on Sun Jun 24, 2012 9:00 am

but how??
avatar
BlackNite
Member
Member

Posts : 86
Join date : 2012-04-07
Reputation : 4

View user profile http://designforums.forumtl.com/

Back to top Go down

Tutorial Re: Tutorial: CSS Notification Boxes

Post by Th1nK on Sun Jun 24, 2012 9:02 am

Add the first code in your csss, the second code goes in your post!
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: Tutorial: CSS Notification Boxes

Post by BlackNite on Sun Jun 24, 2012 9:04 am

ah ok tnx a lot I thought it is going to put in javascript Smile
avatar
BlackNite
Member
Member

Posts : 86
Join date : 2012-04-07
Reputation : 4

View user profile http://designforums.forumtl.com/

Back to top Go down

Tutorial Re: Tutorial: CSS Notification Boxes

Post by RSguideMaker on Mon Jun 25, 2012 12:57 pm

This is a neat tutorial. I am actually using these on my forum Smile Thank you.



Please do not request help via PM! Post on the forums where it can help everyone.
avatar
RSguideMaker
Support Moderator
Support Moderator

Age : 18
Posts : 421
Join date : 2012-05-23
Reputation : 9

View user profile http://euanfitzpatrick.co.nf/

Back to top Go down

Tutorial Re: Tutorial: CSS Notification Boxes

Post by Leo on Tue Jul 10, 2012 6:03 pm

Pretty nice.
avatar
Leo
Member
Member

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

View user profile

Back to top Go down

Tutorial Re: Tutorial: CSS Notification Boxes

Post by Guest on Tue Jul 10, 2012 6:27 pm

Great Tutorial!

Guest
Guest


Back to top Go down

Tutorial Re: Tutorial: CSS Notification Boxes

Post by Eclipse on Tue Jul 24, 2012 12:50 am

didnt work




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: Tutorial: CSS Notification Boxes

Post by Dusan on Tue Jul 24, 2012 9:53 am

What didn't work?
avatar
Dusan
Member
Member

Age : 22
Posts : 711
Join date : 2012-06-08
Forum Version : PunBB
Reputation : 36

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

Back to top Go down

Tutorial Re: Tutorial: CSS Notification Boxes

Post by ashik4u on Mon Apr 22, 2013 5:48 pm

Not working. I have added the code on CSS and after that I have tried second one on a topic's reply. But, not working. Here is a screenshot



My forum url: http://www.bdtipsntricks.com/
version: punBB
avatar
ashik4u
Member
Member

Age : 24
Posts : 3
Join date : 2013-04-22
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Tutorial: CSS Notification Boxes

Post by MyEternalPain on Thu Apr 25, 2013 8:04 pm

Thank you for this awesome tutorial! I replaced mine with these <3
avatar
MyEternalPain
Member
Member

Age : 21
Posts : 4
Join date : 2013-04-25
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Tutorial: CSS Notification Boxes

Post by Mati™ on Thu Apr 25, 2013 8:11 pm

@ashik4u wrote:Not working. I have added the code on CSS and after that I have tried second one on a topic's reply. But, not working. Here is a screenshot



My forum url: http://www.bdtipsntricks.com/
version: punBB

Have you activate the HTML?
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: Tutorial: CSS Notification Boxes

Post by ashik4u on Thu Apr 25, 2013 8:59 pm

Matti wrote:
@ashik4u wrote:Not working. I have added the code on CSS and after that I have tried second one on a topic's reply. But, not working. Here is a screenshot



My forum url: http://www.bdtipsntricks.com/
version: punBB

Have you activate the HTML?

Yes, I already solved this and working! Thanks for reply. I love you
avatar
ashik4u
Member
Member

Age : 24
Posts : 3
Join date : 2013-04-22
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Tutorial: CSS Notification Boxes

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

Not Working Sad I Already On The HTML And Not Working Also I Already Put The CSS Sad
Only Showing The Text Only Sad

Test
<-- Like That Only Text 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: Tutorial: CSS Notification Boxes

Post by Irate on Mon May 13, 2013 5:39 pm

@refresh101 wrote:Not Working Sad I Already On The HTML And Not Working Also I Already Put The CSS Sad
Only Showing The Text Only Sad

Test
<-- Like That Only Text Sad

Try to do the same with a table.class, like this...

Code:
<table class="warning"><tr><td>Warning awarded to member.</td></tr></table>
avatar
Irate
Member
Member

Age : 21
Posts : 91
Join date : 2013-05-01
Forum Version : PhpBB2
Reputation : 2

View user profile http://duelacademy.net

Back to top Go down

Tutorial Re: Tutorial: CSS Notification Boxes

Post by refresh101 on Tue May 14, 2013 2:52 am

Not Working 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: Tutorial: CSS Notification Boxes

Post by Irate on Tue May 14, 2013 6:40 am

What's your CSS for .warning?
avatar
Irate
Member
Member

Age : 21
Posts : 91
Join date : 2013-05-01
Forum Version : PhpBB2
Reputation : 2

View user profile http://duelacademy.net

Back to top Go down

Tutorial Re: Tutorial: CSS Notification Boxes

Post by refresh101 on Tue May 14, 2013 8:48 am

This One Sad
Code:
.warning {
    background-color: #ffeaa9;
    background-image: url("http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0400/error.png");
    color: #9F6000;
    border: 1px solid #f9b516;
}
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: Tutorial: CSS Notification Boxes

Post by Irate on Tue May 14, 2013 11:15 am

Code:
<table style="border: solid 1px #f9b516; background-color: #ffeaa9; background-image: url('http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0400/error.png'); background-repeat: no-repeat; color: #9f6000;"><tr><td>Test.</td></tr></table>

Copy the table above to your forum and see if it works.
Alternatively, change ".warning" in your CSS Stylesheet to "table.warning".

And a test to see if it works on here:

Testing the Warning table class.
avatar
Irate
Member
Member

Age : 21
Posts : 91
Join date : 2013-05-01
Forum Version : PhpBB2
Reputation : 2

View user profile http://duelacademy.net

Back to top Go down

Tutorial Re: Tutorial: CSS Notification Boxes

Post by refresh101 on Wed May 15, 2013 12:56 pm

Not Working 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: Tutorial: CSS Notification Boxes

Post by Irate on Wed May 15, 2013 1:46 pm

Could you provide me with a test admin account and the password over PM and your forum URL?
avatar
Irate
Member
Member

Age : 21
Posts : 91
Join date : 2013-05-01
Forum Version : PhpBB2
Reputation : 2

View user profile http://duelacademy.net

Back to top Go down

Tutorial Re: Tutorial: CSS Notification Boxes

Post by ultracheat45 on Fri May 31, 2013 5:45 am

Does not Work. I've inserted the CSS Code. And i'm a little confused about the XHTML of where to put that. I tried putting in the topics as suggested.

BUT I GET IS THIS:
Spoiler:


Last edited by ultracheat45 on Fri May 31, 2013 5:45 am; edited 1 time in total (Reason for editing : Updated Screenshot)
avatar
ultracheat45
Member
Member

Age : 25
Posts : 1
Join date : 2013-05-31
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Tutorial: CSS 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