Bigger Pagination links on Filtered Pages

[tonygg]

We are starting to use filtering on many pages (38) and some have hundred of products. We need to use the pagination code to make each page more manageable.

I am struggling as the code behind it is too advanced for me (or I am too dumb for it )

I would really like to have the links at the bottom and top of the page. Additionally have the font bigger.

I think I have found where the links are placed into the tabular filter results layout:

	<div id="filter_pagination_links_top">
		<actinic:variable name="SearchResultContinue" />
	</div>

I duplicated the code and put it at the bottom of the layout and changed the div id to _bottom:

	<div id="filter_pagination_links_bottom">
		<actinic:variable name="SearchResultContinue" />
	</div>

This seems to work.

However the text is so small it is easily missed.

Here is a link to an example page on our test site:

http://www.tgurney.co.uk/acatalog/Patchwork_Fabrics_A-Z.html


Has anyone successfully increase the font size of pagination links at bottom and top?

Any help or pointers would be gratefully received.

Many thanks

Tony

[graphicz]

Try this...

In design view click the button 'Current Stylesheet' and make a new line right at the bottom after everything else.

Paste the following:

#filter_pagination_links_top, #filter_pagination_links_top a, #filter_pagination_links_bottom, #filter_pagination_links_bottom a {font-size:1.7em;}

You can change the '1.7' for whatever value suits your needs.

[tonygg]

Jonathan

Many thanks for the help and speedy response. I put it into the style shheet.

It makes most of the text bigger (i used 1.2). However the word "page" and the selected page number remain in the small font.

This can be seen on the following link once you select a filter on the LHS:

http://www.tgurney.co.uk/acatalog/Pa...brics_A-Z.html

Any thoughts on how to get the Page text and selected number to be the same size as the rest?

many thanks

Tony

[graphicz]

Looks like you will need an "!Important" thus:

{font-size:1.7em!Important;}

The whole expression:

#filter_pagination_links_top, #filter_pagination_links_top a, #filter_pagination_links_bottom, #filter_pagination_links_bottom a {font-size:1.7em!Important;}

[tonygg]

Hi Jonathan

Thank you once again. Unfortunately that still didn't change the size on the green text "Page" and the selected page number.

It is certainly better than just having it all so small.

Thanks

Tony

[tonygg]

IHi Again,

It may be my browser cache (I did clear it and refresh) but I don't get the bigger font on the pagination (1, 2 3 etc..) on Chrome but do on Edge. If possible please could someone else check.

The page is:

http://www.tgurney.co.uk/acatalog/Pa...brics_A-Z.html

Bit odd!

Many thanks

Tony

[MattSMR]

IHi Again,

It may be my browser cache (I did clear it and refresh) but I don't get the bigger font on the pagination (1, 2 3 etc..) on Chrome but do on Edge. If possible please could someone else check.

The page is:

http://www.tgurney.co.uk/acatalog/Pa...brics_A-Z.html

Bit odd!

Many thanks

Tony

Hi Tony,

Another couple of rules need to be added to your CSS. Where Jonathan had you add them before, you also need to include the following:

div#filter_pagination_links_top strong
div#filter_pagination_links_top b
div#filter_pagination_links_bottom strong
div#filter_pagination_links_bottom b

Add the 1.2em rule to those.


You don't need the !important on your CSS rule. Attempt to not use those where possible, as down the line you can get in to a right kerfuffle with the !important rules overriding each other.

[tonygg]

Hi Matt


Thank you. I now have :

 #filter_pagination_links_top, #filter_pagination_links_top a, #filter_pagination_links_bottom, #filter_pagination_links_bottom a {font-size:1.2em;}


div#filter_pagination_links_top strong
div#filter_pagination_links_top b
div#filter_pagination_links_bottom strong
div#filter_pagination_links_bottom b

I am getting the clickable page numbers and fwd/bwd in bigger text but still not the page or selected page number:

http://www.tgurney.co.uk/acatalog/Pa...brics_A-Z.html

Please could you take a quick look to see if the code above is correct?

Many thanks

Tony

[MattSMR]

Hi Tony,

Replace every part of that block with the below:

#filter_pagination_links_top, #filter_pagination_links_top a, #filter_pagination_links_bottom, #filter_pagination_links_bottom a, #filter_pagination_links_bottom b, #filter_pagination_links_bottom strong, #filter_pagination_links_top b, #filter_pagination_links_top strong {font-size:1.2em;}

[tonygg]

Hi Matt

Perfect - Thank you.

Is it possible I cxould ask you to check the new code on Chrome? I get it to work on IE and Firefox but not Chrome even after a refresh. Might be my PC

http://www.tgurney.co.uk/acatalog/Pa...brics_A-Z.html


Many thanks

Tony

[MattSMR]

Hi Matt

Perfect - Thank you.

Is it possible I cxould ask you to check the new code on Chrome? I get it to work on IE and Firefox but not Chrome even after a refresh. Might be my PC

http://www.tgurney.co.uk/acatalog/Pa...brics_A-Z.html


Many thanks

Tony

Looks good on all browsers Tony