هاست لینوکس



امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
درست کردن ساید بار بدون پلاگین و کوئری فقط با CSS
#1
Heart 
با درود
درست کردن ساید بار به این سادگی را تا بحال تجربه نکرده اید, بدون توضیح اضافه نخست فیلمی که از کار تمام شده تهیه کردم را ببینید در صورتی که علاقه مند شدید یک کار برای انجام دادن دارید آنرا انجام داده و صاحب یک ساید بار بدون دردسر های جی کوئری شوید . نمونه ی زنده هم فعلا در تالار میدوری در صفحه ی نخست است .

به مسیر زیر بروید
کنترل پنل مدیریت > قالب ها و پوسته > قالب ها > قالب مورد نظر > 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-transitionall 0.2s ease;-moz-transitionmargin 0.2s ease;-o-transitionall 0.2s ease;transitionmargin 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-transitionall 0.2s ease;-moz-transitionmargin 0.2s ease;-o-transitionall 0.2s ease;transitionmargin 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

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

.zip   Video_2014-05-18_212322.zip (اندازه: 230.94 KB / تعداد دفعات دریافت: 45)
منبع : تالار میدوری
همين مطلب در سايت مادر http://community.mybb.com/thread-153890.html
پاسخ
 سپاس شده توسطGh-Moradi (۱۳۹۳/۲/۲۹، ۰۲:۱۲:۴۴ صبح) ، number-one (۱۳۹۳/۲/۲۹، ۰۴:۳۲:۲۴ صبح) ، صالح غلامیان (۱۳۹۳/۲/۲۹، ۰۹:۰۴:۳۸ صبح) ، amir1 (۱۳۹۳/۲/۲۹، ۱۱:۳۰:۳۷ صبح) ، firstboy000 (۱۳۹۳/۲/۲۹، ۱۸:۲۴:۵۰ عصر) ، Amin Yaghubi (۱۳۹۳/۲/۳۰، ۰۹:۵۴:۵۱ صبح) ، motorola30 (۱۳۹۳/۹/۱۴، ۲۳:۵۹:۱۲ عصر) ، saeed_same (۱۳۹۳/۹/۱۵، ۰۰:۰۷:۴۵ صبح)
#2
ایا این ساید بار فقط در صفحه نخست کار میکنه ؟ یا در بقیه صفحات نیز قابل مشاهده هست ؟
پاسخ
 سپاس شده توسطمیدوری (۱۳۹۳/۲/۲۹، ۱۲:۲۲:۰۷ عصر) ، firstboy000 (۱۳۹۳/۲/۲۹، ۱۸:۲۴:۳۹ عصر)
#3
Heart 
نقل قول: ایا این ساید بار فقط در صفحه نخست کار میکنه ؟ یا در بقیه صفحات نیز قابل مشاهده هست ؟
این کدها بسیار مهربان هستند و در هر جایی قرار بگیرند ایجاد کشو می کنند به شرط رعایت اندازه و دستور مناسب چپ و راست یا بالا و پایین . من در تالار میدوری از این کدها برای ساید بار ( راست به چپ با تاخیر یک ثانیه ای) و برای زیر انجمن ها ( بالا به پایین با تاخیر یک ثانیه ای ) و برای پست بیت کاربران (از بالا به پایین و بدون تاخیر با اندازه افتادن تعیین شده) استفاده کرده ام و می توانید ببینید به هیچ جایی هم فشار نیاورده و اختلالی در کار نیست . فکر میکنم با آمدن این قابلیت ها در استایل بندی , دیگر جی کوئری با آن همه شاخ زدن به اینور و آنور و ناسازگاری های زیادش (با آن همه کد های بی سرو ته) باید بازنشسته شود . Big Grin Heart
پاسخ
 سپاس شده توسطfirstboy000 (۱۳۹۳/۲/۲۹، ۱۸:۲۴:۳۵ عصر) ، صالح غلامیان (۱۳۹۳/۲/۳۰، ۰۸:۱۷:۴۸ صبح) ، Amin Yaghubi (۱۳۹۳/۲/۳۰، ۰۹:۵۵:۰۵ صبح)
#4
بنده در انجمن خودم فقط در صفحه اصلی یک ساید بار دارم

ایا می تونم از این کدها یی که شما قرار دادین در صفحه ارسال ها نیز استفاده کنم؟
و چگونگی گذاشتن کدها در صفحه ارسال ها رو نیز اگر بیان کنید ممنون میشم
پاسخ
#5
در این انجمن که از مای بی بی استفاده کرده ساید بار در تمامی صفحات تکرار شده چنانچه امکان داره اموزش قرار دادن ساید بار در تمامی صفحات را نیر ارسال نمایید
پاسخ
#6
جناب میدوری در صورت امکان پاسخی ارسال نمایید
پاسخ
#7
با درود
اینجا را آزمایش کنید . (بصورت دستی)
و اين هم پلاگين برای اين کار .  Heart خودتان پارسی سازی کنید بهتر است و یا اینکه اگر در اینجا بود استفاده کنید اینجا را بررسی نکردم که هست یا نه . از اون نگارش پارسی سازی شده که در لینک هست توصیه میکنم استفاده نکنید که سر از صحرای کربلا در می آورید . Big Grin
و در نهایت برای رسیدن به مطلوبتان جستجوی بیشتری بکنید تا عاقبت بخیر هم شوید . Big Grin Heart
پاسخ
 سپاس شده توسطEhssan_it (۱۳۹۳/۹/۱۶، ۰۵:۵۱:۰۳ صبح)


موضوع‌های مشابه…
موضوع نویسنده پاسخ بازدید آخرین ارسال
Heart درست کردن فهرست کناري با جی کوئری میدوری 16 7,149 ۱۳۹۲/۷/۱۸، ۰۹:۵۱:۴۸ صبح
آخرین ارسال: Ehssan_it

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان