+- مرجع پارسی MyBB (https://community.mybbiran.com)
+-- انجمن: متفرقه (https://community.mybbiran.com/forum-52.html)
+--- انجمن: آموزش های متفرقه (https://community.mybbiran.com/forum-33.html)
+--- موضوع: درست کردن ساید بار بدون پلاگین و کوئری فقط با CSS (/thread-16156.html)
درست کردن ساید بار بدون پلاگین و کوئری فقط با CSS - میدوری - ۱۳۹۳/۲/۲۹
با درود
درست کردن ساید بار به این سادگی را تا بحال تجربه نکرده اید, بدون توضیح اضافه نخست فیلمی که از کار تمام شده تهیه کردم را ببینید در صورتی که علاقه مند شدید یک کار برای انجام دادن دارید آنرا انجام داده و صاحب یک ساید بار بدون دردسر های جی کوئری شوید . نمونه ی زنده هم فعلا در تالار میدوری در صفحه ی نخست است .
به مسیر زیر بروید
کنترل پنل مدیریت > قالب ها و پوسته > قالب ها > قالب مورد نظر > Index Page Templates > بخش index
تمام کد ها را با کدهای زیر جایگزین کنید
کد php:
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
lang.no_new_posts = "{$lang->no_new_posts}";
lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
<style type="text/css">
/* animated spoiler CSS by Ali Movassagh */
.spoilerbutton {display:block;margin:-22px -22px -28px 0;background:#EBEBEB;border:2px solid #F8A613;padding:3px;text-align:center;font-weight:bold;font-style:italic;font-size:12px;font-family:Tahoma;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;cursor:pointer;}
.spoiler {overflow:hidden;background: #;}
.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}
.spoilerbutton[value=">"] + .spoiler > div {margin-right:-25%;}
.spoilerbutton[value="<"] + .spoiler {padding:0px;}
</style>
{$header}
<input class ="spoilerbutton" type="button" value=">" onclick="this.value=this.value=='>'?'<':'>';">
<div class ="spoiler"><div>
<div style="float: right;width: 19%;">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class ="tborder">
<tr><td class ="thead">
عنوان نخست
</td></tr>
<tr><td class ="trow2">
متن نخست
</td></tr>
</table>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class ="tborder">
<tr><td class ="thead">
عنوان دوم
</td></tr><tr><td class ="trow2">
متن دوم
</td></tr>
</table>
</div>
<div style="float: left;width: 80%;">
{$forums}
</div>
</div></div>{$boardstats}
<dl class ="forum_legend smalltext">
<dt><img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}" title="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
<dd>{$lang->new_posts}</dd>
<dt><img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}" title="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
<dd>{$lang->no_new_posts}</dd>
<dt><img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}" title="{$lang->forum_locked}" style="vertical-align: middle;" /></dt>
<dd>{$lang->forum_locked}</dd>
</dl>
<br style="clear: both" />
{$footer}
</body>
</html>
اگر در این بخش در اثر نصب پلاگین متغیر هایی دارید و یا دل خواه سازی کرده اید پس فقط متغیر زیر را پیدا کنید
کد php:
{$forums}
و کد های زیر را به جای متغیر بالا بگذارید
کد php:
<style type="text/css">
/* animated spoiler CSS by Ali Movassagh */
.spoilerbutton {display:block;margin:-22px -22px -28px 0;background:#EBEBEB;border:2px solid #F8A613;padding:3px;text-align:center;font-weight:bold;font-style:italic;font-size:12px;font-family:Tahoma;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;cursor:pointer;}
.spoiler {overflow:hidden;background: #;}
.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}
.spoilerbutton[value=">"] + .spoiler > div {margin-right:-25%;}
.spoilerbutton[value="<"] + .spoiler {padding:0px;}
</style>
<input class ="spoilerbutton" type="button" value=">" onclick="this.value=this.value=='>'?'<':'>';">
<div class ="spoiler"><div>
<div style="float: right;width: 19%;">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class ="tborder">
<tr><td class ="thead">
عنوان نخست
</td></tr>
<tr><td class ="trow2">
متن نخست
</td></tr>
</table>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class ="tborder">
<tr><td>
عنوان دوم
</td></tr><tr><td class ="trow2">
متن دوم
</td></tr>
</table>
</div>
<div style="float: left;width: 80%;">
{$forums}
</div>
</div></div>
کار تمام است . امید که بکار بیاید .
Video_2014-05-18_212322.zip (اندازه: 230.94 KB / تعداد دفعات دریافت: 45)
منبع : تالار میدوری
همين مطلب در سايت مادر http://community.mybb.com/thread-153890.html
RE: درست کردن ساید بار بدون پلاگین و کوئری فقط با CSS - Ehssan_it - ۱۳۹۳/۲/۲۹
ایا این ساید بار فقط در صفحه نخست کار میکنه ؟ یا در بقیه صفحات نیز قابل مشاهده هست ؟
RE: درست کردن ساید بار بدون پلاگین و کوئری فقط با CSS - میدوری - ۱۳۹۳/۲/۲۹
نقل‌قول: ایا این ساید بار فقط در صفحه نخست کار میکنه ؟ یا در بقیه صفحات نیز قابل مشاهده هست ؟این کدها بسیار مهربان هستند و در هر جایی قرار بگیرند ایجاد کشو می کنند به شرط رعایت اندازه و دستور مناسب چپ و راست یا بالا و پایین . من در تالار میدوری از این کدها برای ساید بار ( راست به چپ با تاخیر یک ثانیه ای) و برای زیر انجمن ها ( بالا به پایین با تاخیر یک ثانیه ای ) و برای پست بیت کاربران (از بالا به پایین و بدون تاخیر با اندازه افتادن تعیین شده) استفاده کرده ام و می توانید ببینید به هیچ جایی هم فشار نیاورده و اختلالی در کار نیست . فکر میکنم با آمدن این قابلیت ها در استایل بندی , دیگر جی کوئری با آن همه شاخ زدن به اینور و آنور و ناسازگاری های زیادش (با آن همه کد های بی سرو ته) باید بازنشسته شود .
RE: درست کردن ساید بار بدون پلاگین و کوئری فقط با CSS - Ehssan_it - ۱۳۹۳/۲/۳۰
بنده در انجمن خودم فقط در صفحه اصلی یک ساید بار دارم
ایا می تونم از این کدها یی که شما قرار دادین در صفحه ارسال ها نیز استفاده کنم؟
و چگونگی گذاشتن کدها در صفحه ارسال ها رو نیز اگر بیان کنید ممنون میشم
RE: درست کردن ساید بار بدون پلاگین و کوئری فقط با CSS - Ehssan_it - ۱۳۹۳/۹/۸
در این انجمن که از مای بی بی استفاده کرده ساید بار در تمامی صفحات تکرار شده چنانچه امکان داره اموزش قرار دادن ساید بار در تمامی صفحات را نیر ارسال نمایید
RE: درست کردن ساید بار بدون پلاگین و کوئری فقط با CSS - Ehssan_it - ۱۳۹۳/۹/۱۴
جناب میدوری در صورت امکان پاسخی ارسال نمایید
RE: درست کردن ساید بار بدون پلاگین و کوئری فقط با CSS - میدوری - ۱۳۹۳/۹/۱۴
با درود
اینجا را آزمایش کنید . (بصورت دستی)
و اين هم پلاگين برای اين کار .
خودتان پارسی سازی کنید بهتر است و یا اینکه اگر در اینجا بود استفاده کنید اینجا را بررسی نکردم که هست یا نه . از اون نگارش پارسی سازی شده که در لینک هست توصیه میکنم استفاده نکنید که سر از صحرای کربلا در می آورید . و در نهایت برای رسیدن به مطلوبتان جستجوی بیشتری بکنید تا عاقبت بخیر هم شوید .