آموزش ایجاد باکس کابر برتر و تاپیک های کار آمد

[صالح غلامیان]

درود

نمونه:



بروید

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

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

کد php:

#best_box {
    margin-bottom: -10px;
    margin-top: 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
padding: 12px;
text-align: center;
height: 120px;
}
.beststop {
position: absolute;
background: url(images/beststop.png) no-repeat;
height: 39px;
width: 190px;
right: 50px;
margin-top: -15px
}
.beststop span {
    position: absolute;
    font: 16px Byekan;
    color: white;
    text-shadow: 1px 1px #484848;
    right: 47px;
    top: 4px;
}
.beststop2 {
position: absolute;
background: url(images/beststop.png) no-repeat;
height: 39px;
width: 190px;
left: 50px;
margin-top: -15px
}
.beststop2 span {
    position: absolute;
    font: 16px Byekan;
    color: white;
    text-shadow: 1px 1px #484848;
    left: 47px;
    top: 4px;
}
.bestuser {
border: 1px solid #ccc;
background:rgba(255,255,255,0.6);
overflow: hidden;
height: 125px;
width: 25%;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
float: right;
}
.bestuseravatar {
height: 104px;
width: 80px;
border: 1px solid gray;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
float: left;
margin-left: 8px;
margin-top: 9px;
}
.bestusertext {
font: 16px Byekan;
line-height: 8px;
margin-top: 30px;
}
.bestusertext span{
font: 16px Byekan;
background: url(images/bestusericon.png) no-repeat right;
padding: 1px 10px;
padding-right: 28px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border: 1px solid #a7a7a7;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
}
.bestusertext span:hover{
    background: url(images/bestusericonoff.png) no-repeat right;
}
.bestusertext a {
color: #177ea7;
text-decoration: none;
}
.wikitopiks {
border: 1px solid #ccc;
background:rgba(255,255,255,0.6);
overflow: hidden;
height: 125px;
width: 73%;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
float: left;
}
.wikitopikstext span{
font: 13px Byekan;
color: #11aae0;
background: url(images/staron.png) no-repeat right;
padding: 5px 10px;
padding-right: 28px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border: 0px solid #d1d1d1;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
}
.wikitopikstext span:hover{
   background: url(images/staroff.png) no-repeat right;
   color: gray;
}
.wikitopikstext {
height: 8px;
margin-top: 25px;
margin-right: 20px;
margin-left: 20px;
} 


اکنون بروید
کنترول پنل مدیر کل >>> قالب ها و پوسته ها >>> قالب ها >>> قالب مورد نظر >>> 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 اضافه کردید را ویرایش کنید

موفق باشید

برگرفته از: ویکی ویبی

[محمد تی ام]

دنبالش بودم ممنون

[Amin Yaghubi]

دنبالش بودم ممنون

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

با تشکر

[SAEED.M]

سلام دوستان ...

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

سپاس بابت این باکس زیبا

[محمد تی ام]

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

البته کش تو پاک کن اول بعد چک کن

[firstboy000]

منم تائید میکنم با کروم هستم.اگر ورژن کرومتون قدیمیه آپدیت کنید.

[SAEED.M]

یعنی قبل از اینکه این ارسالو بذارم دو سه بار کشو پاک کردم هیچ فرقی نکرد تا الان شما گفتی دوباره زدم تغییر کرد این از راز های اینترنته

مرررسی درست شد

[Gh-Moradi]

سلام صالح جان

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

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

[K@Z3M]

میتونین از این کد استفاده کنید :

کد php:

<img src="{$mybb->user['avatar']}" > 


[firstboy000]

قسمت کاربر برتر داینامیک نمیشه؟فقط به صورت دستی باید وارد کنی؟
کسی داینامیکش رو نداره؟

---

یا مثلا یه طوری باشه که آی دی کاربر رو وارد کنی و خودش بقیه چیزاشو درست کنه؟