Home Forums Weaver Xtreme Theme How can I style the page navigation?

Topic Resolution: Resolved

This topic contains 6 replies, has 2 voices, and was last updated by  ABK 2 months, 1 week ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #50068

    ABK
    Participant

    Hello,

    the theme works fine now, but I would like to style the page navigation:

    http://hochsensibelsein.de/

    What can I do to have it without borders, or to change the colour?

    Kind regards,
    Anne-Barbara

    #50070

    scrambler
    Moderator

    Page navigation is styled with the rules below

    a.page-numbers,span.page-numbers.dots{background:#e0e0e0;color:black!important
    .page-numbers{border-radius:4px;border:1px solid black;margin:4px 2px 4px 2px;padding:1px .3em 1px .3em;font-weight:normal!important;font-size:85%}

    So to change the background color and remove the border, you would add the rules below in the Theme Global CSS Rule box

    a.page-numbers,span.page-numbers.dots{background:yellow;}
    .page-numbers{border:none;}

    #50079

    ABK
    Participant

    Where do I find the Theme Global CSS Rule box? I inserted the code in main options -> fonts and custom -> custom css rules, but nothing happened.

    #50085

    scrambler
    Moderator

    That is the right location, but your rules are not in your site, so something is up.

    First make sure you have no syntax errors in that box, eventually copy paste the whole content of the Custom CSS Rule box here so we can check

    Second if you are using a cache plugin / service, make sure to clear your cache.

    #50095

    ABK
    Participant

    I had a small mistake in the css which I corrected, so now it works. Thanks!

    How can I change the color of the small box which is dark grey now, and where the “1” is displayed? And how can I change the color of the numbers? (I would like to insert the same color as my font color) And the hover color?

    http://hochsensibelsein.de/

    #50099

    scrambler
    Moderator

    This is the current page item, the styling rule is

    .page-numbers.current{color:white;background:#606060}

    For the Hover, the rule is

    a.page-numbers:hover{background:#d0d0d0}

     

     

    #50123

    ABK
    Participant

    Thank you very much, it works! 

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.