PhpBB3 BBCodes

Posted: **24 Jun 2010, 15:38**

I don't know if I am asking this question in correct section and in correct way ....

My question is :

how to add a page curl effect in phpbb3 boards index page ?

I am using phpbb3.0.6 ...

Posted: **24 Jun 2010, 15:52**

You mean something like this?
author: Steve©
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:

Code: Select all

</head>

add before:

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>

find:

Code: Select all

<div id="wrap">

add after:

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 -->

open styles/prosilver/theme/colours.css 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("{T_THEME_PATH}/images/subscribe.png") no-repeat right top;
	text-indent: -9999px;
}

open styles/prosilver/theme/common.css
find:

Code: Select all

#wrap {
	padding: 0 20px;
	min-width: 650px;

replace with:

Code: Select all

#wrap {
	padding: 0 20px;
	min-width: 650px;	
        margin: 0 30px;

[/spoiler]
now upload these 2 images your prosilver/theme/images/* folder

peelPro.zip

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>

add before:

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>

find:

Code: Select all

<div id="wrapheader">

add after:

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 -->

open styles/subsilver2/theme/stylesheet.css
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;
}

[/spoiler]
now upload these 2 images your subsilver2/theme/images/* folder

peelsub.zip

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]

you can always modify it for your needs!

Posted: **25 Jun 2010, 02:24**

You are Great ......... Yes I was Asking this ...........

Posted: **25 Jun 2010, 03:18**

PhpBB3 BBCodes

Page Curl effect in phpbb3

Page Curl effect in phpbb3

Re: Page Curl effect in phpbb3

Re: Page Curl effect in phpbb3

Re: Page Curl effect in phpbb3