CSS for Pagination Buttons

Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #7435

    Anonymous
    Inactive

    I am trying to change the button design and button hover design but I don’t know what is the correct CSS hook. This is the CSS I tried to use:
    #supsystic-table-1 input.button {
    display : block;
    font-family : lato;
    font-size : 13px;
    font-weight: 900 !important;
    font-style: normal;
    font-variant: normal;
    color: #000000;
    line-height: normal;
    text-transform : uppercase;
    letter-spacing : 0.3em;
    background : none;
    padding : 1em 4em;
    border: solid 2px #000000;
    margin-top : 30px;
    -webkit-transition : all 0.25s ease-out;
    -moz-transition : all 0.25s ease-out;
    transition : all 0.25s ease-out;
    }
    #supsystic-table-1 input.button:hover {
    border: solid 2px #7ddbc5;
    background-color : #7ddbc5;
    color: #ffffff;
    }

    Can you let me know what I am doing wrong?
    Here is where the table is located on my company site http://matsui-color.com/resources/#distributors

    #7448

    Hello!
    Please try this code –

    .supsystic-tables-wrap .paginate_button {
     display : block;
     font-family : lato;
     font-size : 13px;
     font-weight: 900 !important;
     font-style: normal;
     font-variant: normal;
     color: #000000;
     line-height: normal;
     text-transform : uppercase;
     letter-spacing : 0.3em;
     background : none;
     padding : 1em 4em;
     border: solid 2px #000000;
     margin-top : 30px;
     -webkit-transition : all 0.25s ease-out;
     -moz-transition : all 0.25s ease-out;
     transition : all 0.25s ease-out;
    }
    
    .supsystic-tables-wrap .paginate_button {
     border: solid 2px #7ddbc5;
     background-color : #7ddbc5;
     color: #ffffff;
    }
    #7450

    Anonymous
    Inactive

    How do you hover, active, and visited for the button?

    Ex:
    .supsystic-tables-wrap .paginate_button:hover
    .supsystic-tables-wrap .paginate_button:active
    .supsystic-tables-wrap .paginate_button:visited

    #7451

    Anonymous
    Inactive

    Also, this code doesn’t work when I put it in the CSS tab in table settings but it works when I put it under the Custom CSS Styling for my Morpheus Theme. Is it okay if I place it there?

    #7544

    Hello!
    I’m sorry for late response.
    As for the first question – try to use this code –
    :hover .supsystic-tables-wrap .paginate_button:hover {

    As for the second – you can use this code in the Custom CSS Styling for your Morpheus Theme – then this code will be applied to all data tables of our plugin on your site.
    If you want to use only for some specific table, then use this code in css editor of the table- .supsystic-tables-wrap на supsystic-table-(replace_with_id_of_table)_wrapper

    #7550

    Anonymous
    Inactive

    :hover .supsystic-tables-wrap .paginate_button:hover {
    This code didn’t work.

    Here is where the table is located on my company site http://matsui-color.com/resources/#distributors
    Even after inputting the code that you told me to put, some of the default button style still overrides my custom css.

    Take a look at this link: http://matsui-color.com/resources/#general
    If you look at the buttons labeled “Color Matching System” “Color Application Chart” and “Ink Application Chart”, these are how I want my buttons to look. I want the button to be transparent and have a black solid rectangle/square border with black text inside. When you hover over the button, I want the button become an aqua color and the text inside to become white.

    #7592

    Hello!
    I’m sorry for late reply.
    Please try this code –

    .supsystic-tables-wrap .dataTables_wrapper a.paginate_button {
     display: inline-block;
     border-radius: 0px;
     font-family: 'lato', helvetica, arial;
     font-size : 13px;
     font-weight: 900 !important;
     font-style: normal;
     text-transform : uppercase;
     letter-spacing: 0;
     color: #000000!important;
     background : none!important;
     padding: 0.5em 1em;
     border: solid 2px #000000!important;
     margin-top : 30px;
     -webkit-transition : all 0.25s ease-out;
     -moz-transition : all 0.25s ease-out;
     transition : all 0.25s ease-out;
    }
     
    .supsystic-tables-wrap .dataTables_wrapper .dataTables_paginate a.paginate_button:hover,
    .supsystic-tables-wrap .dataTables_wrapper .dataTables_paginate a.paginate_button.current {
     
     color: rgb(255, 255, 255)!important;
     border: 2px solid rgb(71, 211, 179)!important;
     background-color: rgb(71, 211, 179)!important;
    }
    
    .supsystic-tables-wrap .dataTables_wrapper .dataTables_paginate a.paginate_button.previous, 
    .supsystic-tables-wrap .dataTables_wrapper .dataTables_paginate a.paginate_button.next, {
     letter-spacing: 3px;
    }
    #7595

    Anonymous
    Inactive

    Thanks the code works great now! :)

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.
Thanks so much! Please Enter Your Info Below To Get PRO Discount and Gifts