[For 1.8] Choose background with jquery and css, cookie
#1
Demo:    

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 !!!
Expo - Fully Responsive For MyBB 1.8
https://community.mybb.com/thread-217535.html

Only $25
Reply
#2
This user has been denied support. This user has been denied support.
works fine. thanks for sharing Wink
Reply
#3
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.
Reply
#4
IMages is repeating??? How do I fix this?
Reply
#5
Thank you.
Reply
#6
What about the body background I have a background image for that?
Technologx Support Forum
Check out UPicMe there you can upload and share your pics!
Please give me a + If I've helped.
Reply
#7
Is there a way to do this with the header banner?
Reply
#8
(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.
Expo - Fully Responsive For MyBB 1.8
https://community.mybb.com/thread-217535.html

Only $25
Reply
#9
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.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)