/ کادر برترین ها در چهار تب ( تاپیکهای کارآمد پیشرفته )
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
صفحه 3 از 7 نخستنخست 12345 ... آخرینآخرین
نمایش نتایج: از 21 به 30 از 70

مقاله: کادر برترین ها در چهار تب ( تاپیکهای کارآمد پیشرفته )

    1. کادر برترین ها در چهار تب ( تاپیکهای کارآمد پیشرفته )

      کادر برترین ها در چهار تب ( تاپیکهای کارآمد پیشرفته )

      درود
      براتون تاپیکهای کارآمد رو به صورت چند قسمتی آماده کردم که میتونید در هر قسمت عنوانی قرار بدید و با کلیک بر روی اون کاربر بتونه برترین های اون عنوان رو ببینه .
      اینجوری کسی متوجه نمیشه بهتره دموی این داستان رو مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی ببینید :

      برای مشاهده دمو آنلاین کلیک کنید

      خب قبل از هرچیز بگم که این طرح فقط با استفاده از CSS و HTML ایجاد شده و از کوئری درش استفاده نشده و استفاده نکردن از کوئری کمی روی سرعت لود تاثیر داره .
      سعی شده کاملا استفاده ازش ساده بشه تا همه بتونن استفاده کنن و کسی سردرگم نشه .

      برای اضافه کردنش در جست و جوی قالب ها FORUMHOME رو جست و جو کنید و تابع زیر رو پیدا کنید :

      کد:
      {vb:raw navbar}
      حالا در زیر تابع کد های زیر رو اضافه کنید و عنوان ها و لینک ها هم با توجه به نیاز خودتون ویرایش کنید :

      کد:
             <link rel="stylesheet" type="text/css" href="http://www.wikivb.ir/helpfiles/textslider.css" />
      <!-- HTML/CSS Bests == By WikiVB.IR -->
          <section class="wikivbtops">
                      <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
                      <label for="tab-1" class="tab-label-1">تاپيکهاي مهم</label>
              
                      <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
                      <label for="tab-2" class="tab-label-2">پرسشهاي متداول</label>
              
                      <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
                      <label for="tab-3" class="tab-label-3">آخرين خبر ها</label>
                  
                      <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
                      <label for="tab-4" class="tab-label-4">برترين استايل ها</label>
                  
                      <div class="clear-shadow"></div>
                      
                      <div class="content">
                          <div class="content-1">
      <table width="100%" border="0">
      <tr>
      <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
      </tr>
      </table>
      <table width="100%" border="0">
      <tr>
      <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
      </tr>
      </table>
      <table width="100%" border="0">
      <tr>
      <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
      </tr>
      </table>
                          </div>
                          <div class="content-2">
      <table width="100%" border="0">
      <tr>
      <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
      </tr>
      </table>
      <table width="100%" border="0">
      <tr>
      <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
      </tr>
      </table>
      <table width="100%" border="0">
      <tr>
      <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
      </tr>
      </table>
                          </div>
                          <div class="content-3">
      <table width="100%" border="0">
      <tr>
      <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
      </tr>
      </table>
      <table width="100%" border="0">
      <tr>
      <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
      </tr>
      </table>
      <table width="100%" border="0">
      <tr>
      <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
      </tr>
      </table>
                          </div>
                          <div class="content-4">
      <table width="100%" border="0">
      <tr>
      <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
      </tr>
      </table>
      <table width="100%" border="0">
      <tr>
      <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
      </tr>
      </table>
      <table width="100%" border="0">
      <tr>
      <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
      <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
      </tr>
      </table>
                          </div>
                      </div>
                  </section>
      <!-- HTML/CSS Bests == By WikiVB.IR -->
      لطفا کپی نکنید حتی با اندکی تغییر ، خیلی شخصا دیدم که آموشهای اینجا رو دو تا background تغییر میدن و جای دیگه منتشر میکنن ، همینجا هم اعلام کنم در صورت مشاهده مجدد چنین حرکات ناپسندی کاربر خاطی بن دائم میشه ، متاسفانه این حرکات رو از اعضایی میبینیم که بیشتر از اینها ازشون انتظار میرفت !

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

  1. #21
    Mehrab JT آنلاین نیست.
    Mehrab JT
    کاربر فعال و مفيد
    1,240نوشته1,400مورد پسند

    تاریخ عضویت
    Jun 2013
    شماره عضویت
    1963
    پسندیده است
    2,945 پست
    بلاگ
    4 پست
    میزان امتیاز
    1408
    telegram.me/mehrab_jt
    منظورتون رو متوجه نشدم من طبق آموزش انجام دادم مراحل رو الان فقط میخوام فونت کادر مثل فونت قالب بشه

    ولی طبق آموزش کدی درون additional قرار نمیگیره

  2. #22
    AminX آنلاین نیست.
    AminX
    مدير بازنشسته
    4,703نوشته6,570مورد پسند

    تاریخ عضویت
    Mar 2013
    شماره عضویت
    984
    پسندیده است
    2,596 پست
    بلاگ
    2 پست
    میزان امتیاز
    6578
    مسئول 2 ستاره
    www.cssnevis.ir
    اسم فونتی که میخواید رو بگید کدها رو براتون جایگزین کنم و بگم توی additional.css قرار بدید !!!
    .....

  3. #23
    Mehrab JT آنلاین نیست.
    Mehrab JT
    کاربر فعال و مفيد
    1,240نوشته1,400مورد پسند

    تاریخ عضویت
    Jun 2013
    شماره عضویت
    1963
    پسندیده است
    2,945 پست
    بلاگ
    4 پست
    میزان امتیاز
    1408
    telegram.me/mehrab_jt
    نقل قول نوشته اصلی توسط MR.Responder نمایش پست ها
    اسم فونتی که میخواید رو بگید کدها رو براتون جایگزین کنم و بگم توی additional.css قرار بدید !!!
    BKoodakBold

    اندازه 17 px

  4. #24
    AminX آنلاین نیست.
    AminX
    مدير بازنشسته
    4,703نوشته6,570مورد پسند

    تاریخ عضویت
    Mar 2013
    شماره عضویت
    984
    پسندیده است
    2,596 پست
    بلاگ
    2 پست
    میزان امتیاز
    6578
    مسئول 2 ستاره
    www.cssnevis.ir
    اینا رو به additional.css اضافه کنید :

    کد:
    /*--- HTML/CSS Bests By WikiVB.IR ---*/
    /*--- Don't Delete This CopyRight Please ---*//*------ Best's For Free In WikiVB.Ir ------*/a{	text-decoration: none;}.container{	width: 100%;	position: relative;}.clr{	clear: both;	padding: 0;	height: 0;	margin: 0;}.container > header{	margin: 10px;	padding: 20px 10px 10px 10px;	position: relative;	display: block;	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);    text-align: center;}.container > header h1{	font-size: 40px;	line-height: 40px;	margin: 0;	position: relative;	font-weight: 300;	color: #128680;	text-shadow: 1px 1px 1px rgba(255,255,255,0.7);}.container > header h1 span{	font-weight: 700;}.container > header h2{	font-size: 14px;	font-weight: 300;	margin: 0;	padding: 15px 0 5px 0;	color: #7c8e8d;	font-family: 
    BKoodakBold
    ; font-style: italic; text-shadow: 1px 1px 1px rgba(255,255,255,0.9);}/* Header Style */.codrops-top{ line-height: 24px; font-size: 11px; background: #fff; background: rgba(255, 255, 255, 0.6); text-transform: uppercase; z-index: 9999; position: relative; font-family:
    BKoodakBold
    ; box-shadow: 1px 0px 2px rgba(0,0,0,0.2);}.codrops-top a{ padding: 0px 10px; letter-spacing: 1px; color: #333; display: inline-block;}.codrops-top a:hover{ background: rgba(255,255,255,0.3);}.codrops-top span.right{ float: right;}.codrops-top span.right a{ float: left; display: block;}/* Demo Buttons Style */.codrops-demos{ text-align:center; display: block; line-height: 30px; padding: 5px 0px;}.codrops-demos a{ display: inline-block; margin: 0px 4px; padding: 0px 6px; color: #aaa; line-height: 20px; font-size: 13px; text-shadow: 1px 1px 1px #fff; border: 1px solid #ddd; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */ background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */ box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);}.codrops-demos a:hover{ color: #333; box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);}.codrops-demos a:active{ background: #fff;}.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover{ background: #f6f6f6; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */}.wikivbtops { position: relative; margin: 10px auto; margin-left: 20px;}.wikivbtops input { position: absolute; z-index: 1000; width: 120px; height: 40px; left: 0px; top: 0px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); cursor: pointer;}.wikivbtops input#tab-2{ left: 120px;}.wikivbtops input#tab-3{ left: 240px;}.wikivbtops input#tab-4{ left: 360px;}.wikivbtops label {background: rgb(40,195,231); /* Old browsers */background: -moz-linear-gradient(top, rgba(40,195,231,1) 0%, rgba(3,158,194,1) 49%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(40,195,231,1)), color-stop(49%,rgba(3,158,194,1))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, rgba(40,195,231,1) 0%,rgba(3,158,194,1) 49%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, rgba(40,195,231,1) 0%,rgba(3,158,194,1) 49%); /* Opera 11.10+ */background: -ms-linear-gradient(top, rgba(40,195,231,1) 0%,rgba(3,158,194,1) 49%); /* IE10+ */background: linear-gradient(to bottom, rgba(40,195,231,1) 0%,rgba(3,158,194,1) 49%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28c3e7', endColorstr='#039ec2',GradientType=0 ); /* IE6-9 */ line-height: 40px; height: 40px; position: relative; padding: 0 20px; float: right; display: block; color: #fff; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; text-align: center; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); border-radius: 3px 3px 0 0; box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1); font: 20px
    BKoodakBold
    ;} .wikivbtops label:after { content: ''; background: #fff; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; display: block;}.wikivbtops input:hover + label {background: rgb(3,158,194); /* Old browsers */background: -moz-linear-gradient(top, rgba(3,158,194,1) 51%, rgba(40,195,231,1) 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,rgba(3,158,194,1)), color-stop(100%,rgba(40,195,231,1))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, rgba(3,158,194,1) 51%,rgba(40,195,231,1) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, rgba(3,158,194,1) 51%,rgba(40,195,231,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, rgba(3,158,194,1) 51%,rgba(40,195,231,1) 100%); /* IE10+ */background: linear-gradient(to bottom, rgba(3,158,194,1) 51%,rgba(40,195,231,1) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#039ec2', endColorstr='#28c3e7',GradientType=0 ); /* IE6-9 */}.wikivbtops label:first-of-type { z-index: 4; box-shadow: 2px 0 2px rgba(0,0,0,0.1);}.tab-label-2 { z-index: 3;}.tab-label-3 { z-index: 2;}.tab-label-4 { z-index: 1;}.wikivbtops input:checked + label { background: #fff; z-index: 999999999999; color: #28c3e7; text-shadow: 0 0 0; box-shadow: 0px 2px #fff; border: 1px solid rgba(0,0,0,0.13); border-bottom: 0px; border-radius: 3px;}.clear-shadow { clear: both;}.content { background: #fff; position: relative; width: 100%; height: 140px; z-index: 99999999; box-shadow: 0 3px 3px -2px rgba(0,0,0,0.2); border-radius: 6px 0 6px 6px; border:1px solid rgba(0,0,0,0.13); border-bottom: 6px solid rgba(0,0,0,0.13); padding-right: 20px;}.content div { position: absolute; top: 0; left: -30; padding: 10px 0px; z-index: 1; opacity: 0; -webkit-transition: opacity linear 0.1s; -moz-transition: opacity linear 0.1s; -o-transition: opacity linear 0.1s; -ms-transition: opacity linear 0.1s; transition: opacity linear 0.1s; width: 100%;}.wikivbtops input.tab-selector-1:checked ~ .content .content-1,.wikivbtops input.tab-selector-2:checked ~ .content .content-2,.wikivbtops input.tab-selector-3:checked ~ .content .content-3,.wikivbtops input.tab-selector-4:checked ~ .content .content-4 { z-index: 100; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: opacity ease-out 0.2s 0.1s; -moz-transition: opacity ease-out 0.2s 0.1s; -o-transition: opacity ease-out 0.2s 0.1s; -ms-transition: opacity ease-out 0.2s 0.1s; transition: opacity ease-out 0.2s 0.1s;}.content div h2,.content div h3{ color: #398080; font-family:
    BKoodakBold
    ; }.content div p { font-size: 12px; line-height: 22px; font-style: italic; text-align: right; margin: 0; color: #777; padding-left: 15px; font-family:
    BKoodakBold
    ; border-left: 8px solid rgba(63,148,148, 0.1);}.content div span{font: 13px
    BKoodakBold
    ;color: #00b2e3;background: url(http://www.up.wikivb.ir/images/mdueheokrtaqhnljjaa.png) no-repeat right 7px;padding: 5px 10px;padding-right: 21px;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;}.content div span:hover{ background: url(http://www.up.wikivb.ir/images/m3otoqy3e3aylysdkqdq.png) no-repeat right 7px; color: gray; }
    کد های زیر رو هم جایگزین کدهای قبلی کنید :

    کد:
    <!-- HTML/CSS Bests == By WikiVB.IR -->    <section class="wikivbtops">
                    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
                    <label for="tab-1" class="tab-label-1">تاپيکهاي مهم</label>
            
                    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
                    <label for="tab-2" class="tab-label-2">پرسشهاي متداول</label>
            
                    <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
                    <label for="tab-3" class="tab-label-3">آخرين خبر ها</label>
                
                    <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
                    <label for="tab-4" class="tab-label-4">برترين استايل ها</label>
                
                    <div class="clear-shadow"></div>
                    
                    <div class="content">
                        <div class="content-1">
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    </tr>
    </table>
                        </div>
                        <div class="content-2">
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    </tr>
    </table>
                        </div>
                        <div class="content-3">
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    </tr>
    </table>
                        </div>
                        <div class="content-4">
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    </tr>
    </table>
                        </div>
                    </div>
                </section>
    <!-- HTML/CSS Bests == By WikiVB.IR -->
    تمام فونتای داخلش رو
    BKoodakBold کردم !

    2 نفر از اعضا پست AminX را پسندیده اند


    .....

  5. #25
    Mehrab JT آنلاین نیست.
    Mehrab JT
    کاربر فعال و مفيد
    1,240نوشته1,400مورد پسند

    تاریخ عضویت
    Jun 2013
    شماره عضویت
    1963
    پسندیده است
    2,945 پست
    بلاگ
    4 پست
    میزان امتیاز
    1408
    telegram.me/mehrab_jt
    نقل قول نوشته اصلی توسط MR.Responder نمایش پست ها
    اینا رو به additional.css اضافه کنید :

    کد:
    /*--- HTML/CSS Bests By WikiVB.IR ---*/
    /*--- Don't Delete This CopyRight Please ---*//*------ Best's For Free In WikiVB.Ir ------*/a{    text-decoration: none;}.container{    width: 100%;    position: relative;}.clr{    clear: both;    padding: 0;    height: 0;    margin: 0;}.container > header{    margin: 10px;    padding: 20px 10px 10px 10px;    position: relative;    display: block;    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);    text-align: center;}.container > header h1{    font-size: 40px;    line-height: 40px;    margin: 0;    position: relative;    font-weight: 300;    color: #128680;    text-shadow: 1px 1px 1px rgba(255,255,255,0.7);}.container > header h1 span{    font-weight: 700;}.container > header h2{    font-size: 14px;    font-weight: 300;    margin: 0;    padding: 15px 0 5px 0;    color: #7c8e8d;    font-family: 
    BKoodakBold
    ; font-style: italic; text-shadow: 1px 1px 1px rgba(255,255,255,0.9);}/* Header Style */.codrops-top{ line-height: 24px; font-size: 11px; background: #fff; background: rgba(255, 255, 255, 0.6); text-transform: uppercase; z-index: 9999; position: relative; font-family:
    BKoodakBold
    ; box-shadow: 1px 0px 2px rgba(0,0,0,0.2);}.codrops-top a{ padding: 0px 10px; letter-spacing: 1px; color: #333; display: inline-block;}.codrops-top a:hover{ background: rgba(255,255,255,0.3);}.codrops-top span.right{ float: right;}.codrops-top span.right a{ float: left; display: block;}/* Demo Buttons Style */.codrops-demos{ text-align:center; display: block; line-height: 30px; padding: 5px 0px;}.codrops-demos a{ display: inline-block; margin: 0px 4px; padding: 0px 6px; color: #aaa; line-height: 20px; font-size: 13px; text-shadow: 1px 1px 1px #fff; border: 1px solid #ddd; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */ background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */ box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);}.codrops-demos a:hover{ color: #333; box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);}.codrops-demos a:active{ background: #fff;}.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover{ background: #f6f6f6; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */}.wikivbtops { position: relative; margin: 10px auto; margin-left: 20px;}.wikivbtops input { position: absolute; z-index: 1000; width: 120px; height: 40px; left: 0px; top: 0px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); cursor: pointer;}.wikivbtops input#tab-2{ left: 120px;}.wikivbtops input#tab-3{ left: 240px;}.wikivbtops input#tab-4{ left: 360px;}.wikivbtops label {background: rgb(40,195,231); /* Old browsers */background: -moz-linear-gradient(top, rgba(40,195,231,1) 0%, rgba(3,158,194,1) 49%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(40,195,231,1)), color-stop(49%,rgba(3,158,194,1))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, rgba(40,195,231,1) 0%,rgba(3,158,194,1) 49%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, rgba(40,195,231,1) 0%,rgba(3,158,194,1) 49%); /* Opera 11.10+ */background: -ms-linear-gradient(top, rgba(40,195,231,1) 0%,rgba(3,158,194,1) 49%); /* IE10+ */background: linear-gradient(to bottom, rgba(40,195,231,1) 0%,rgba(3,158,194,1) 49%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28c3e7', endColorstr='#039ec2',GradientType=0 ); /* IE6-9 */ line-height: 40px; height: 40px; position: relative; padding: 0 20px; float: right; display: block; color: #fff; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; text-align: center; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); border-radius: 3px 3px 0 0; box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1); font: 20px
    BKoodakBold
    ;} .wikivbtops label:after { content: ''; background: #fff; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; display: block;}.wikivbtops input:hover + label {background: rgb(3,158,194); /* Old browsers */background: -moz-linear-gradient(top, rgba(3,158,194,1) 51%, rgba(40,195,231,1) 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,rgba(3,158,194,1)), color-stop(100%,rgba(40,195,231,1))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, rgba(3,158,194,1) 51%,rgba(40,195,231,1) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, rgba(3,158,194,1) 51%,rgba(40,195,231,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, rgba(3,158,194,1) 51%,rgba(40,195,231,1) 100%); /* IE10+ */background: linear-gradient(to bottom, rgba(3,158,194,1) 51%,rgba(40,195,231,1) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#039ec2', endColorstr='#28c3e7',GradientType=0 ); /* IE6-9 */}.wikivbtops label:first-of-type { z-index: 4; box-shadow: 2px 0 2px rgba(0,0,0,0.1);}.tab-label-2 { z-index: 3;}.tab-label-3 { z-index: 2;}.tab-label-4 { z-index: 1;}.wikivbtops input:checked + label { background: #fff; z-index: 999999999999; color: #28c3e7; text-shadow: 0 0 0; box-shadow: 0px 2px #fff; border: 1px solid rgba(0,0,0,0.13); border-bottom: 0px; border-radius: 3px;}.clear-shadow { clear: both;}.content { background: #fff; position: relative; width: 100%; height: 140px; z-index: 99999999; box-shadow: 0 3px 3px -2px rgba(0,0,0,0.2); border-radius: 6px 0 6px 6px; border:1px solid rgba(0,0,0,0.13); border-bottom: 6px solid rgba(0,0,0,0.13); padding-right: 20px;}.content div { position: absolute; top: 0; left: -30; padding: 10px 0px; z-index: 1; opacity: 0; -webkit-transition: opacity linear 0.1s; -moz-transition: opacity linear 0.1s; -o-transition: opacity linear 0.1s; -ms-transition: opacity linear 0.1s; transition: opacity linear 0.1s; width: 100%;}.wikivbtops input.tab-selector-1:checked ~ .content .content-1,.wikivbtops input.tab-selector-2:checked ~ .content .content-2,.wikivbtops input.tab-selector-3:checked ~ .content .content-3,.wikivbtops input.tab-selector-4:checked ~ .content .content-4 { z-index: 100; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: opacity ease-out 0.2s 0.1s; -moz-transition: opacity ease-out 0.2s 0.1s; -o-transition: opacity ease-out 0.2s 0.1s; -ms-transition: opacity ease-out 0.2s 0.1s; transition: opacity ease-out 0.2s 0.1s;}.content div h2,.content div h3{ color: #398080; font-family:
    BKoodakBold
    ; }.content div p { font-size: 12px; line-height: 22px; font-style: italic; text-align: right; margin: 0; color: #777; padding-left: 15px; font-family:
    BKoodakBold
    ; border-left: 8px solid rgba(63,148,148, 0.1);}.content div span{font: 13px
    BKoodakBold
    ;color: #00b2e3;background: url(http://www.up.wikivb.ir/images/mdueheokrtaqhnljjaa.png) no-repeat right 7px;padding: 5px 10px;padding-right: 21px;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;}.content div span:hover{ background: url(http://www.up.wikivb.ir/images/m3otoqy3e3aylysdkqdq.png) no-repeat right 7px; color: gray; }
    کد های زیر رو هم جایگزین کدهای قبلی کنید :

    کد:
    <!-- HTML/CSS Bests == By WikiVB.IR -->    <section class="wikivbtops">
                    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
                    <label for="tab-1" class="tab-label-1">تاپيکهاي مهم</label>
            
                    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
                    <label for="tab-2" class="tab-label-2">پرسشهاي متداول</label>
            
                    <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
                    <label for="tab-3" class="tab-label-3">آخرين خبر ها</label>
                
                    <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
                    <label for="tab-4" class="tab-label-4">برترين استايل ها</label>
                
                    <div class="clear-shadow"></div>
                    
                    <div class="content">
                        <div class="content-1">
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    </tr>
    </table>
                        </div>
                        <div class="content-2">
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    </tr>
    </table>
                        </div>
                        <div class="content-3">
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    </tr>
    </table>
                        </div>
                        <div class="content-4">
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    </tr>
    </table>
                        </div>
                    </div>
                </section>
    <!-- HTML/CSS Bests == By WikiVB.IR -->
    تمام فونتای داخلش رو
    BKoodakBold کردم !
    بسیار لطف کردید

    - - - Updated - - -

    نقل قول نوشته اصلی توسط MR.Responder نمایش پست ها
    اینا رو به additional.css اضافه کنید :

    کد:
    /*--- HTML/CSS Bests By WikiVB.IR ---*/
    /*--- Don't Delete This CopyRight Please ---*//*------ Best's For Free In WikiVB.Ir ------*/a{    text-decoration: none;}.container{    width: 100%;    position: relative;}.clr{    clear: both;    padding: 0;    height: 0;    margin: 0;}.container > header{    margin: 10px;    padding: 20px 10px 10px 10px;    position: relative;    display: block;    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);    text-align: center;}.container > header h1{    font-size: 40px;    line-height: 40px;    margin: 0;    position: relative;    font-weight: 300;    color: #128680;    text-shadow: 1px 1px 1px rgba(255,255,255,0.7);}.container > header h1 span{    font-weight: 700;}.container > header h2{    font-size: 14px;    font-weight: 300;    margin: 0;    padding: 15px 0 5px 0;    color: #7c8e8d;    font-family: 
    BKoodakBold
    ; font-style: italic; text-shadow: 1px 1px 1px rgba(255,255,255,0.9);}/* Header Style */.codrops-top{ line-height: 24px; font-size: 11px; background: #fff; background: rgba(255, 255, 255, 0.6); text-transform: uppercase; z-index: 9999; position: relative; font-family:
    BKoodakBold
    ; box-shadow: 1px 0px 2px rgba(0,0,0,0.2);}.codrops-top a{ padding: 0px 10px; letter-spacing: 1px; color: #333; display: inline-block;}.codrops-top a:hover{ background: rgba(255,255,255,0.3);}.codrops-top span.right{ float: right;}.codrops-top span.right a{ float: left; display: block;}/* Demo Buttons Style */.codrops-demos{ text-align:center; display: block; line-height: 30px; padding: 5px 0px;}.codrops-demos a{ display: inline-block; margin: 0px 4px; padding: 0px 6px; color: #aaa; line-height: 20px; font-size: 13px; text-shadow: 1px 1px 1px #fff; border: 1px solid #ddd; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */ background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */ box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);}.codrops-demos a:hover{ color: #333; box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);}.codrops-demos a:active{ background: #fff;}.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover{ background: #f6f6f6; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */}.wikivbtops { position: relative; margin: 10px auto; margin-left: 20px;}.wikivbtops input { position: absolute; z-index: 1000; width: 120px; height: 40px; left: 0px; top: 0px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); cursor: pointer;}.wikivbtops input#tab-2{ left: 120px;}.wikivbtops input#tab-3{ left: 240px;}.wikivbtops input#tab-4{ left: 360px;}.wikivbtops label {background: rgb(40,195,231); /* Old browsers */background: -moz-linear-gradient(top, rgba(40,195,231,1) 0%, rgba(3,158,194,1) 49%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(40,195,231,1)), color-stop(49%,rgba(3,158,194,1))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, rgba(40,195,231,1) 0%,rgba(3,158,194,1) 49%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, rgba(40,195,231,1) 0%,rgba(3,158,194,1) 49%); /* Opera 11.10+ */background: -ms-linear-gradient(top, rgba(40,195,231,1) 0%,rgba(3,158,194,1) 49%); /* IE10+ */background: linear-gradient(to bottom, rgba(40,195,231,1) 0%,rgba(3,158,194,1) 49%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28c3e7', endColorstr='#039ec2',GradientType=0 ); /* IE6-9 */ line-height: 40px; height: 40px; position: relative; padding: 0 20px; float: right; display: block; color: #fff; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; text-align: center; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); border-radius: 3px 3px 0 0; box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1); font: 20px
    BKoodakBold
    ;} .wikivbtops label:after { content: ''; background: #fff; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; display: block;}.wikivbtops input:hover + label {background: rgb(3,158,194); /* Old browsers */background: -moz-linear-gradient(top, rgba(3,158,194,1) 51%, rgba(40,195,231,1) 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,rgba(3,158,194,1)), color-stop(100%,rgba(40,195,231,1))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, rgba(3,158,194,1) 51%,rgba(40,195,231,1) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, rgba(3,158,194,1) 51%,rgba(40,195,231,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, rgba(3,158,194,1) 51%,rgba(40,195,231,1) 100%); /* IE10+ */background: linear-gradient(to bottom, rgba(3,158,194,1) 51%,rgba(40,195,231,1) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#039ec2', endColorstr='#28c3e7',GradientType=0 ); /* IE6-9 */}.wikivbtops label:first-of-type { z-index: 4; box-shadow: 2px 0 2px rgba(0,0,0,0.1);}.tab-label-2 { z-index: 3;}.tab-label-3 { z-index: 2;}.tab-label-4 { z-index: 1;}.wikivbtops input:checked + label { background: #fff; z-index: 999999999999; color: #28c3e7; text-shadow: 0 0 0; box-shadow: 0px 2px #fff; border: 1px solid rgba(0,0,0,0.13); border-bottom: 0px; border-radius: 3px;}.clear-shadow { clear: both;}.content { background: #fff; position: relative; width: 100%; height: 140px; z-index: 99999999; box-shadow: 0 3px 3px -2px rgba(0,0,0,0.2); border-radius: 6px 0 6px 6px; border:1px solid rgba(0,0,0,0.13); border-bottom: 6px solid rgba(0,0,0,0.13); padding-right: 20px;}.content div { position: absolute; top: 0; left: -30; padding: 10px 0px; z-index: 1; opacity: 0; -webkit-transition: opacity linear 0.1s; -moz-transition: opacity linear 0.1s; -o-transition: opacity linear 0.1s; -ms-transition: opacity linear 0.1s; transition: opacity linear 0.1s; width: 100%;}.wikivbtops input.tab-selector-1:checked ~ .content .content-1,.wikivbtops input.tab-selector-2:checked ~ .content .content-2,.wikivbtops input.tab-selector-3:checked ~ .content .content-3,.wikivbtops input.tab-selector-4:checked ~ .content .content-4 { z-index: 100; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: opacity ease-out 0.2s 0.1s; -moz-transition: opacity ease-out 0.2s 0.1s; -o-transition: opacity ease-out 0.2s 0.1s; -ms-transition: opacity ease-out 0.2s 0.1s; transition: opacity ease-out 0.2s 0.1s;}.content div h2,.content div h3{ color: #398080; font-family:
    BKoodakBold
    ; }.content div p { font-size: 12px; line-height: 22px; font-style: italic; text-align: right; margin: 0; color: #777; padding-left: 15px; font-family:
    BKoodakBold
    ; border-left: 8px solid rgba(63,148,148, 0.1);}.content div span{font: 13px
    BKoodakBold
    ;color: #00b2e3;background: url(http://www.up.wikivb.ir/images/mdueheokrtaqhnljjaa.png) no-repeat right 7px;padding: 5px 10px;padding-right: 21px;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;}.content div span:hover{ background: url(http://www.up.wikivb.ir/images/m3otoqy3e3aylysdkqdq.png) no-repeat right 7px; color: gray; }
    کد های زیر رو هم جایگزین کدهای قبلی کنید :

    کد:
    <!-- HTML/CSS Bests == By WikiVB.IR -->    <section class="wikivbtops">
                    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
                    <label for="tab-1" class="tab-label-1">تاپيکهاي مهم</label>
            
                    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
                    <label for="tab-2" class="tab-label-2">پرسشهاي متداول</label>
            
                    <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
                    <label for="tab-3" class="tab-label-3">آخرين خبر ها</label>
                
                    <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
                    <label for="tab-4" class="tab-label-4">برترين استايل ها</label>
                
                    <div class="clear-shadow"></div>
                    
                    <div class="content">
                        <div class="content-1">
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک تاپيک مهم</span></a></td>
    </tr>
    </table>
                        </div>
                        <div class="content-2">
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک پرسش متداول</span></a></td>
    </tr>
    </table>
                        </div>
                        <div class="content-3">
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک خبر جديد</span></a></td>
    </tr>
    </table>
                        </div>
                        <div class="content-4">
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    </tr>
    </table>
    <table width="100%" border="0">
    <tr>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    <td width="35%"><a href="#" ><span style="float: right;">يک استايل برتر</span></a></td>
    </tr>
    </table>
                        </div>
                    </div>
                </section>
    <!-- HTML/CSS Bests == By WikiVB.IR -->
    تمام فونتای داخلش رو
    BKoodakBold کردم !
    کدو رو کجای additional اضافه کنم اولش اضافه کردم محتوای داخل تاپیک ها سفیدد شد تو یه جدول ولی باکس مشکلی نداشت

  6. #26
    parssport آنلاین نیست.
    parssport
    کاربر سايت
    482نوشته532مورد پسند

    تاریخ عضویت
    Mar 2013
    شماره عضویت
    1027
    پسندیده است
    961 پست
    بلاگ
    0 پست
    میزان امتیاز
    542
    www.parssport.net
    نقل قول نوشته اصلی توسط Şŵėēŧŷ ßŏŷ نمایش پست ها
    بسیار لطف کردید

    - - - Updated - - -



    کدو رو کجای additional اضافه کنم اولش اضافه کردم محتوای داخل تاپیک ها سفیدد شد تو یه جدول ولی باکس مشکلی نداشت
    انتهاش

  7. #27
    AminX آنلاین نیست.
    AminX
    مدير بازنشسته
    4,703نوشته6,570مورد پسند

    تاریخ عضویت
    Mar 2013
    شماره عضویت
    984
    پسندیده است
    2,596 پست
    بلاگ
    2 پست
    میزان امتیاز
    6578
    مسئول 2 ستاره
    www.cssnevis.ir
    کدو رو کجای additional اضافه کنم اولش اضافه کردم محتوای داخل تاپیک ها سفیدد شد تو یه جدول ولی باکس مشکلی نداشت
    به اخر additional.css برید و دوتا enter بزنید سپس کدها رو اضافه کنید
    .....

  8. #28
    Mehrab JT آنلاین نیست.
    Mehrab JT
    کاربر فعال و مفيد
    1,240نوشته1,400مورد پسند

    تاریخ عضویت
    Jun 2013
    شماره عضویت
    1963
    پسندیده است
    2,945 پست
    بلاگ
    4 پست
    میزان امتیاز
    1408
    telegram.me/mehrab_jt
    نقل قول نوشته اصلی توسط MR.Responder نمایش پست ها
    به اخر additional.css برید و دوتا enter بزنید سپس کدها رو اضافه کنید
    بازم نشد
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  9. #29
    AminX آنلاین نیست.
    AminX
    مدير بازنشسته
    4,703نوشته6,570مورد پسند

    تاریخ عضویت
    Mar 2013
    شماره عضویت
    984
    پسندیده است
    2,596 پست
    بلاگ
    2 پست
    میزان امتیاز
    6578
    مسئول 2 ستاره
    www.cssnevis.ir
    کد مشکلی نداره !

    دسترسی پ.خ کنید شب روش کار کنم

    - - - Updated - - -

    شما اصلاً کدها رو داخل additional.css نگذاشته بودید مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    انجام شد !
    .....

  10. #30
    پادراررر آنلاین نیست.
    پادراررر
    کاربر سايت
    96نوشته5مورد پسند

    تاریخ عضویت
    Aug 2013
    شماره عضویت
    2756
    پسندیده است
    1 پست
    بلاگ
    پست
    میزان امتیاز
    15
    No Set
    خسته نباشید دوستان عزیز

    کسی از مدیران عزیز این برنامرو برای سایت ما درست میکنه؟

    سپاس از شما

صفحه 3 از 7 نخستنخست 12345 ... آخرینآخرین

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک
مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی