Add ReplyNew Thread

 CFS with CSS Pagination Hack
& some verses
 Posted: July 6th, 2015, 02:26 PM
Quote
Member
Posts:25Group:MemberJoined:November 27th, 2013
Send Message


Hey all! As I was trying to figure out how to approach my own myriad CFS customization obstacles, I noticed that a lot of people were struggling with the pagination value in the custom topics module. I'm no good at javascript. Seriously. No good. The thought of tackling that problem seemed a little scary to me.

So, I decided to hack it with CSS, and it is working pretty well, I think! Here's how it looks:
user posted image
And here's how I did it without any additional javascript.

Step 1: Wrap pagination value inside a span tag in your custom topics module wherever you want it to appear (you can name yours whatever you want).

CODE
customTopics.init({
html: "<span class='fpagination'>{%pagination}</span>"


Step 2: Using css pseudo elements before, after, and nth-of-type, style your pagination area.
CODE
.fpagination {
/* This hides the text when value is FALSE. */

font-size: 0px;
color: transparent;
}

.fpagination a {
/* This shows the text when links
   (aka page numbers) are present. */

font-size: 12px;
color: #8EADA8;
}

.fpagination a:first-of-type:before {
/* This starts off the pagination. */

content: '( Pages: ';
color: #BCBCBC;
}

.fpagination a:after {
/* This places a comma after each pg# */

content: ', ';
color: #BCBCBC;
}

.fpagination a:last-of-type:after {
/* While this closes off the pagination. */

content:' )';
color: #BCBCBC;
}


Hope this helps at least one person out there!


Edit: If the image doesn't display, here is the direct link to the preview image: click here.

This post has been edited by & some verses: July 8th, 2015, 07:29 PM
Pierrot
 Posted: July 8th, 2015, 02:47 PM
Quote
you are not your skin.
Posts:498Group:StaffJoined:August 28th, 2013
Send Message


Your picture doesn't work for me but thanks for submitting this biggrin.gif
Email
& some verses
 Posted: July 8th, 2015, 07:31 PM
Quote
Member
Posts:25Group:MemberJoined:November 27th, 2013
Send Message


Huh! I'm not sure why it isn't working for you, it's on photobucket and seems to be working for me. I've included a direct link to the image at the bottom of the post in case that happens to anyone else.

And you're welcome! Hopefully it's easier for some people (like me) to understand than javascript solutions.

Topic Options Add ReplyNew Thread


 


 

   Chatbox
's reputation