رفتن به مطلب

ایجاد یک پیام شناور در انجمن


ارسال های توصیه شده

به نام خدا

با سلام و خسته نباشید

به درخواست یکی از کاربران آموزش ایجاد یک پیام شناور در انجمن با من همراه هستید

خب ابتدا به بخش : شخصی سازی ها میریم ← پوسته ← قالب مورد نظر شما ← روی گزینه ویرایش css  و html بزنید •

حال وارد قسمت CSS بشید (منظورم همون دوتا تبی که به نام های (قالب ها - CSS)) هست.

خب بعد از ورود به بخش CSS ← روی custom.css کلیک کنید

اگر خالی هست که کدهای زیر رو کامل قرار بدید :

#stickymsg{
position: fixed;
line-height: 16px;
z-index: 30000;
width: auto;
height: auto;
background: #fff;
color: #2980b9;
text-shadow: inset rgba(255, 255, 255, 0.4) 0px 0px 0px 1px;
padding: 10px;
text-decoration: none;
font-size: 13px;
font-family: irsans,bhoma, arial, sans-serif,Tahoma;

box-shadow: rgba(0,0,0,0.3) 0px 1px 4px;
border-radius: 0px;
}
#stickymsg a{ color: #fff; font-weight:bold; text-decoration: none; }
#stickymsg:hover{ 
box-shadow: rgba(0,0,0,0.3) 0px 2px 5px;
text-color: #c0392b;
}

اگر پر هست که چندتا Enter بزنید و بعد کدهای بالا رو قرار بدید

بعد از اتمام این کار حال روی ذخیره کلیک کنید تا کدها زیر بشه

برید به تب قالب ها ؛ یا اصلا نیازی نیست وقتی میرید به قسمت پوسته ها خود فایل globalTemplate به صورت خودکار باز میشه

به فایل GlobalTemplate برید و بعد از تگ کد :

<head>

یه Enter بزنید بیایید خط پایین و بعد کد زیر رو اضافه کنید :

<div id="stickymsg"><p><!-- isHtml:1 --><!-- isHtml:1 -->تست میشود برای ipbfarsi.ir ipbfarsi.ir ipbfarsi.ir ipbfarsi.ir ipbfarsi.ir ipbfarsi.ir ipbfarsi.ir ipbfarsi.ir</p></div>

 

حال ذخیره کنید و صفحه اصلی انجمن رو ریفرش کنید. همانطور که میبینید یه پیام شناور به انجمن اضافه شده که تغییر در کدهای CSS میتونید اون رو بیشتر شخصی سازی کنید.

نمونه کاری که ما کردیم : 

GIF.thumb.gif.ea2b1d16b6d20660ccec380f415ee5e7.gif

درود بر همگی

برای تغییر جایگاه :

#stickymsg{
position: fixed;
      top: 80%;
    right: 70%;
line-height: 16px;
z-index: 20000;
width: auto;
height: auto;
background: #fff;
color: #2980b9;
text-shadow: inset rgba(255, 255, 255, 0.4) 0px 0px 0px 1px;
padding: 10px;
text-decoration: none;
font-size: 13px;
font-family: irsans,bhoma, arial, sans-serif,Tahoma;

box-shadow: rgba(0,0,0,0.3) 0px 1px 4px;
border-radius: 0px;
}
#stickymsg a{ color: #fff; font-weight:bold; text-decoration: none; }
#stickymsg:hover{ 
box-shadow: rgba(0,0,0,0.3) 0px 2px 5px;
text-color: #c0392b;
}

بر طبق نظر دلخواه خودتون اندازه متغیر های : top و right رو انجام بدید

الان این کدی که گذاشتم ماله گوشه سمت چپ پایین هست

موفق باشید

  • پسند 4
  • تشکر 1
لینک ارسال
به اشتراک گذاری در سایت های دیگر

 اشتراک گذاری

  • کاربران آنلاین در این صفحه   0 کاربر

    • هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.
×
×
  • اضافه کردن...

اطلاعات مهم

ما مجبور شدیم تا از کوکی ها و فناوری های مشابه برای اجرای این وب سایت استفاده کنیم تا بتوانیم تجربه بهتری در زمان استفاده از سایت برای شما ایجاد نماییم. سیاست حریم خصوصی.