MyBB Community Forums

MyBB Community Forums > Resources > Tutorials > An option to choose wallpapers and images as background of forum.
Full Version: An option to choose wallpapers and images as background of forum.
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

PARADOX987

2020-10-26, 02:36 AM
In this tutorial I will show you how can you and your forum members save a image as their forum background with an stylish view. 

1. 1st download the attachment file what i has given below in attachment and extract that , and then go to your root/images folder , then creat folder naming "js" upload files into your root images/js/ flolder.

1.a:  download the background.zip folder , and extract that and then go to your root/imges folder creat a folder naming "bg"  and then upload that file to it.


2. 2nd just copy this css codes and paste it in the global.css at the last.
/** start **/
.semiwrap {
    width: 85%;
    margin: auto;
}
@media(max-width: 540px) {
.hide-540px {
    display: none !important;
  };
}
@media(max-width: 540px) {
.show-540px {
		display: block !important;
	};
}
@media(min-width: 541px) {

.show-540px {
		display: none !important;
	};
}

.bg_style {
    float: right;
    cursor: pointer;
    margin-left: 10px;
	color: #B0ADAD !important;
	font-size: 17px;
}
.bg_style:hover {
	color: #FFF !important;
	text-decoration: none;
  	transition: all 0.5s ease;
}

.ribbon:before {
    content: '';
    width: 0; height: 0;
    border-style: solid;
    border-width: 5px 5px;
    border-color: #B9B9B9 #B9B9B9 transparent transparent;
    position: absolute; left: 0; top: 28px;
}
.ribbon:after {
    content: '';
    width: 0; height: 0;
    border-style: solid;
    border-width: 5px 5px;
    border-color: #B9B9B9 transparent transparent #B9B9B9;
    position: absolute; right: 0; top: 28px;
}

/*** Background Picker style ***/
.fixed_bg {
	background-size: cover !important;
}
.bg_preview:before,.bg_preview:after {
    content:" ";
    display:table
}
.bg_preview:after{
    clear:both
}
.bg_preview {
    display: none;
    border: 1px solid #DADADA;
    background: #FFF;
    padding: 5px !important;
    width: 300px;
    height: auto;
    z-index: 999;
    float: right;
    position: absolute;
    right: 150px;
	}
.bg_preview a {
    float: left;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    margin: 1%;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #CECECE;
    cursor: pointer;
} 

.bg_preview a:hover {
	border: 2px solid #50EC00
}

.bg_more {
	display: none;
    width: 50px;
    cursor: pointer;
    background: #FFF;
    color: #00E192;
    text-align: center;
    border-radius: 2px;
}

.bg_preview_more {
    display: none;
}
.bg_preview_more:before,.bg_preview_more:after {
    content:" ";
    display:table
}
.bg_preview_more:after{
    clear:both
}

.bg_preview_more 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;
}

.bg_preview_more a:hover {
	border: 2px solid #50EC00
}
/** end **/

find in global.css #content id

and remove the line
background: #fff;


3. after all these work go to you headerinclude template and click edit. the paste this code at the end of the template.
<script type="text/javascript" src="{$mybb->settings['bburl']}/images/js/flow.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/images/js/cookie.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/images/js/tipsy.js"></script>

After all this stuff the main work is in header template. Come to the header template then click edit.

notice :- if you are using mybb default theme then it would be easy to get it clear and smooth. Well i am using default theme so as i have done , i am telling that trick what i have done in my forum.  Big Grin

then in header template remove all the codes and paste this codes as given below. 
<div id="container">
		<a name="top" id="top"></a>
		<div id="header">
<div id="logo">
				<div class="wrapper">
					<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}"/></a>
					<ul class="menu top_links">
						{$menu_portal}
						{$menu_search}
						{$menu_memberlist}
						{$menu_calendar}
						<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>			</ul>
				</div></div>
			
			<div id="panel">
				<div class="upper">
					<div class="semiwrap">			<span style="float: right; cursor: default;">&nbsp;&nbsp;</span>
						<a class="bg_style" title="Change The Background Of Theme"><i class="fa fa-picture-o"> Change Background </i></a>
						{$welcomeblock}
						<div class="bg_preview"><div class="ribbon"><b>Theme Customizer</b></div>
						<div style="margin-top: 100px; margin-bottom: 15px;text-align: center;"><b>Background Patterns</b></div>
                            <div style="margin-left: 8px;">
								<a id="images/bg/backgrounds/bg1.png" style="background: url('images/bg/backgrounds/bg1.png')" class="bg_n"></a>
                            <a id="images/bg/backgrounds/bg2.png" style="background: url('images/bg/backgrounds/bg2.png');" class="bg_n"></a>
                            <a id="images/bg/backgrounds/bg3.png" style="background: url('images/bg/backgrounds/bg3.png');" class="bg_n"></a>
                            <a id="images/bg/backgrounds/bg4.png" style="background: url('images/bg/backgrounds/bg4.png');" class="bg_n"></a>
                            <a id="images/bg/backgrounds/bg5.png" style="background: url('images/bg/backgrounds/bg5.png');" class="bg_n"></a></div>
							<div style="margin-top: 100px; margin-bottom: 15px;text-align: center;"><b>Background Images</b></div>
						    <div style="margin-left: 8px;">
								<a id="images/bg/backgrounds/bg6.jpg" style="background: url('images/bg/backgrounds/bg6.jpg');" class="fixed_bg"></a>
                            <a id="images/bg/backgrounds/bg7.jpg" style="background: url('images/bg/backgrounds/bg7.jpg');" class="fixed_bg"></a>
						    <a id="images/bg/backgrounds/bg8.jpg" style="background: url('images/bg/backgrounds/bg8.jpg');" class="fixed_bg"></a>
						    <a id="images/bg/backgrounds/bg9.jpg" style="background: url('images/bg/backgrounds/bg9.jpg');" class="fixed_bg"></a>
                            <a id="images/bg/backgrounds/bg10.jpg" style="background: url('images/bg/backgrounds/bg10.jpg');" class="fixed_bg"></a></div>
							<div style="margin-top: 100px; margin-bottom: 15px;text-align: center;"><b>Custom Background</b></div>
						<input type="text" id="url" value="" placeholder="Put URL of your Background..." class="urlimage" />
						<input type="button" value="Update" class="button" onclick="updateURL()" />
						<p><i style="font-size: 15px;" class="fa fa-picture-o"></i> Above URL is an Image <i class="fa fa-check-square clickedimage" style="cursor: pointer; font-size: 18px;"></i><i class="fa fa-square-o unclickedimage" style="cursor: pointer; font-size: 18px;"></i></p></center>
						</div>
					<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
				<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
			</div>
		</div>
		<div id="content">
			<div class="wrapper">
				{$pm_notice}
				{$remote_avatar_notice}
				{$bannedwarning}
				{$bbclosedwarning}
				{$modnotice}
				{$pending_joinrequests}
				{$awaitingusers}
				<navigation>
				<br />

Preview :- 
[Image: Screenshot-2020-10-26-09-23-49-488-com-a...chrome.jpg]
Resources taken from :- HRM's Flow Theme .

Edited: something was wrong , i have edited. Now You can try.

Notice :- If any error occurring regarding this then pm me or mention here... i will be glad to help you. ☺

xzen404

2020-10-26, 04:54 AM
Uncaught TypeError: $(...)[_$_f795[32]] is not a function
at HTMLDocument.eval (eval at <anonymous> (bg.min.js:8), <anonymous>:1:2086)
at c (jscripts.js:1)
at Object.fireWith [as resolveWith] (jscripts.js:1)
at Function.ready (jscripts.js:1)
at HTMLDocument.s (jscripts.js:1)

Darth Apple

2020-10-26, 05:11 AM
Will probably use this. My members have been requesting this for a while. Thank you.

PARADOX987

2020-10-26, 06:11 AM
(2020-10-26, 04:54 AM)xzen404 Wrote: [ -> ]Uncaught TypeError: $(...)[_$_f795[32]] is not a function
    at HTMLDocument.eval (eval at <anonymous> (bg.min.js:8), <anonymous>:1:2086)
    at c (jscripts.js:1)
    at Object.fireWith [as resolveWith] (jscripts.js:1)
    at Function.ready (jscripts.js:1)
    at HTMLDocument.s (jscripts.js:1)

I don't know what's the problem occuring in your forum , well i can help you , but i have to get the admin control for some time....
i think there was a problem with my given jscripts , well i have updated the jscripts. check again.
MyBB Community Forums > Resources > Tutorials > An option to choose wallpapers and images as background of forum.