Hello! I just want to ask how to design the pagination of Loops & Logic? Where should I modify it? or Do I need to add CSS Codes for it?
I would be very glad for your help. Thank you!
Another great question! While we hope to eventually build out a GUI for some of the common parts of L&L to reduce the barrier to entry, for now all styling needs to be done manually with CSS. Luckily, when you create a paginated loop, L&L adds a bunch of classes like tangible-paginator-target for the page area, tangible-paginator-buttons for the button area, and tangible-paginator-button and active for the buttons themselves. I’m not a front-end dev myself, but it should be pretty straightforward to style those by simply adding a couple of additional CSS declarations for those classes somewhere in your stylesheet. You could do that in your global styles or directly in the Styles tab of the L&L template you’re making.
Hi @cdmojt, did you end up styling your pagination using those classes? I’d be curious to see what you came up with. I’m sure some other people on the forum would love to use your CSS as a starting point to style their own pages if you’d like to share!
I recently ran into a problem when using the paginator on a dark background – the non-active page numbers were inheriting their color which was too dark for the background. In the style section of the template, I added .tangible-paginator-buttons {color: #aaa;} which works well.
1 Like