Coding-Spot

You are not connected. Please login or register

 
 

How can I add some notification in topics like these?

Message (Page 1 of 1)


 
Advance Member

Posted on Tue Apr 23, 2013 12:38 pm

 
I want to add some command notification in topics. Here is an example


I have a code for it but I don't know how to work with it.


.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;



View user profile http://www.bdtipsntricks.com/



 
Advance Member

Posted on Tue Apr 23, 2013 12:41 pm

 
why u copied the image Topic Locked + Solved? u can easy make it check, here ive done it :)
http://myplanet.forumgreek.com/h11-page
press Ctrl + U to see the codes :)



Last edited by J0k3R^ on Tue Apr 23, 2013 12:47 pm; edited 1 time in total



View user profile



 
Administrator
Administrator

Posted on Tue Apr 23, 2013 12:46 pm

 
Add that to your CSS, then use it with this code:
Code:
<div class="info">Hi</div>

You can change the info to success, warning, error, mes, tips or chat. :):



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Tue Apr 23, 2013 1:01 pm

 
I added the CSS, but not working



View user profile http://www.bdtipsntricks.com/



 
Administrator
Administrator

Posted on Tue Apr 23, 2013 1:03 pm

 
Your html is disable, use a table type instead:
Code:
[table class="info"]
[tr]
[td] Text here! [/td]
[/tr]
[/table]



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Tue Apr 23, 2013 1:20 pm

 
Solved :):



View user profile http://www.bdtipsntricks.com/



 
Administrator
Administrator

Posted on Tue Apr 23, 2013 1:25 pm

 
Since the problem is solved, i'll locked this and move to archive section. :D:
~ Locked and Moved



View user profile http://coding-spot.darkbb.com


#8

Sponsored content


 

Posted Today at 11:51 am

 





Message (Page 1 of 1)

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

In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests

Users browsing this forum: None