I believe you would add this to your footer template:
<div id="footerSlideContainer">
<div id="footerSlideButton"></div>
<div id="footerSlideContent">
<div id="footerSlideText">
<h3>Hey! I'm a Sliding Footer</h3>
<p>What's a Sliding Footer? Well I'm a cool little element which can be hidden from view, and revealed when the user wants to see me.</p>
<p>What can you use me for? Well look at all this stuff:</p>
<ul>
<li>Sales information</li>
<li>Important updates</li>
<li>Unobtrusive about panel</li>
<li>Or just a good ol' footer</li>
</ul>
<p>There are obviously many other uses, but these are the few useful ones I can think of.</p>
</div>
</div>
</div>
Then you would add this to your global.css:
#footerSlideContainer {
position: fixed;
bottom:0;
width: 100%;
}
#footerSlideButton {
background: url(sliderButton.png) top left no-repeat transparent;
position: absolute;
top: -55px;
right: 20px;
width:50px;
height:50px;
border: none;
cursor: pointer;
}
#footerSlideContent {
width: 100%;
height: 0px;
background: #251b15;
color: #CCCCCC;
font-size: 0.8em;
border: none;
font-family: DejaVuSansBook, Sans-Serif;
}
#footerSlideText {
padding: 15px 10px 25px 25px;
}
ok i try it in my test forum
try it want work
think jquery missing??
My apologies - didn't read that tutorial very well
Just tested this on my test forum and got it working:
Admincp -> templates and style -> templates -> your template set -> footer templates -> footer
Add:
<div id="footerSlideContainer">
<div id="footerSlideButton"></div>
<div id="footerSlideContent">
<div id="footerSlideText">
<h3>Hey! I'm a Sliding Footer</h3>
<p>What's a Sliding Footer? Well I'm a cool little element which can be hidden from view, and revealed when the user wants to see me.</p>
<p>What can you use me for? Well look at all this stuff:</p>
<ul>
<li>Sales information</li>
<li>Important updates</li>
<li>Unobtrusive about panel</li>
<li>Or just a good ol' footer</li>
</ul>
<p>There are obviously many other uses, but these are the few useful ones I can think of.</p>
</div>
</div>
</div>
</body>
</html>
Admincp -> templates and style -> templates -> your template set -> ungrouped templates -> headerinclude
Add:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
var open = false;
$('#footerSlideButton').click(function () {
if(open === false) {
$('#footerSlideContent').animate({ height: '300px' });
$(this).css('backgroundPosition', 'bottom left');
open = true;
} else {
$('#footerSlideContent').animate({ height: '0px' });
$(this).css('backgroundPosition', 'top left');
open = false;
}
});
});
</script>
Admincp -> templates and style -> themes -> your theme -> global.css
Add:
#footerSlideContainer {
position: fixed;
bottom:0;
width: 100%;
}
#footerSlideButton {
background: url(sliderButton.png) top left no-repeat transparent;
position: absolute;
top: -55px;
right: 20px;
width:50px;
height:50px;
border: none;
cursor: pointer;
}
#footerSlideContent {
width: 100%;
height: 0px;
background: #251b15;
color: #CCCCCC;
font-size: 0.8em;
border: none;
font-family: DejaVuSansBook, Sans-Serif;
}
#footerSlideText {
padding: 15px 10px 25px 25px;
}
Make sure you have sliderButton.png, or just link it to
http://return-true.com/examples/sliderButton.png
yes it works but where do i put slider button in root image folder??
You can upload it to your root image folder, make sure you use a relative path:
./images/sliderButton.png
ok i upload it and button not visible.Or i must add ./images/sliderButton.png somewhere in global css??
In global.css
Find:
background: url(sliderButton.png) top left no-repeat transparent;
Replace with:
background: url(./images/sliderButton.png) top left no-repeat transparent;
it's working in default theme, but image is not showing in custom themes
i even tried remote link of image, it is getting new image, but not showung