مرجع پارسی MyBB

نسخه‌ی کامل: آموزش ایجاد باکس کابر برتر و تاپیک های کار آمد
شما درحال مشاهده‌ی نسخه‌ی متنی این صفحه می‌باشید. مشاهده‌ی نسخه‌ی کامل با قالب‌بندی مناسب.
صفحه‌ها: 1 2 3 4 5
درود

[تصویر:  photos.png] نمونه:

[تصویر:  pqr_capture.png]

بروید

کنترول پنل مدیر کل>>> قالب ها و پوسته ها>>> پوسته ها >>> پوسته ی مورد نظر >>>global.css

کدهای زیر را در انتها اضافه کنید و سپس ذخیره کنید

کد php:
#best_box {
    
margin-bottom: -10px;
    
margin-top20px;
border-radius5px;
-
moz-border-radius5px;
-
webkit-border-radius5px;
-
o-border-radius5px;
-
ms-border-radius5px;
padding12px;
text-aligncenter;
height120px;
}
.
beststop {
positionabsolute;
backgroundurl(images/beststop.pngno-repeat;
height39px;
width190px;
right50px;
margin-top: -15px
}
.
beststop span {
    
positionabsolute;
    
font16px Byekan;
    
colorwhite;
    
text-shadow1px 1px #484848;
    
right47px;
    
top4px;
}
.
beststop2 {
positionabsolute;
backgroundurl(images/beststop.pngno-repeat;
height39px;
width190px;
left50px;
margin-top: -15px
}
.
beststop2 span {
    
positionabsolute;
    
font16px Byekan;
    
colorwhite;
    
text-shadow1px 1px #484848;
    
left47px;
    
top4px;
}
.
bestuser {
border1px solid #ccc;
background:rgba(255,255,255,0.6);
overflowhidden;
height125px;
width25%;
border-radius5px;
-
moz-border-radius5px;
-
webkit-border-radius5px;
-
o-border-radius5px;
-
ms-border-radius5px;
floatright;
}
.
bestuseravatar {
height104px;
width80px;
border1px solid gray;
border-radius5px;
-
moz-border-radius5px;
-
webkit-border-radius5px;
-
o-border-radius5px;
-
ms-border-radius5px;
floatleft;
margin-left8px;
margin-top9px;
}
.
bestusertext {
font16px Byekan;
line-height8px;
margin-top30px;
}
.
bestusertext span{
font16px Byekan;
backgroundurl(images/bestusericon.pngno-repeat right;
padding1px 10px;
padding-right28px;
border-radius5px;
-
moz-border-radius5px;
-
webkit-border-radius5px;
-
o-border-radius5px;
-
ms-border-radius5px;
border1px solid #a7a7a7;
-moz-transitionall 0.3s ease-in;
-
webkit-transitionall 0.3s ease-in;
-
o-transitionall 0.3s ease-in;
-
ms-transitionall 0.3s ease-in;
}
.
bestusertext span:hover{
    
backgroundurl(images/bestusericonoff.pngno-repeat right;
}
.
bestusertext a {
color#177ea7;
text-decorationnone;
}
.
wikitopiks {
border1px solid #ccc;
background:rgba(255,255,255,0.6);
overflowhidden;
height125px;
width73%;
border-radius5px;
-
moz-border-radius5px;
-
webkit-border-radius5px;
-
o-border-radius5px;
-
ms-border-radius5px;
floatleft;
}
.
wikitopikstext span{
font13px Byekan;
color#11aae0;
backgroundurl(images/staron.pngno-repeat right;
padding5px 10px;
padding-right28px;
border-radius5px;
-
moz-border-radius5px;
-
webkit-border-radius5px;
-
o-border-radius5px;
-
ms-border-radius5px;
border0px solid #d1d1d1;
-moz-transitionall 0.3s ease-in;
-
webkit-transitionall 0.3s ease-in;
-
o-transitionall 0.3s ease-in;
-
ms-transitionall 0.3s ease-in;
}
.
wikitopikstext span:hover{
   
backgroundurl(images/staroff.pngno-repeat right;
   
colorgray;
}
.
wikitopikstext {
height8px;
margin-top25px;
margin-right20px;
margin-left20px;


اکنون بروید
کنترول پنل مدیر کل >>> قالب ها و پوسته ها >>> قالب ها >>> قالب مورد نظر >>> Navigation Templates >>> سپس nav

حال کد های زیر را در ابتدا اضافه کنید و سپس ذخیر کنید

کد:
<!--box bests start-->

<div id="best_box">
<div class="bestuser" title="به صورت ماهیانه در این سایت نظرسنجی ایجاد میشود و برترین کاربر ماه انتخاب شده و مشخصات کاربر در این قسمت به عنوان هدیه به مدت یکماه یعنی تا انتخاب کاربر برتر ماه آینده قرار میگیرد . شما هم میتوانید کاربر برتر باشید">
<div class="beststop"><span>برترین کاربر ماه</span></div>
<div class="bestuseravatar"><a href="http://mybbiran.com"><img src="http://www.wikivb.ir/avatars/member4.gif" alt="مای بی بی" height="104px" width="80px" /></a></div>
<div class="bestusertext">
<center><a href="http://mybbiran.com" ><span style="font-family:Arial;font-weight: bold;padding-top: 4px;padding-bottom: 4px;color:#0024ff">saleh</span></a></center>
<br/>
<center><span>مدیر بخش</span></center>
<br/>
<center><a href="http://mybbiran.com" target="blank"><span>وبسایت</span></a></center>
</div>
</div>
<div class="wikitopiks">
<div class="beststop2"><span>تاپیکهای کارآمد</span></div>
<div class="wikitopikstext">
<table width="100%" border="0">
<tr>
<td width="35%"><a href="http://mybbiran.com" ><span style="float: right;">تاپیکهای کارآمد 1</span></a></td>
<td width="35%"><a href="http://mybbiran.com" ><span style="float: right;">تاپیکهای کارآمد 2</span></a></td>
<td width="35%"><a href="http://mybbiran.com" ><span style="float: right;">تاپیکهای کارآمد 3</span></a></td>
</tr>
</table>
</div>
<div class="wikitopikstext">
<table width="100%" border="0">
<tr>
<td width="35%"><a href="http://mybbiran.com" ><span style="float: right;">تاپیکهای کارآمد 4</span></a></td>
<td width="35%"><a href="http://mybbiran.com" ><span style="float: right;">تاپیکهای کارآمد 5</span></a></td>
<td width="35%"><a href="http://mybbiran.com" ><span style="float: right;">تاپیکهای کارآمد 6</span></a></td>
</tr>
</table>
</div>
</div>
</div>
<!--box bests end-->

اکنون تصاویر پیوست را در فولدر images آپلود کنید ( پیوست شود)

دانلود پیوست

-------------
برای تغییرات هم باید کدهایی که به Navigation اضافه کردید را ویرایش کنید

موفق باشید

برگرفته از: ویکی ویبی
دنبالش بودم ممنونHeartHeartHeart
(۱۳۹۲/۹/۱۵، ۲۱:۰۵:۴۴ عصر)محمد تی ام نوشته است: [ -> ]دنبالش بودم ممنونHeartHeartHeart

دوست عزیز برای تشکر از گزینه ی سپاس استفاده کنید و پست اسپم ندهید.

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

مشکلی که دارم اینه این باکس تنها با فارفاکس ست هست و در دیگر مرورگرها مثل کروم بصورت بهم ریخته نشون داده میشه !
چجوری میتونم با دیگر مرورگر ها هم ستش کنم ؟؟

سپاس بابت این باکس زیبا Wink
من که با مرورگر کروم هستم مشکلی نیس

البته کش تو پاک کن اول بعد چک کن
منم تائید میکنم با کروم هستم.اگر ورژن کرومتون قدیمیه آپدیت کنید.
یعنی قبل از اینکه این ارسالو بذارم دو سه بار کشو پاک کردم هیچ فرقی نکرد تا الان شما گفتی دوباره زدم تغییر کرد Sad این از راز های اینترنته Smile

مرررسی درست شد Wink
سلام صالح جان

دستت درد نکنه بابت این باکس زیبا ، حالا من میخوام به جای تصویر کاربر ماه آواتار خود شخص نمایش داده شود ولی هرکاری میکنم نمیشه ، متغییر آواتار هم گذاشتم ولی نمایش داده نمیشه ، چرا؟
اصلا میشه آواتار در صفحه اصلی نمایش داده بشه؟

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

کد php:
<img src="{$mybb->user['avatar']}
قسمت کاربر برتر داینامیک نمیشه؟فقط به صورت دستی باید وارد کنی؟
کسی داینامیکش رو نداره؟

یا مثلا یه طوری باشه که آی دی کاربر رو وارد کنی و خودش بقیه چیزاشو درست کنه؟
صفحه‌ها: 1 2 3 4 5