Dodanie możliwości zmiany tła strony

Założony przez Szogi1910.

1 Edycja szablonu headerinclude


Następnie w nim odszukujemy {$stylesheets} i dodajemy zawartość przed nim

<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, { expires365path'/' });
 
   });    
});
</
script

2 Edycja szablonu header



Następnie w nim odszukujemy
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li

Dodaj po
<li ><a href="#" class="bg_style">Wybierz tło</a></li

Odszukaj
{$welcomeblock

Dodaj po
<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

3 Dodanie kodu css do 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;
}


W global.css odnajdź #content następnie usuń  background: #color;

Aby poprawnie dodane tła zadziałamy muszą one znaleźć się w katalogu images z nazwą bg1.png bg2.png itp


Źródło poradnika
http://community.mybb.com/thread-179184.html
Myślę, że o wiele lepszy efekt by był jeśli byłby wysuwany panel z możliwością zmiany czy coś.. Bo mając takie coś cały czas u góry strony to tragedia przy dłuższym użytkowaniu.
Wszystko leży w geście administratora, pole do edycji css jest tylko ograniczone twoją wyobraźnia
Moja propozycja z estetyczniejszym dodaniem:

Edytujemy szablon headerinclude następnie w nim odszukujemy {$stylesheets} i dodajemy zawartość przed nim:
<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, { expires365path'/' });
 
   });
});
</
script

Do szablonu global.css dodaj:
/*** Background style ***/
.bg_preview:before,.bg_preview:after {
 
   content:" ";
 
   display:table
}
.
bg_preview:after{
 
   clear:both
}
.
bg_preview {
 
   displaynone;
}
.
bg_preview a {
 
   floatleft;
 
   width18%;
 
   height80px;
 
   box-sizingborder-box;
 
   margin1%;
 
   displayinline-block;
 
   vertical-alignmiddle;
 
   background-repeatno-repeat;
 
   background-sizecover;
 
   border2px solid #CECECE;


Edytuj szablon usercp znajdziesz go w sekcji Panel użytkownika

Odszukaj:
{$usergroup}<br /> 
Po tym dodaj:
<b>Tło profilu:</b> <a href="#" class="bg_style">Wybierz obrazek</a><br

Odszukaj:
{$referral_info
Po tym dodaj:
<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

Efekt:    
Cytat:w pół dnia stałeś się lepszym pytonistą niż kawenanowo kiedykolwiek programisto :3 ~ Riess 13.11.2018 16:28
Cytat:ale z tą nazwą to fyeem ma racje  ~ Divir 29.07.2019 16:08



Użytkownicy przeglądający ten wątek:

1 gości