Demo:
![.png]( "PNG Image")
Ảnh chụp màn hình 2015-09-15 tại 23.02.58.png (Size: 169.38 KB / Downloads: 17)
I will guide you to change the background with jquery, css and cookies
1. In the template: headerinclude
Find: {$stylesheets}
Added before:
2. In the template: Header Template -->header
Find:
Added after:
Find: {$welcomeblock}
Added after:
3. Add css into global.css
and find: #content remove: background: #fff;
Note: upload your background to follow the path.
eg: images/bg1.png
Done !!!
Ảnh chụp màn hình 2015-09-15 tại 23.02.58.png (Size: 169.38 KB / Downloads: 17)
I will guide you to change the background with jquery, css and cookies
1. In the template: headerinclude
Find: {$stylesheets}
Added before:
PHP Code:
<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:
PHP Code:
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
Added after:
PHP Code:
<li ><a href="#" class="bg_style">Change Background</a></li>
Find: {$welcomeblock}
Added after:
PHP Code:
<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
PHP Code:
/*** 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 !!!