RSS feed page curl effect
Posted: 25 Mar 2010, 15:17
Description: Found this wonderfull page peel effect tutorial on a website ,cant remember where now but pulled the code and addapted it to work with phpBB3 ,tested and working in Firefox,IE7,safari web browsers
phpBB3 version 3.0.7 PL
prosilver instructions
[spoiler]open styles/prosilver/template/overall_header.html
find:
add before:
find:
add after:
open styles/prosilver/theme/colours.css at the bottom add:
open styles/prosilver/theme/common.css
find:
replace with:
[/spoiler]
now upload these 2 images your prosilver/theme/images/* folder Refresh template and theme for prosilver, clear web browser
Screenshots:
[hsimg]http://www.djsimg.com/images/50772770_0310_feed.png[/hsimg]
[hsimg]http://www.djsimg.com/images/12382095_0310_feed2.png[/hsimg]
subsilver2 instructoins
[spoiler]open styles/subsilver2/template/overall_header.html
find:
add before:
find:
add after:
open styles/subsilver2/theme/stylesheet.css
at the bottom add:[/spoiler]
now upload these 2 images your subsilver2/theme/images/* folder Refresh template for subsilver2, clear web browser
Screenshots:
[hsimg]http://www.djsimg.com/images/85929861_0310_peel.png[/hsimg]
[hsimg]http://www.djsimg.com/images/46420698_0310_speel.png[/hsimg]
phpBB3 version 3.0.7 PL
prosilver instructions
[spoiler]open styles/prosilver/template/overall_header.html
find:
Code: Select all
</head>
Code: Select all
<script type="text/javascript">
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '125px',
height: '123px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</script>
Code: Select all
<div id="wrap">
Code: Select all
<!-- IF S_ENABLE_FEEDS -->
<div id="pageflip">
<!-- IF S_ENABLE_FEEDS_OVERALL --><a href="{U_FEED}" title="{L_FEED} - {SITENAME}"><!-- ENDIF -->
<img src="{T_THEME_PATH}/images/page_flip.png" alt="!" />
<span class="msg_block">Subscribe via RSS</span>
</a>
</div>
<!-- ENDIF -->
Code: Select all
/* --- pageflip --- */
#pageflip {
position:fixed;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position:fixed;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position:fixed;
z-index: 50;
right: 0; top: 0;
background: url("{T_THEME_PATH}/images/subscribe.png") no-repeat right top;
text-indent: -9999px;
}
find:
Code: Select all
#wrap {
padding: 0 20px;
min-width: 650px;
Code: Select all
#wrap {
padding: 0 20px;
min-width: 650px;
margin: 0 30px;
now upload these 2 images your prosilver/theme/images/* folder Refresh template and theme for prosilver, clear web browser
Screenshots:
[hsimg]http://www.djsimg.com/images/50772770_0310_feed.png[/hsimg]
[hsimg]http://www.djsimg.com/images/12382095_0310_feed2.png[/hsimg]
subsilver2 instructoins
[spoiler]open styles/subsilver2/template/overall_header.html
find:
Code: Select all
</head>
Code: Select all
<script type="text/javascript">
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '125px',
height: '123px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</script>
Code: Select all
<div id="wrapheader">
Code: Select all
<!-- IF S_ENABLE_FEEDS -->
<div id="pageflip">
<!-- IF S_ENABLE_FEEDS_OVERALL --><a href="{U_FEED}" title="{L_FEED} - {SITENAME}"><!-- ENDIF -->
<img src="{T_THEME_PATH}/images/page_flip.png" alt="!" />
<span class="msg_block">Subscribe via RSS</span>
</a>
</div>
<!-- ENDIF -->
at the bottom add:
Code: Select all
/* --- pageflip --- */
#pageflip {
position:fixed;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position:fixed;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position:fixed;
z-index: 50;
right: 0; top: 0;
background: url('./images/subscribe.png') no-repeat right top;
text-indent: -9999px;
}
now upload these 2 images your subsilver2/theme/images/* folder Refresh template for subsilver2, clear web browser
Screenshots:
[hsimg]http://www.djsimg.com/images/85929861_0310_peel.png[/hsimg]
[hsimg]http://www.djsimg.com/images/46420698_0310_speel.png[/hsimg]