Add Charm Bar On IP Board

Add Charm Bar On IP Board. To make the charm bar on board the actual IP and it simply is no easy way, for that day I will share the way. Well but you know not to? what the charm bar? if do not know please check in the picture that I will give below, and please follow the installation tutorial also.

In Windows 8 has an interesting feature called Carm Bar.
Now I will describe how to create such menu in your
Forum IPB.

To do this,

• open the Admin CP
• Look & Feel 
• Select Template
• Global Templates
•  globalTemplate
• Find it in the template:

<!-- ::: CONTAINER AREA ::: -->
<div id='wf-container' class='clearfix'>

Immediately after (bottom), put the following code:

<div class="showcharm" onmouseover="document.getElementById('charmbar').className='charmbar1'" onmousemove="document.getElementById('hidecharm').className='hidecharm1'">&nbsp;</div>
<div id="hidecharmmenu" class="hidecharm0" onclick="document.getElementById('hidecharm').className='hidecharm0'; document.getElementById('hidecharmmenu').className='hidecharm0'; document.getElementById('ch1').className='charmmenu0 bodycolor'; document.getElementById('ch2').className='charmmenu0 bodycolor'; document.getElementById('ch4').className='charmmenu0 bodycolor'; document.getElementById('ch5').className='charmmenu0 bodycolor'">&nbsp;</div>
<div id="hidecharm" class="hidecharm0" onmouseover="document.getElementById('charmbar').className='charmbar0'" onmousemove="document.getElementById('hidecharm').className='hidecharm0'">&nbsp;</div>
<div id="charmbar" class="charmbar0">
<div style="display: table-cell; vertical-align: middle; height: 500px">
<div class="charm"><a href="https://*****************************************************************"
target="_blank"><img src="{style_images_url}/XXXXXXXXXX.png" alt="" /></a><br><font color="white">Текст</font></td></tr></tbody></table></a></div>
<div class="charm"><a href="https://******************************************" target="_blank"></br><img src="{style_images_url}/XXXXXXX.png" alt="" /></a><br><font color="white">Текст</font></td></tr></tbody></table></a></div>
<div class="charm"><a href="**********************************************************************"><img src="{style_images_url}/XXXXXXXXX.png" alt="" /></a><br><font color="white">Текст</font></td></tr></tbody></table></a></div>
<br>
<div class="charm"><a href="http://****************************************" target="_blank"></br><img src="{style_images_url}/XXXXXXXXX.png" alt="" /></a><br><font color="white">Текст</font></td></tr></tbody></table></a></div>
<div class="charm"><a href="http://**********************************" target="_blank"></br><img src="{style_images_url}/XXXXXXXXX.png" alt="" /></a><br><font color="white">Текст </font></td></tr></tbody></table></a></div>
</div>
</div>

Save (Save)

important:
In place of (*) to add a link to your links.
In place of (X) is added to replace your image to be displayed on Charm Bar - .. and size / 32h51 or 54h54 /.
In place of (Text) add the name of the link or your text as desired.

Then open the CSS by clicking on CSS -> Add CSS File ... in the new browser type charmbar
Click Add and paste the following code:

.showcharm {
z-index:9999;
width:30px;
height:100%;
left:0px;
top:0px;
position:fixed;
}
.hidecharm0 {
z-index:-9999;
width:0px;
height:100%;
left:0px;
top:0px;
position:fixed;
}
.hidecharm1 {
z-index:9996;
width:100%;
height:100%;
left:0px;
top:0px;
position:fixed;
}
.charmbar0 {
z-index:10000;
background: #2d2d2d;
width: 100px;
height: 100%;
position: fixed;
left:-100px;
top:0px;
vertical-align: middle;
display:table;
-webkit-transition: all 400ms cubic-bezier(0.000, 0, 0, 1.000);
transition: all 400ms cubic-bezier(0.000, 0, 0, 1.000);
}
.charmbar1 {
z-index:10000;
background:#2d2d2d;
width: 100px;
height: 100%;
position: fixed;
left:0px;
top:0px;
vertical-align: middle;
display:table;
-webkit-transition: all 400ms cubic-bezier(0.000, 0, 0, 1.000);
transition: all 400ms cubic-bezier(0.000, 0, 0, 1.000);
}
.charmitem {
width: 100px;
height: 100px;
vertical-align: middle;
font-size: 15px;
color: #a0a0a0;
}
.charm {
background:#2d2d2d;
text-align: center;
vertical-align:middle;
display: block;
width: 100px;
height: 100px;
}
.charm a, .chitem a {
text-decoration:none;
}
.charm:hover {
background: #333333;
}

Save (Save)

This is vsichko.Po wish you can change the background of Charm Bar-and the file we created charmbar.css.
Also you can add an image that attracts attention to Charm Bar-and

 It is Add Charm Bar On IP Board, Good luck!

Title: Add Charm Bar On IP Board
Posted by:Stuard Van
Published :2013-09-12T10:00:00-07:00
Rating: 5
Reviewer: 5 Reviews
Add Charm Bar On IP Board

Share :

Related articles: