Tagged: button, pagination
- This topic has 7 replies, 2 voices, and was last updated 6 years, 11 months ago by
Anonymous.
- AuthorPosts
- February 17, 2016 at 22:31 #7435
AnonymousInactiveI 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/#distributorsFebruary 18, 2016 at 15:20 #7448
mila_supportMemberHello!
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; }
February 18, 2016 at 21:27 #7450
AnonymousInactiveHow 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:visitedFebruary 18, 2016 at 21:33 #7451
AnonymousInactiveAlso, 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?
February 22, 2016 at 17:48 #7544
mila_supportMemberHello!
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
February 22, 2016 at 20:47 #7550
AnonymousInactive: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.February 26, 2016 at 23:22 #7592
mila_supportMemberHello!
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; }
February 27, 2016 at 01:21 #7595
AnonymousInactiveThanks the code works great now! :)
- AuthorPosts
- You must be logged in to reply to this topic.