24 Pagination Classes

Modules, Add-ons and custom code that's more than just a quick hack or Mod.
SamX
Posts: 14
Joined: Thu Jul 09, 2009 11:26 pm

24 Pagination Classes

Post 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!
ISC 6.1.1 Multi-Vendor Edition
Tony Barnes
Posts: 744
Joined: Thu Jun 18, 2009 8:59 am

Re: 24 Pagination Classes

Post by Tony Barnes »

Nice - good little way to customise the look of a page
Snooper
Posts: 264
Joined: Sat Jun 26, 2010 9:22 pm

Re: 24 Pagination Classes

Post by Snooper »

I agree.. Just cant get it to work !! :(
ISC 5.5.4 Ultimate : Being used here -- http://www.kdklondon.com
CharlieFoxtrot
Confirmed
Confirmed
Posts: 413
Joined: Sun Aug 09, 2009 1:23 pm

Re: 24 Pagination Classes

Post by CharlieFoxtrot »

Great! Thank you!
ISC 4.0.7

"... and let's be honest that whole "by design" thing is getting old too."
Snooper
Posts: 264
Joined: Sat Jun 26, 2010 9:22 pm

Re: 24 Pagination Classes

Post by Snooper »

@ Charlie..

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

How for flip sake !??
ISC 5.5.4 Ultimate : Being used here -- http://www.kdklondon.com
CharlieFoxtrot
Confirmed
Confirmed
Posts: 413
Joined: Sun Aug 09, 2009 1:23 pm

Re: 24 Pagination Classes

Post 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.
ISC 4.0.7

"... and let's be honest that whole "by design" thing is getting old too."
Snooper
Posts: 264
Joined: Sat Jun 26, 2010 9:22 pm

Re: 24 Pagination Classes

Post 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.. :)
Last edited by Snooper on Tue Apr 03, 2012 8:36 pm, edited 1 time in total.
ISC 5.5.4 Ultimate : Being used here -- http://www.kdklondon.com
Brandeline
Posts: 76
Joined: Thu Sep 16, 2010 4:12 am

Re: 24 Pagination Classes

Post 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
inb0x-
Posts: 3
Joined: Sat Mar 31, 2012 10:34 am
Location: London

Re: 24 Pagination Classes

Post by inb0x- »

I wanted to download the .zip file, but it says that does not exists, can you update the link, please?
Thanks. :)
CharlieFoxtrot
Confirmed
Confirmed
Posts: 413
Joined: Sun Aug 09, 2009 1:23 pm

Re: 24 Pagination Classes

Post by CharlieFoxtrot »

Here you go.
Attachments
Paginations_by_SamX.zip
(8.86 KiB) Downloaded 552 times
ISC 4.0.7

"... and let's be honest that whole "by design" thing is getting old too."
Post Reply