تالار میدوری

نسخه کامل: درست کردن ساید بار بدون پلاگین و کوئری فقط با CSS
شما در حال مشاهده نسخه تکمیل نشده می باشید. مشاهده نسخه کامل با قالب بندی مناسب.
درست کردن ساید بار بدون پلاگین و کوئری فقط با 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
چطور میشه کاری کرد که به صورت پیش فرض ساید بار باز باشع
و ساید بار دس سمت چپ قرار بگیره

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

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