BCP Hung
06-15-2011, 10:00 PM
About this modification :
This modification allow you make a simple slide-in custom board via CSS. You can create an announcement, warning, advertiment or forum directory (menu).
Browser support (full css properties) :https://vborg.vbsupport.ru/external/2011/06/8.gifhttps://vborg.vbsupport.ru/external/2011/06/9.gifhttps://vborg.vbsupport.ru/external/2011/06/10.gifhttps://vborg.vbsupport.ru/external/2011/06/11.gif
https://vborg.vbsupport.ru/external/2011/06/12.gif : margin (with icon), transition, transition-delay.
Install :
Download attachment file, unzip, and upload images folder via FTP.
Insert CSS code to additional.css template :
AdminCP -> Styles & Templates -> Style Manager -> Edit Templates -> CSS Templates -> additional.css : insert at top or bottom of this template !
/* Slide-in Custom Board - Getamped 1404 */
#infoPanel {
position: fixed;
background-color: #fff;
width: 330px;
height: auto;
padding: 4px 4px 4px 4px;
font-size: 12px;
font-weight: 700;
color: #000;
-moz-box-shadow: 0 0 20px #111;
-webkit-box-shadow: 0 0 20px #111;
box-shadow: 0 0 20px #111;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
opacity: 0.7;
-moz-opacity:0.7;
-khtml-opacity: 0.7;
filter: alpha(opacity=70);
-moz-transition: all 4s ease;
-webkit-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
-moz-transition-delay: 2s;
-webkit-transition-delay: 2s;
-o-transition-delay: 2s;
transition-delay: 2s;
left: -300px;
z-index: 9999;
}
#infoPanel:hover {
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
opacity: 0.9;
-moz-opacity:0.9;
-khtml-opacity: 0.9;
filter: alpha(opacity=90);
left: 10px;
}
img.infoIcon {
float: right;
margin: -20px -20px 0px 0px;
}
Insert HTML code to navbar template :
... -> Edit Templates -> Navigation / Breadcrumb Templates -> navbar : insert to bottom of this template !
<div id="infoPanel"> <!-- Slide-in Custom Board - Getamped 1404 -->
<img src="images/misc/information.png" class="infoIcon" />
<table width="100%">
<tr>
<td width="90%" style="padding-left:50px;">Announcement ! Announcement !<br />Announcement ! Announcement !</br />Announcement ! Announcement !<br />Announcement ! Announcement !</td>
<td style="text-align:center;" width="10%">A<br>N<br>N<br>O<br>U<br>N<br>C<br>E<br>M<br>E<br>N<br>T</td>
</tr>
</table>
</div>
Custom for yourself !
Using your CSS knowledge to do ! Quick guide :
Change your location
Show at right :
In CSS code, search for :
left: -300px;
... and ...
left: 10px;change "left" to "right", and custom your pixel !
Show at left corner :
In CSS code, search for :
left: -300px;
... and ...
left: 10px;add below with each :
bottom: -160px;
... and ...
bottom: 10px;
Show at right corner : same left corner, change "left" to "right" !
Change your icon : I provide 4 icons in .zip packed to upload, see and choose.
In HTML code, search for :
<img src="images/misc/information.png" class="infoIcon" />Change your icon name !
Change your delay time : time when mouse un-hover and slide-in board will be collapse.
In CSS code, search for :
-moz-transition-delay: 2s;
-webkit-transition-delay: 2s;
-o-transition-delay: 2s;
transition-delay: 2s;Change your number with "2", unit is second.
Change your width & height : size of slide-in custom board, recommends using the default size if you do not add much to the content.
In CSS code, search for :
width: 330px;
height: auto;Change it for you !
Change your background color : change the background color to match your forum style.
In CSS code, search for :
background-color: #fff;Get more color code at here : http://w3schools.com/html/html_colornames.asp
Change your transition time : change your time when mouse hover and un-hover.
In CSS code, search for :
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;and, when mouse un-hover :
-moz-transition: all 4s ease;
-webkit-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;change with your number !
This modification allow you make a simple slide-in custom board via CSS. You can create an announcement, warning, advertiment or forum directory (menu).
Browser support (full css properties) :https://vborg.vbsupport.ru/external/2011/06/8.gifhttps://vborg.vbsupport.ru/external/2011/06/9.gifhttps://vborg.vbsupport.ru/external/2011/06/10.gifhttps://vborg.vbsupport.ru/external/2011/06/11.gif
https://vborg.vbsupport.ru/external/2011/06/12.gif : margin (with icon), transition, transition-delay.
Install :
Download attachment file, unzip, and upload images folder via FTP.
Insert CSS code to additional.css template :
AdminCP -> Styles & Templates -> Style Manager -> Edit Templates -> CSS Templates -> additional.css : insert at top or bottom of this template !
/* Slide-in Custom Board - Getamped 1404 */
#infoPanel {
position: fixed;
background-color: #fff;
width: 330px;
height: auto;
padding: 4px 4px 4px 4px;
font-size: 12px;
font-weight: 700;
color: #000;
-moz-box-shadow: 0 0 20px #111;
-webkit-box-shadow: 0 0 20px #111;
box-shadow: 0 0 20px #111;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
opacity: 0.7;
-moz-opacity:0.7;
-khtml-opacity: 0.7;
filter: alpha(opacity=70);
-moz-transition: all 4s ease;
-webkit-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
-moz-transition-delay: 2s;
-webkit-transition-delay: 2s;
-o-transition-delay: 2s;
transition-delay: 2s;
left: -300px;
z-index: 9999;
}
#infoPanel:hover {
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
opacity: 0.9;
-moz-opacity:0.9;
-khtml-opacity: 0.9;
filter: alpha(opacity=90);
left: 10px;
}
img.infoIcon {
float: right;
margin: -20px -20px 0px 0px;
}
Insert HTML code to navbar template :
... -> Edit Templates -> Navigation / Breadcrumb Templates -> navbar : insert to bottom of this template !
<div id="infoPanel"> <!-- Slide-in Custom Board - Getamped 1404 -->
<img src="images/misc/information.png" class="infoIcon" />
<table width="100%">
<tr>
<td width="90%" style="padding-left:50px;">Announcement ! Announcement !<br />Announcement ! Announcement !</br />Announcement ! Announcement !<br />Announcement ! Announcement !</td>
<td style="text-align:center;" width="10%">A<br>N<br>N<br>O<br>U<br>N<br>C<br>E<br>M<br>E<br>N<br>T</td>
</tr>
</table>
</div>
Custom for yourself !
Using your CSS knowledge to do ! Quick guide :
Change your location
Show at right :
In CSS code, search for :
left: -300px;
... and ...
left: 10px;change "left" to "right", and custom your pixel !
Show at left corner :
In CSS code, search for :
left: -300px;
... and ...
left: 10px;add below with each :
bottom: -160px;
... and ...
bottom: 10px;
Show at right corner : same left corner, change "left" to "right" !
Change your icon : I provide 4 icons in .zip packed to upload, see and choose.
In HTML code, search for :
<img src="images/misc/information.png" class="infoIcon" />Change your icon name !
Change your delay time : time when mouse un-hover and slide-in board will be collapse.
In CSS code, search for :
-moz-transition-delay: 2s;
-webkit-transition-delay: 2s;
-o-transition-delay: 2s;
transition-delay: 2s;Change your number with "2", unit is second.
Change your width & height : size of slide-in custom board, recommends using the default size if you do not add much to the content.
In CSS code, search for :
width: 330px;
height: auto;Change it for you !
Change your background color : change the background color to match your forum style.
In CSS code, search for :
background-color: #fff;Get more color code at here : http://w3schools.com/html/html_colornames.asp
Change your transition time : change your time when mouse hover and un-hover.
In CSS code, search for :
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;and, when mouse un-hover :
-moz-transition: all 4s ease;
-webkit-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;change with your number !