Shopping Cart Community

The customer community
http://www.shoppingcartcommunity.com/forum/

24 Pagination Classes

http://www.shoppingcartcommunity.com/forum/viewtopic.php?f=12&t=80

Page 1 of 2

24 Pagination Classes

Posted: Mon Jul 13, 2009 6:01 pm
by SamX
Hi, i want to say thank you for this forum and i want to contribute with something, here is 24 new pagination styles.

Image

1. Download the Styles

Code: Select all

http://rapidshare.com/files/255412661/Paginations_by_SamX.zip
2. Once choose your style open templates/your_template/Styles/styles.css
Go to the final and add the style code (styles includes on the css.css in zip)

Example of Yahoo pagination

Code: Select all

/*CSS yahoo style pagination*/

DIV.yahoo {
	PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.yahoo A {
	BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #fff 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #fff 1px solid; TEXT-DECORATION: underline
}
DIV.yahoo A:hover {
	BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}
DIV.yahoo A:active {
	BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #f00; BORDER-BOTTOM: #000099 1px solid
}
DIV.yahoo SPAN.current {
	BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #fff 1px solid; COLOR: #000; PADDING-TOP: 2px; BORDER-BOTTOM: #fff 1px solid; BACKGROUND-COLOR: #fff
}
DIV.yahoo SPAN.disabled {
	BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}
Save and upload your changes.

3. Open templates/your_template/Panels/CategoryPagingBottom.html and CategoryPagingTop.html once at time.

Find on line 1

Code: Select all

<div class="Block Moveable Panel PagingBottom" id="CategoryPagingBottom">
And remplace by

Code: Select all

<!---				<div class="Block Moveable Panel PagingBottom" id="CategoryPagingBottom"> -->
				<div class="yahoo" id="CategoryPagingBottom">
					%%SNIPPET_CategoryPaging%%
				</div>
Change the code on both pages CategoryPagingBottom.html and CategoryPagingTop.html, save and upload the files.

Thats All!

Re: 24 Pagination Classes

Posted: Tue Jul 14, 2009 9:02 am
by Tony Barnes
Nice - good little way to customise the look of a page

Re: 24 Pagination Classes

Posted: Thu Sep 09, 2010 12:31 am
by Snooper
I agree.. Just cant get it to work !! :(

Re: 24 Pagination Classes

Posted: Mon Sep 27, 2010 9:54 pm
by CharlieFoxtrot
Great! Thank you!

Re: 24 Pagination Classes

Posted: Tue Sep 28, 2010 7:44 pm
by Snooper
@ Charlie..

Err.. what?? I re-discover this posting and you say 'great' .. you got this to work ??

How for flip sake !??

Re: 24 Pagination Classes

Posted: Tue Sep 28, 2010 7:56 pm
by CharlieFoxtrot
Snooper wrote:@ Charlie..

Err.. what?? I re-discover this posting and you say 'great' .. you got this to work ??

How for flip sake !??
I was just thanking the OP for the info and the file... I haven't had time to install it yet but it looks like a fairly straightforward process.

Re: 24 Pagination Classes

Posted: Tue Sep 28, 2010 10:31 pm
by Snooper
Well I tried as told and for some reason it failed to implement for me.. This maybe because I'm using 5.5.4 and the mod itself was aimed lower..

Blimmin shame, it is a good mod to complement my text mod.. shifts ISC up a bar.. So anybody who gets this to work , please share.. :)

Re: 24 Pagination Classes

Posted: Sat Apr 23, 2011 5:53 pm
by Brandeline
I have this partly working on my sandbox for 6.1.1 with the meneame style. I had to make a couple of changes and there are probably a couple of other things I could do to make it smoother, but here are the changes I made to get it basically working:

Under the DIV.meneame A rule in the CSS code for the pagination class I wanted to use (meneame), I changed background-image: url(meneame.jpg) to background-image: url(../images/meneame.jpg) and dropped the supplied background image in my templates/<template name>/images directory. Only about three of the supplied themes have a background image at all, but if you pick one that does, you'll need to make this change to get it looking for it in your template directory.

I changed the rule DIV.meneame SPAN.active to DIV.meneame LI.ActivePage. This change was needed as 6.1.1 seems not to be using spans anymore. It uses LI elements instead, and the class name has also been changed to ActivePage.

Hope that helps those that still want to use it!

~Brandeline

Re: 24 Pagination Classes

Posted: Sat Mar 31, 2012 10:46 am
by inb0x-
I wanted to download the .zip file, but it says that does not exists, can you update the link, please?
Thanks. :)

Re: 24 Pagination Classes

Posted: Tue Apr 10, 2012 9:59 pm
by CharlieFoxtrot
Here you go.
All times are UTC+01:00
Page 1 of 2

Powered by phpBB® Forum Software © phpBB Limited