Announcement

Collapse
No announcement yet.

Bigger Pagination links on Filtered Pages

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Bigger Pagination links on Filtered Pages

    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:

    Code:
    	<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:

    Code:
    	<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
    Tony
    www.secretgardenquilting.co.uk

    #2
    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:
    Code:
    #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.
    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk

    Comment


      #3
      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
      Tony
      www.secretgardenquilting.co.uk

      Comment


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

        Code:
        {font-size:1.7em!Important;}
        The whole expression:

        Code:
        #filter_pagination_links_top, #filter_pagination_links_top a, #filter_pagination_links_bottom, #filter_pagination_links_bottom a {font-size:1.7em!Important;}
        Jonathan Chappell
        Website Designer
        SellerDeck Website Designer
        Actinic to SellerDeck upgrades
        Graphicz Limited - www.graphicz.co.uk

        Comment


          #5
          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
          Tony
          www.secretgardenquilting.co.uk

          Comment


            #6
            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
            Tony
            www.secretgardenquilting.co.uk

            Comment


              #7
              Originally posted by tonygg View Post
              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.
              Matt. M - SMR Enterprises Ltd.

              Comment


                #8
                Hi Matt


                Thank you. I now have :

                Code:
                 #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
                Tony
                www.secretgardenquilting.co.uk

                Comment


                  #9
                  Hi Tony,

                  Replace every part of that block with the below:

                  Code:
                  #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;}
                  Matt. M - SMR Enterprises Ltd.

                  Comment


                    #10
                    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
                    Tony
                    www.secretgardenquilting.co.uk

                    Comment


                      #11
                      Originally posted by tonygg View Post
                      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
                      Matt. M - SMR Enterprises Ltd.

                      Comment

                      Working...
                      X