An option to choose wallpapers and images as background of forum.
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. <br />
<br />
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 <span style="font-weight: bold;" class="mycode_b"><span style="font-style: italic;" class="mycode_i">images</span></span><span style="font-weight: bold;" class="mycode_b"><span style="font-style: italic;" class="mycode_i">/js/ </span></span>flolder.<br />
<br />
1.a: download the <a href=" " target="_blank" rel="noopener" class="mycode_url">background.zip</a> folder , and extract that and then go to your root/imges folder creat a folder naming "<span style="font-weight: bold;" class="mycode_b"><span style="font-style: italic;" class="mycode_i">bg"</span></span> and then upload that file to it.<br />
<br />
<br />
2. 2nd just copy this css codes and paste it in the global.css at the last.<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-php">/** 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 **/
</code></pre><br />
find in global.css #content id<br />
<br />
and remove the line<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-php">background: #fff;</code></pre><br />
<br />
3. after all these work go to you headerinclude template and click edit. the paste this code at the end of the template.<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-php"><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></code></pre><br />
After all this stuff the main work is in header template. Come to the header template then click edit.<br />
<br />
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. <img src=" " alt="Big Grin" title="Big Grin" class="smilie smilie_5" /><br />
<br />
then in header template remove all the codes and paste this codes as given below. <br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-php"><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 /></code></pre><br />
Preview :- <br />
<img src=" " data-original-url="https://i.ibb.co/C5SSnF4/Screenshot-2020-10-26-09-23-49-488-com-android-chrome.jpg" loading="lazy" alt="[Image: Screenshot-2020-10-26-09-23-49-488-com-a...chrome.jpg]" class="mycode_img" /><br />
<hr class="mycode_hr" />
Resources taken from :- <a href=" " target="_blank" rel="noopener" class="mycode_url">HRM</a>'s <a href=" " target="_blank" rel="noopener" class="mycode_url">Flow Theme</a> .<br />
<br />
Edited: something was wrong , i have edited. Now You can try.<br />
<br />
Notice :- If any error occurring regarding this then pm me or mention here... i will be glad to help you. ☺<br /><!-- start: postbit_attachments_attachment -->
<br /><!-- start: attachment_icon -->
<img src=" " title="Zip File" border="0" alt=".zip" />
<!-- end: attachment_icon --> <a href="attachment.php?aid=43413" target="_blank" title="">js.zip</a> (Size: 6.57 KB / Downloads: 49)
<!-- end: postbit_attachments_attachment -->
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. <br />
<br />
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 <span style="font-weight: bold;" class="mycode_b"><span style="font-style: italic;" class="mycode_i">images</span></span><span style="font-weight: bold;" class="mycode_b"><span style="font-style: italic;" class="mycode_i">/js/ </span></span>flolder.<br />
<br />
1.a: download the <a href=" " target="_blank" rel="noopener" class="mycode_url">background.zip</a> folder , and extract that and then go to your root/imges folder creat a folder naming "<span style="font-weight: bold;" class="mycode_b"><span style="font-style: italic;" class="mycode_i">bg"</span></span> and then upload that file to it.<br />
<br />
<br />
2. 2nd just copy this css codes and paste it in the global.css at the last.<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-php">/** 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 **/
</code></pre><br />
find in global.css #content id<br />
<br />
and remove the line<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-php">background: #fff;</code></pre><br />
<br />
3. after all these work go to you headerinclude template and click edit. the paste this code at the end of the template.<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-php"><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></code></pre><br />
After all this stuff the main work is in header template. Come to the header template then click edit.<br />
<br />
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. <img src=" " alt="Big Grin" title="Big Grin" class="smilie smilie_5" /><br />
<br />
then in header template remove all the codes and paste this codes as given below. <br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-php"><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 /></code></pre><br />
Preview :- <br />
<img src=" " data-original-url="https://i.ibb.co/C5SSnF4/Screenshot-2020-10-26-09-23-49-488-com-android-chrome.jpg" loading="lazy" alt="[Image: Screenshot-2020-10-26-09-23-49-488-com-a...chrome.jpg]" class="mycode_img" /><br />
<hr class="mycode_hr" />
Resources taken from :- <a href=" " target="_blank" rel="noopener" class="mycode_url">HRM</a>'s <a href=" " target="_blank" rel="noopener" class="mycode_url">Flow Theme</a> .<br />
<br />
Edited: something was wrong , i have edited. Now You can try.<br />
<br />
Notice :- If any error occurring regarding this then pm me or mention here... i will be glad to help you. ☺<br /><!-- start: postbit_attachments_attachment -->
<br /><!-- start: attachment_icon -->
<img src=" " title="Zip File" border="0" alt=".zip" />
<!-- end: attachment_icon --> <a href="attachment.php?aid=43413" target="_blank" title="">js.zip</a> (Size: 6.57 KB / Downloads: 49)
<!-- end: postbit_attachments_attachment -->