هاست لینوکس

آخرین بسته‌ی MyBB: نسخه‌ی 1.8.22 MyBB منتشر شد



امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش تغییر پس زمینه بوسیله جیکوئری و css
#1
با این آموزش میتونید پس زمینه فروم خودتون رو با عکس تغییر بدین

1 - تو قالب headerinclude تگ {$stylesheets} رو پیدا کنید و کدهای زیر رو بعد از اون قرار بدین




کد:
<script type="text/javascript">
$(document).ready(function(){    
   if($.cookie('background')){    
       $("body").css("backgroundImage", "url(" + "images/" + $.cookie("background") + ".png)");
   };
   $(".bg_style").click(function () {  
        $(".bg_preview").slideToggle('fast');
        return false;
   });
   $(".bg_preview a").click(function() {
       var bg_id = $(this).attr("id");
         $("body").css("backgroundImage", "url(" + "images/" + bg_id + ".png)");
       $.cookie('background', bg_id, { expires: 365, path: '/' });
   });    
});
</script>

2 - در قالب [b]Header Template -->header [/b]تگ زیر رو پیدا کنید



کد:
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>

و کد زیر رو بعد از اون قرار بدین



کد:
<li ><a href="#" class="bg_style">تغببر پس زمینه</a></li>

تگ {$welcomeblock} رو پیدا کنید و کدهای زیر رو بعد از اون قرار بدین




کد:
<div class="wrapper">        
                   <div class="bg_preview">
                           <a id="bg1" href="#" style="background: url('images/bg1.png');"></a>
                           <a id="bg2" href="#" style="background: url('images/bg2.png');"></a>
                           <a id="bg3" href="#" style="background: url('images/bg3.png');"></a>
                           <a id="bg4" href="#" style="background: url('images/bg4.png');"></a>
                           <a id="bg5" href="#" style="background: url('images/bg5.png');"></a>
                      </div>
           </div>


و کدهای css زیر global.css قرار بدین



کد:
/*** Background style ***/
.bg_preview:before,.bg_preview:after {
   content:" ";
   display:table
}
.bg_preview:after{
   clear:both
}
.bg_preview {
   display: none;
}
.bg_preview a {
   float: left;
   width: 18%;
   height: 80px;
   box-sizing: border-box;
   margin: 1%;
   display: inline-block;
   vertical-align: middle;
   background-repeat: no-repeat;
   background-size: cover;
   border: 2px solid #CECECE;
}

و همچنین کلاس #content رو پیدا و [b]background: #fff; [/b]رو حذف کنید

عکسها رو هم در پوشه images آپلود کنید


منبع : http://community.mybb.com/thread-179184.html

ترجمه : انجمن پارسیان دانلود
پاسخ
 سپاس شده توسطashpazkhanoom (۱۳۹۵/۲/۱۲، ۰۹:۲۲:۵۴ صبح) ، firstboy000 (۱۳۹۵/۲/۱۲، ۰۹:۲۳:۵۰ صبح)


پرش به انجمن:


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