Post by Yakiv » Tue Dec 22, 2009 6:54 pm

espc wrote:you're right, comparing the fact that one is free and the other is not!
anyway, could I ask you a help? I got stuck with this tutorial:

http://www.sohtanaka.com/web-design/sim ... query-css/

I only know that I have to edit (according to qphoria) header.tpl file, but I don't know which code I have to paste in there and I don't know in what folder of my opencart, the files which I downloaded, must be uploaded...
I'm lost mate, I will be grateful...
Maybe you should hire someone for help? I am sure Q or others would take this up for you, for pay.

Active Member

Posts

Joined
Tue Dec 15, 2009 5:31 pm

Post by adecer » Tue Dec 22, 2009 7:59 pm

espc wrote:you're right, comparing the fact that one is free and the other is not!
anyway, could I ask you a help? I got stuck with this tutorial:

http://www.sohtanaka.com/web-design/sim ... query-css/

I only know that I have to edit (according to qphoria) header.tpl file, but I don't know which code I have to paste in there and I don't know in what folder of my opencart, the files which I downloaded, must be uploaded...
I'm lost mate, I will be grateful...
have you resolved it?

Newbie

Posts

Joined
Tue Dec 22, 2009 5:16 pm

Post by fido-x » Tue Dec 22, 2009 9:23 pm

I've got it working. You can view a demo at http://www.fido-x.net/flipper.

Image
Modules for OpenCart 2.3.0.2
Homepage Module [Free - since OpenCart 0.7.7]
Multistore Extensions
Store Manager Multi-Vendor/Multi-Store management tool

If you're not living on the edge ... you're taking up too much space!


User avatar
Expert Member

Posts

Joined
Sat Jun 28, 2008 1:09 am
Location - Tasmania, Australia

Post by michellescott » Tue Jan 05, 2010 6:18 am

So how did you copy and paste it, Well in OC 3.0?
curious?

Newbie

Posts

Joined
Tue Nov 10, 2009 3:02 am

Post by fido-x » Tue Jan 05, 2010 7:09 am

Add the following to your stylesheet:-

Code: Select all

#pageflip {
	position: absolute;
	top: 0px;
	right: 0px;
}
#pageflip img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	top: 0px;
	right: 0px;
	-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 50px; height: 50px;
	position: absolute;
	z-index: 50;
	top: 0px;
	right: 0px;
	background: url('../image/subscribe.png') no-repeat right top;
	text-indent: -9999px;
}
Then, if using OpenCart 1.3.2 or ealier, insert the following into the layout.tpl file:-

Code: Select all

<div id="pageflip">
  <a href="#">
    <img src="catalog/view/theme/YOUR_TEMPLATE/image/page_flip.png" alt="" />
    <span class="msg_block">Subscribe via RSS</span>
  </a>
</div>
at the beginning of the file, either after the <body> tag or as the first item inside the "container". Then at the end of that file, add the following:-

Code: Select all

<script type="text/javascript"><!--
$("#pageflip").hover(function() { //On hover...
	$("#pageflip img , .msg_block").stop()
		.animate({ //Animate and expand the image and the msg_block (Width + height)
			width: '307px',
			height: '319px'
		}, 500);
	} , function() {
	$("#pageflip img").stop() //On hover out, go back to original size 50x52
		.animate({
			width: '50px',
			height: '52px'
		}, 220);
	$(".msg_block").stop() //On hover out, go back to original size 50x50
		.animate({
			width: '50px',
			height: '50px'
		}, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
});
//--></script>
If using 1.3.3 or later, insert the above code snippets into the header.tpl file.

Put the images (page_flip.png and subsribe.png) in your template's image folder. You can get the images from the tutorial site (http://www.sohtanaka.com/web-design/sim ... query-css/).

Image
Modules for OpenCart 2.3.0.2
Homepage Module [Free - since OpenCart 0.7.7]
Multistore Extensions
Store Manager Multi-Vendor/Multi-Store management tool

If you're not living on the edge ... you're taking up too much space!


User avatar
Expert Member

Posts

Joined
Sat Jun 28, 2008 1:09 am
Location - Tasmania, Australia

Post by clippitch » Wed Oct 27, 2010 5:50 pm

Can you please make it detailed im confused with the tutorials.
I cant find the layout.tpl as stated. Im using 1.4.9.1

Newbie

Posts

Joined
Wed Oct 27, 2010 2:18 pm

Post by Mitch » Fri Dec 31, 2010 1:31 am

Simple enough.. Someone should just make this an extension...I guess I could uh?!? O0

Newbie

Posts

Joined
Wed Dec 29, 2010 4:43 am

Post by FTIndustriels » Fri Jul 29, 2011 5:37 pm

Thank you,

Quincaillerie, Fourniture industrielle Maroc
Opencart 1.5.1.3 French edition.
IX web hosting


Newbie

Posts

Joined
Wed Jul 27, 2011 3:48 pm
Location - Morocco
Who is online

Users browsing this forum: No registered users and 15 guests