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

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

درود

نمونه:



بروید

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

موفق باشید

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