I found this question on StackOverflow for changing the pagination color of datatables.
And I tried the provided solution with some dummy edits:
.paging_full_numbers a.paginate_button {
color: pink !important;
background-color: white !important;
}
.paging_full_numbers a.paginate_active {
color: green !important;
background-color: green !important;
}
And it did not work.
I also tried with the second solution provided:
.page-item.active .page-link {
color: #fff !important;
background-color: #193D4C !important;
border-color: #000 !important;
}
.page-link {
color: #193D4C !important;
background-color: #fff !important;
border: 1px solid #dee2e6 !important;
}
.page-link:hover {
color: white !important;
background-color: #193D4C !important;
border-color: #193D4C !important;
}
And it's getting close to what I want but randomly there is a black css effect that I don't know how to get rid of.
Current result:
Live DEMO of the code
How can I get rid of this black box when I hover over some page?
Background color is showing on hover because of datatable jquery. we can't make changes on core library. To get rid of this you need to use background:transparent; on parent class with important.
Add this style into your CSS file.
.paginate_button:hover
{
background:transparent !important;
border:none !important;
}
You can override the background color and border that's added using the following css code:
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: none !important;
border: none !important;
}
I have this div in styled components
const StyledDots = styled.div`
width: 16px;
height: 16px;
border: solid 1px #d2d2d2;
border-radius: 20px;
background-color: #ffffff;
position: relative;
top: 50px;
right: 15px;
::focus {
background: black;
} `
I tried to change background color to gray with focus but as you see I'm doing something wrong and i Dont know what,Any suggestions please?
(Would be better if only 50% of the div will change the color)
to change style onHover, onFocus, ...etc with styled components you need to use this syntax:
&:focus {
background: black;
}
for background to be 50% of the height you can use linear-gradient to set the background color:
&:focus {
background: linear-gradient(180deg, black 50%, white 50%);
}
I'm creating clickable CSS buttons for my website and want a green button with a white text. But my default link color (blue) is overriding everything and making the buttons with a green background but underlined blue link. What do I need to change?
.td-post-content a {
color: #2200CC;
text-decoration: underline;
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 24px;
margin: 4px 2px;
cursor: pointer;
}
.button a:link {
color: white;
}
<p style="text-align: center;"><a class="td-post-content button" href="https://www.expatkings.com/join">Join Now</a></p>
I except the td-post-content links to be blue and underlined while the button links should be green with white text.
I guess you can just add all css pseudo classes that work with "a" tag:
https://css-tricks.com/snippets/css/link-pseudo-classes-in-order/
https://www.w3schools.com/css/css_pseudo_classes.asp
.button,
.button:link,
.button:visited,
.button:hover,
.button:active{
color: white;
background: green;
padding: 5px 10px;
border-radius: 5px;
text-decoration: none;
}
<a class="button" >Name</a>
Try using !important. This will override the standard link color.
.button{
color: white !important;
}
:link works for elements with a href attribute that has not yet been visited.
If you wish to style all states of the link, use the following:
.button a {
color: white;
}
In console if I see, following classes are present:
html.sap-desktop ::-webkit-scrollbar {
width: 16px;
height: 16px;
background-color: #f7f7f7;
}
html.sap-desktop ::-webkit-scrollbar-corner {
background-color: #f7f7f7;
}
html.sap-desktop ::-webkit-scrollbar-thumb {
background-color: #e6e6e6;
}
I wanted to give blue color to scroll bar and change width. So this is what I did. Please tell if good idea, if not what other ways can be used.
.sapUiBody .sapMPageEnableScrolling::-webkit-scrollbar {
width: 6px;
}
.sapUiBody .sapMPageEnableScrolling::-webkit-scrollbar-track {
background-color: #ffffff;
border-radius: 5px;
}
.sapUiBody .sapMPageEnableScrolling::-webkit-scrollbar-thumb {
background-color: #005daa;
height: 3px !important;
}
One more issue I am facing is, when I hover over my scrollbar, it becomes grey.
Add the below CSS in your style sheet and update your colors
.sap-desktop ::-webkit-scrollbar {
width: 16px !important;
}
.sap-desktop ::-webkit-scrollbar-thumb {
background-color: #005483 !important;/* Update color */
}
.sap-desktop ::-webkit-scrollbar-thumb:hover { /* Scrollbar hover */
background-color: #d14900 !important; /* Update hover color */
}
Firt of all it is not a good idea to modify css classess directly..this will change all the instance of say scrollbar in your app...give a css class to parent and then modify the css
e.g
.parentCssClass .sap-desktop ::-webkit-scrollbar {
width: 16px !important;
}
I am trying to style the button colour with below code, the colours work until I click the button, the button shows the default colours, how do I specify the colours of the button onclick?
.btn-success {
color: #ffffff;
background-color: #161617;
border-color: #494F57;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
color: #ffffff;
background-color: #1F2838;
border-color: #494F57;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
background-color: #161617;
border-color: #494F57;
}
.btn-success .badge {
color: #161617;
background-color: #ffffff;
}
The :active selector is what you need for the click.
.btn-sample:active {
// click styles here
}
It looks like you have that above so if you are still seeing a slightly different color it is most likely because of the box-shadow that is also applied to the active button state. Disable that like so:
.btn-sample:active {
box-shadow: none;
}
Edit:
The selector that is overriding your css is actually btn-success:active:focus. So you will need to add the following to your css:
.btn-success:active:focus {
color: #ffffff;
background-color: #161617;
border-color: #494F57;
}
Further to my comment below, you would be better off creating your own class such as btn-custom to which you can apply your desired styles. Combining this with the existing btn class, you can achieve your desired result with much less code as you won't need to override existing selectors.
You have to use the !important declaration to do that correcly.
.btn-success:hover, .btn-success:active, .btn-success:focus {
color: #ffffff !important;
background-color: #1F2838 !important;
border-color: #494F57 !important;
}
I fixed this behaviour with this css code:
.btn-primary {
background-color: #8ed3cc;
border: 0 !important;
padding: 1rem 5rem;
border-radius: 0;
font-family: 'Lato', sans-serif;
font-size: 1.2rem;
box-shadow: none !important;
}
.btn-primary:hover {
background-color: #69aca5 !important;
border: 0 !important;
box-shadow: none !important;
}
.btn-primary:focus {
background-color: #69aca5 !important;
border: 0 !important;
box-shadow: none !important;
}
Some inspiration from the bootstrap source for overriding these various button states where $off-white and $brand-black are defined by us:
.btn-success {
&:hover,
&:focus,
&.focus {
color: $off-white;
background-color: $brand-black;
}
&:active,
&.active,
&.disabled,
&:disabled {
color: $off-white;
background-color: $brand-black;
&:focus,
&.focus {
color: $off-white;
background-color: $brand-black;
}
}
}
That button press animation of the default color is due to the background image. Use this for each named style (btn-default, btn-success, etc):
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-image: none;
}
Just add the following code in your CSS
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover
{
color: #fff;
background-color: #161617;
border-color: #494F57;
}
If you are working on a personal project, and not with a team, it is worth noting that you can override pseudo class styles simply by applying "!important" to the same style declarations on the class:
.btn-success {
color: #ffffff !important;
background-color: #161617 !important;
border-color: #494F57 !important;
}
Generally, it's a good idea to stay away from !important because this will override any and all color, background-color and border-color style declarations on the btn-success class (unless you override the style declarations again with !important later in your style sheet although that's ridiculous).
If the goal is the smallest file size possible though and you are using this class everywhere in the same way - meaning no inline styles - then this may be your best option.
Alternatively, but using the same thinking, you may try naming a new custom class something like .btn-success-important, and only apply it after btn-success where you need to use the override.
There is one catch though: If you are combining .btn-success or your .btn-success-important with any other Bootstrap .btn-group, !important will override any pseudo class style declared within. In this case you may be better off with Guy's answer (the custom class without !important style declarations).
if you want remove the box-shadow just add box-shadown:none and make it important or if you want add box-shadows just add color values.
.btn-primary:not(:disabled):not(.disabled):active{
color: #fff;
background-color: #5b5fc6;
border-color: #5b5fc6;
box-shadow: none !important;
}
or
.btn-primary:not(:disabled):not(.disabled):active{
color: #fff;
background-color: #5b5fc6;
border-color: #5b5fc6;
box-shadow: 0 0 0 0.2rem #c9cbfa !important
}
to trigger any class whenever a button is clicked, you need :active selector and to fix the default behavior of the bootstrap button on click, you need to set the background-color to any color you want to along with !important. It will then override the default styling of the bootstrap class.
.btn-outline-primary:active{ background-color: [your color] !important}