MyBB Community Forums

Demo: [attachment=35072]

I will guide you to change the background with jquery, css and cookies


1. In the template: headerinclude
Find:  {$stylesheets}
Added before:

<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. In the template: Header Template -->header

Find:

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

Added after:

<li ><a href="#" class="bg_style">Change Background</a></li>

Find: {$welcomeblock}

Added after:

<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. Add css into 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;
}

and find: #content remove: background: #fff;

Note: upload your background to follow the path.
eg: images/bg1.png


Done !!!

works fine. thanks for sharing

nice tho.

$(document).ready(function(){    
    if($.cookie('background')){     
        $("body").css("backgroundImage", "url("  + $.cookie("background") + ")");
		$("body").css("background-size", "cover");
    };
    $(".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(" +  bg_id + ")");
		 $("body").css("background-size", "cover");
        $.cookie('background', bg_id, { expires: 365, path: '/' });
    });    
});
</script> 

but i changed it alil.

use mine if you are using images from urls instead of hosted on your own site.

i have added background-size: cover to make it cover the whole page instead of repeating.

IMages is repeating??? How do I fix this?

Thank you.

What about the body background I have a background image for that?

Is there a way to do this with the header banner?

(2017-03-21, 05:52 AM)PunkSinatra Wrote: [ -> ]Is there a way to do this with the header banner?

On paragraph js, find the "body" replaced by another class.

Does anyone have an updated guide for this? Attempting to build up a theme and wanted one for my website as this tutorial no longer works.