کد باکس پیام‎های سیستم بیان

سیستم بیان تو یه باکسایی که مختص و خاص خودشه، پیام های خبر رسانی رو به کاربراش اطلاع میده. بعضی از دوستان از این باکس خبر دهی برای وبلاگ خودشون استفاده بردن. وبلاگ یه سری از کسایی که از این باکس استفاده کردن رو چک کردم دیدم که فایل CSS رو نتونستن تغییر بدن و از خود فایل CSS بیان استفاده کردن!
تو این پست کد این باکس رو براتون گذاشتم که به راحتی هم میتونید رنگش رو تغییر بدید و هم آیکونش رو.
دموی باکس ها

 

دریافت کد این باکس در زیر..

<style>
html{
    direction:rtl;
}
html,
body{
    margin:0;
    padding:0;
}
body{
    font:12px Tahoma,Verdana,Times New Roman,serif;
}
.item_success{
    background:#D2FFCF;
    border:1px solid #47AF41;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding:5px;
    line-height:18px;
    margin-bottom:10px;
    color:#333;
}
.item_success .icon{
    background:url(http://bayanbox.ir/view/1571749639963980588/tick.png) no-repeat right 0;
    background-position:right -36px;
    width:18px;
    height:18px;
    float:right;
    margin:0 2px 0 6px;
}
</style>
<div class="item_success">
    <div class="icon"></div>
    امـــــروز، اولیـــــــن روز از بقیــــه عمـــر منـــه..
</div>

 

دریافت کد این باکس در زیر..

<style>
html{
    direction:rtl;
}
html,
body{
    margin:0;
    padding:0;
}
body{
    font:12px Tahoma,Verdana,Times New Roman,serif;
}
.item_success1{
    background:#ffe2d9;
    border:1px solid #fe8f6b;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding:5px;
    line-height:18px;
    margin-bottom:10px;
    color:#333;
}
.item_success1 .icon{
    background:url(http://bayanbox.ir/view/1571749639963980588/tick.png) no-repeat right 0;
    background-position:right 0px;
    width:18px;
    height:18px;
    float:right;
    margin:0 2px 0 6px;
}
</style>
<div class="item_success1">
    <div class="icon"></div>
    امـــــروز، اولیـــــــن روز از بقیــــه عمـــر منـــه..
</div>

 

دریافت کد این باکس در زیر..

<style>
html{
    direction:rtl;
}
html,
body{
    margin:0;
    padding:0;
}
body{
    font:12px Tahoma,Verdana,Times New Roman,serif;
}
.item_success2{
    background:#FFFFCC;
    border:1px solid #FF8C00;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding:5px;
    line-height:18px;
    margin-bottom:10px;
    color:#333;
}
.item_success2 .icon{
    background:url(http://bayanbox.ir/view/1571749639963980588/tick.png) no-repeat right 0;
    background-position:right -18px;
    width:18px;
    height:18px;
    float:right;
    margin:0 2px 0 6px;
}
</style>
<div class="item_success2">
    <div class="icon"></div>
    امـــــروز، اولیـــــــن روز از بقیــــه عمـــر منـــه..
</div>

 

دریافت کد این باکس در زیر..

<style>
html{
    direction:rtl;
}
html,
body{
    margin:0;
    padding:0;
}
body{
    font:12px Tahoma,Verdana,Times New Roman,serif;
}
.item_success3{
    background:#C2FFC6;
    border:1px solid #47AF41;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding:5px;
    line-height:18px;
    margin-bottom:10px;
    color:#333;
}
.item_success3 .icon{
    background:url(http://bayanbox.ir/view/1571749639963980588/tick.png) no-repeat right 0;
    background-position:right -54px;
    width:18px;
    height:18px;
    float:right;
    margin:0 2px 0 6px;
}
</style>
<div class="item_success3">
    <div class="icon"></div>
    امـــــروز، اولیـــــــن روز از بقیــــه عمـــر منـــه..
</div>

 

دریافت کد این باکس در زیر..

<style>
html{
    direction:rtl;
}
html,
body{
    margin:0;
    padding:0;
}
body{
    font:12px Tahoma,Verdana,Times New Roman,serif;
}
.item_success4{
    background:#FFBFBF;
    border:1px solid #FF564A;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding:5px;
    line-height:18px;
    margin-bottom:10px;
    color:#333;
}
.item_success4 .icon{
    background:url(http://bayanbox.ir/view/1571749639963980588/tick.png) no-repeat right 0;
    background-position:right -72px;
    width:18px;
    height:18px;
    float:right;
    margin:0 2px 0 6px;
}
</style>
<div class="item_success4">
    <div class="icon"></div>
    امـــــروز، اولیـــــــن روز از بقیــــه عمـــر منـــه..
</div>

 

دریافت کد این باکس در زیر..

<style>
html{
    direction:rtl;
}
html,
body{
    margin:0;
    padding:0;
}
body{
    font:12px Tahoma,Verdana,Times New Roman,serif;
}
.item_success5{
    background:#CCFFC4;
    border:1px solid #02a107;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding:5px;
    line-height:18px;
    margin-bottom:10px;
    color:#333;
}
.item_success5 .icon{
    background:url(http://bayanbox.ir/view/1571749639963980588/tick.png) no-repeat right 0;
    background-position:right -90px;
    width:18px;
    height:18px;
    float:right;
    margin:0 2px 0 6px;
}
</style>
<div class="item_success5">
    <div class="icon"></div>
    امـــــروز، اولیـــــــن روز از بقیــــه عمـــر منـــه..
</div>

دسته: {کدنویس}