آموزش ایجاد اطلاع از پیغام شخصی بسیار زیبا

[mohamad.s]

رود
به درخواست دوستان آموزش اطلاع رسانی به یک سبک زیبا رو براتون آماده کردم .
برای اینکار به جست و جوی قالب ها رفته و سرچ کنید additional.css رو و به انتهاش کد های زیر رو اضافه کنید :



.wcf_notifications { bottom:0px; left:20px; padding:12px 18px; position:fixed; z-index:99999; background:#585858; height:auto; border-top: 3px solid #0090ff; -webkit-border-radius:8px 8px 0 0; -moz-border-radius:8px 8px 0 0; -o-border-radius:8px 8px 0 0; -ms-border-radius:8px 8px 0 0; border-radius:8px 8px 0 0; } .wcf_notifications_content{ background-color:transparent; } .wcf_notifications_content li a{ color:#FFFFFF; text-shadow:1px 1px 1px #000; -moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; } .wcf_notifications_content li a:hover{ color:#0090ff; text-decoration: none; } .wcf_notifications_content p{ position: absolute; color:#FFFFFF; text-decoration: none; font-size:13px; text-shadow:1px 1px 1px #000; margin-top: -34px; left: 50px; background: #0090ff; padding: 2px 6px 5px 6px; border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; -o-border-radius: 6px 6px 0 0; -ms-border-radius: 6px 6px 0 0; }
























حالا ذخیره کرده و در جست و جوی قالب ها header را جست و جو کرده و کد های زیر هم به انتهای header اضافه کنید :



<vb:if condition="$notifications_total"> <div class="wcf_notifications"> <div class="wcf_notifications_content"> <p>شما پیغام جدید دارید</p> <p>{vb:raw notifications_menubits}</p> </div> </div></vb:if>

به همین سادگی حالا هنگام دریافت پیغام شخصی کادر زیبایی در پاین سمت چپ ظاهر خواهد شد .
دقت داشته باشید این آموزش روی لوکال هاست انجام شده و صد در صد سالم است .
دمو :
http://up.wikivb.ir/images/ff16hlupb0ni5kalj6x_thumb.jpg http://up.wikivb.ir/images/dz7ycvnx4vqqe78r15r9_thumb.jpg