I have a react-bootstrap Popover component with custom styling for the arrow (gray color and 50% opacity). The CSS is as follows:
.popover .popover-arrow::before, .popover .popover-arrow::after {
border-color: #212529 !important;
opacity: 0.5;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
}
This works fine for horizontal arrows (when the Popover is left or right of the target):
However, when the arrow is vertical (Popover above or below the target), the colors are inverted to give a transparent arrow on a grey background:
My question is, why does this inversion happen and what can I do to fix it?
Eventually I managed to fix this with the following CSS:
.popover .popover-arrow {
display: block;
opacity: 0.75;
}
.popover[x-placement^=top]>.popover-arrow:after {
border-top-color: #212529;
}
.popover[x-placement^=bottom]>.popover-arrow:after {
border-bottom-color: #212529;
}
.popover[x-placement^=right]>.popover-arrow:after {
border-right-color: #212529;
}
.popover[x-placement^=left]>.popover-arrow:after {
border-left-color: #212529;
}
Thanks to Michal Duszak for this snippet which gave me something to go on.
Related
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 want to have a scrollbar that has multiple colours, including the background.
I'm going for a Windows-XP style approach. Here's my current code I use to make the scrollbar 'blue'.
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #6699cc;
}
::-webkit-scrollbar-thumb:hover {
background: #8abbeb;
}
I think adding a border will do it, but I don't know how to add it.
Thanks a lot!
I think adding a border will do it, but I don't know how to add it.
if you want to add a border to it, you can use outline. you can add it to the track, thumb or wherever you want the border to be
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #6699cc;
outline: 5px solid red;
}
::-webkit-scrollbar-thumb:hover {
background: #8abbeb;
}
but sometimes it only shows the outline at the top and bottom idk why
an alternative will be using border
border: 5px solid red;
I'm not sure I've totally understood, but you already are putting background colors on the thumb and the actual bar so you can change to linear-gradient background images to get this sort of thing:
body {
height: 300vh;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #6699cc;
background: linear-gradient(red, blue, orange, cyan);
}
::-webkit-scrollbar-thumb:hover {
background: #8abbeb;
}
<body>A long body</body>
I am using Bootstrap 3. I have a button, but I am unable to preserve background color of that button when I hover it. No matter what I do, its background color is always grey.
.my-btn {
background-color: white;
color: #2b526d;
border-color: #2b526d;
margin-right: 0px;
margin-left: 0px;
}
.my-btn:hover {
background-color: white!important;
color: #dd3049;
border-color: #dd3049;
opacity: 1 !important;
}
I want the background of my button to remain completely white.
I'm not sure. But you can try the following css code. Hope it will work for you.
.btn.my-btn:hover {
background-color: white!important;
color: #dd3049;
border-color: #dd3049;
opacity: 1 !important;
}
I am currently designing a webpage using bootstrap. I needed a custom button color, so I designed my own button classes, which you can see there:
.btn.btn-radio {
background: #f3bb70;
border-color: transparent;
border-right-color: #684235;
}
.btn.btn-plus {
background: #684235;
border-color: transparent;
}
Since the button group is of the same color I wanted to put a border only on the right side, to show the separation. But the border appears only when the mouse is over the button (see https://jsfiddle.net/DTcHh/20757/ ). Why is it so ? How do I make it be there all the time ?
This problem has to do with the z-index of the buttons so to fix the problem without mixing up with the margin you need to put borders to all the buttons then remove the first-child left border
.btn.btn-radio {
background: #f3bb70;
border-color: transparent;
border-right-color: #684235;
border-left-color: #684235;
}
.btn.btn-radio:first-child{
border-left-color: transparent;
}
.btn.btn-plus {
background: #684235;
border-color: transparent;
}
Bootstrap has this line in css. This creates problem.
.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
margin-left: -1px;
}
You can use this, but i dant know if it will not make some other problems:
.btn.btn-radio {
background: #f3bb70;
border-color: transparent;
border-right-color: #684235;
margin-left: 0!important;
}
you will have to override the .btn in bootstrap.css file
it currently has
border:1px solid transparent; and hence your border is not showing normally
So text selection was made stylable trough the ::selection pseudo element in order to override the browser's default selection color. But to me, it seems that white as a selection background color is forbidden in favor of a greyish, opaque color.
::selection { color: black; background: white; }
::-moz-selection { color: black; background: white; }
body {
background: black;
color: white;
}
So selecting me is supposed to invert the text and background colors. But the selected text background color is not white, but grey.
Why does this not create a perfectly white background ? Instead, it shows a grey background (#989898)
Also see this snippet on https://jsfiddle.net/duk3/hzodm1sh/
Ok so following this question I found the answer :
For some reason Chrome forces it to be semi-transparent. However, you
can get around this by setting the background using rgba. I have set
the alpha value to be just 0.01 less than 1.
::selection { color: black; background: rgba(255, 255, 255, 0.996);
; }
body {
background: black;
color: white;
}
Selecting me DOES invert the text and background colors. Well, almost, but it looks like perfect white.
Maybe it's a browser specific problem.
Try this:
Fiddle
::selection {
color: black;
background: white;
}
body {
background: black;
color: white;
}
::-moz-selection {
color: black;
background: white;
}
So selecting me is supposed to invert the text and background colors.
Here is the result in a print: