رفتن به مطلب

.::|>آموزش گذاشتن دکمه شناور برای ایجاد موضوع جدید<|::.


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

سلام به همه کاربران

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

وارد داشبورد مدیریتی بشید و پوسته مورد نطر خودتون رو ویرایش کنین و در تب قالب کلمه footer را جستجو و باز کنین و کد زیر رو به انتهای کدها اضافه کنین

		<!--Float button for new topic created By Arash.Ranjbar-->
{{foreach \IPS\Member::loggedIn()->createMenu() as $k => $url}}
<a href="https://www.lenglishl.com/forum/index.php?app=forums&module=forums&controller=forums&do=add" data-ipsdialog="" data-ipsdialog-size="narrow" data-ipsdialog-title="انتخاب تالار" class="arash">
<i class="fa fa-pencil arash01" style="color:white;"></i>
</a>
<div class="arash-container">
<div class="arash-label">ایجاد تاپیک</div>
<i class="fa fa-play arash-01"></i>
</div>
{$data}="{$v}"
{{endforeach}}
		<!--End Float button for creat new topic By Arash.Ranjbar-->

سپس در تب css فایل custom.css رو باز کنید و کد زیر رو بهش اضافه کنید

/*css code for float button created by Arash.Ranjbar*/
*{padding:0;margin:0;}

.arash-container{
	position:fixed;
	bottom:48px;
	left:105px;
	display:table;
	visibility: hidden;
}
.arash-label{
	color:#FFF;
	background:rgba(51,51,51,0.5);
	display:table-cell;
	vertical-align:middle;
	padding:10px;
	border-radius:3px;
}
.arash-01{
	display:table-cell;
	vertical-align:middle;
	color:#FFF;
	opacity:0.5;
}
.arash{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	left:40px;
	background-color:#137f9b;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
}
.arash01{
	font-size:24px;
	margin-top:18px;
}
a.arash + div.arash-container {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s ease;
}

a.arash:hover + div.arash-container{
  visibility: visible;
  opacity: 1;
}

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

**نکته: دقت کنین که این دکمه برای کاربرانی که لاگین کردن نمایش داده میشه.

 

برای مشاهده دمو به این آدرس مراجعه کنین!

 

امیدوارم موفق باشید

لینک ارسال
به اشتراک گذاری در سایت های دیگر

  • 2 ماه بعد...

آموزش خوبیه منتها چند تا مشکل داره : 1- لینک به صفحه انجمن شما هدایت میشه که برای کاربرانی که مبتدی هستند ممکنه در حل همین نکته بسیار ریز با مشکل برخورد کنند 2-در صفحه نمایش های کوچک برای موبایل اصلا جالب نیست و تقریبا نزدیک وسط صفحه میباشد که برای خواندن تاپیک ها باید اسکرول کرد  3-بعد از کلیک به صفحه ایجاد تاپیک هدایت میشه برخلاف اینکه در تاب بار قالب ها این گزینه به صورت پیش فرض وجود داشته و همراه موارد دیگر به صورت آژاکسی و پاپ آپ نمایش داده میشه.

در آخر جهت استفاده از تولتیپ یا متنی که روی بعضی از المان ها نشانگر ماوس میرود که به نمایش در می آید در سیستم IPS به صورت "data-ipsTooltip title" استفاده میشود تا اینکه از کلاس div برای این مورد استفاده کنید که هم تعداد خطوط استایل و کد اصلی بالاتر رود.

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

در 11 ساعت قبل، CHRIS-7 گفته است :

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

تشکر حواسم نبود اصلاح شد.

در 11 ساعت قبل، CHRIS-7 گفته است :

در صفحه نمایش های کوچک برای موبایل اصلا جالب نیست و تقریبا نزدیک وسط صفحه میباشد که برای خواندن تاپیک ها باید اسکرول کرد

این مورد رو خودم برای رزولوشن های کوچیک انجام دادم ولی زیاد جالب در نیومد مگر اینکه به صورت پاورقی تغییرش بدم.

در 11 ساعت قبل، CHRIS-7 گفته است :

-بعد از کلیک به صفحه ایجاد تاپیک هدایت میشه برخلاف اینکه در تاب بار قالب ها این گزینه به صورت پیش فرض وجود داشته و همراه موارد دیگر به صورت آژاکسی و پاپ آپ نمایش داده میشه.

اصلا اینطوری نیست و مثل پیش فرض به صورت پاپ آپ باز میشه.

 

در 11 ساعت قبل، CHRIS-7 گفته است :

در آخر جهت استفاده از تولتیپ یا متنی که روی بعضی از المان ها نشانگر ماوس میرود که به نمایش در می آید در سیستم IPS به صورت "data-ipsTooltip title" استفاده میشود تا اینکه از کلاس div برای این مورد استفاده کنید که هم تعداد خطوط استایل و کد اصلی بالاتر رود.

این مورد فک کنم سلیقه ای هستش. از یه طرفم میخواستم تو ریسپانسیو مشکلی پیش نیاد تو تگ div گذاشتم

لینک ارسال
به اشتراک گذاری در سایت های دیگر

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

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