Dodanie możliwości zmiany tła strony

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, { expires: 365, path: '/' });
    });    
});
</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, { expires: 365, path: '/' });
    });
});
</script> 


Do szablonu global.css dodaj:

/*** 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;
} 


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: