کار ما نیست شناسایی «راز» گلِ سرخ

**میدوری** · تاریخ عضویت: 05 November 2011

درست کردن ساید بار بدون پلاگین و کوئری فقط با 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>
&nbsp;
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class ="tborder">
<tr><td class ="thead">
	   عنوان دوم
</td></tr><tr><td class ="trow2">
	   متن دوم
</td></tr>
</table>&nbsp;
</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>
&nbsp;
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class ="tborder">
<tr><td>
	   عنوان دوم
</td></tr><tr><td class ="trow2">
	   متن دوم
</td></tr>
</table>&nbsp;
</div>
<div style="float: left;width: 80%;">
{$forums}
</div>
</div></div>

کار تمام است . امید که بکار بیاید .

همين مطلب در سايت مادر http://community.mybb.com/thread-153890.html

**hp618** · تاریخ عضویت: 27 December 2015

چطور میشه کاری کرد که به صورت پیش فرض ساید بار باز باشع
و ساید بار دس سمت چپ قرار بگیره

ممنون

**میدوری** · تاریخ عضویت: 05 November 2011

(07 - January - 2016 02 : 07 PM)hp618 نوشته بوده : چطور میشه کاری کرد که به صورت پیش فرض ساید بار باز باشع
و ساید بار دس سمت چپ قرار بگیره

ممنون

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

موضوع های مرتبط با این موضوع...
موضوع:		نویسنده	پاسخ:	بازدید:	آخرین ارسال
	[1.8] اضافه کردن ساید بار به انجمن ساز مای بی بی	میدوری	8	3,331	01 - January - 2017 39 : 06 PM آخرین ارسال: hp618
	آموزش کشویی کردن انجمن ها	میدوری	4	1,258	01 - January - 2017 52 : 01 PM آخرین ارسال: میدوری
	اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4	میدوری	5	8,467	03 - August - 2016 17 : 03 PM آخرین ارسال: میدوری
	[1.8] اضافه کردن آمار گرافیکی و متحرک به بخش آمار انجمن	میدوری	2	1,281	15 - May - 2016 51 : 05 PM آخرین ارسال: میدوری
	[1.6] اضافه کردن آمار گرافیکی و متحرک به بخش آمار انجمن	میدوری	0	673	14 - May - 2016 21 : 08 PM آخرین ارسال: میدوری

آخرین ارسال ها :
مشاهده نسخه قابل چاپ ارسال این موضوع به یک دوست	نمایش آخرین ارسال این موضوع امتیاز موضوع: 12 رأی - میانگین امیتازات : 3.08 1 2 3 4 5 اهدای بیشترین امتیاز به این موضوع کاربران مشترک شده در موضوع : 0 کاربر

\| حالت موضوعی حالت خطی ( MyBB ) درست کردن ساید بار بدون پلاگین و کوئری فقط با CSS
نویسنده	پیام \| تغییر اندازه ی متن:

سهراب سپهری

کار ما نیست شناسایی «راز» گلِ سرخ