I have a tooltip and I don't know how to change color on scrollbar.
.tooltip-inner {
font-size: smaller;
white-space: pre-line;
width: 200px;
height: 200px;
overflow-y: auto;
}
you can find all infomations right there css-tricks.
But remember that IE and Firefox doesn't support it.
Example as suggested:
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
For your code try this:
.tooltip-inner::-webkit-scrollbar {
width:15px;
}
.tooltip-inner::-webkit-scrollbar-track {
background-color:#FFFFFF;
}
.tooltip-inner::-webkit-scrollbar-thumb {
background-color:#2A2A2A;
border-radius:10px;
border-style:solid;
border-width:4px;
border-color:#FFFFFF;
}
I only changed body to your class, it should work like this.
Related
I'm using the theme here http://demo.theme.co/ethos-1/
My goal is to have the square post previews round(succeeded) and have a border that alternates in color every other list item.
But for some reason my odd and even css is not working.
I've tried being more specific on my selectors but have not found one that gets it to work.
I've uploaded the following relevant code:
/*
Theme Name: X – Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x
*/
.entry-cover {
border-radius: 100%;
width: 95%;
}
.entry-cover:nth-child(2n+1) {
border:5px solid black;
}
.entry-cover:nth-child(2n) {
border:5px solid red;
}
.x-navbar-wrap {
margin-top: 3.5%;
}
.slick-list.draggable {
margin-top: 1%;
}
Any ideas would be greatly appreciated?
Thank you in advance!
This css seems to work as hsan mentioned your CSS selector is incorrect. Also would use even / odd
li.x-post-carousel-item:nth-child(even) {
border:5px solid black;
}
li.x-post-carousel-item:nth-child(odd) {
border:5px solid red;
}
If you want everything rounded with odd borders you need to go a step further:
.entry-cover {
border-radius:100%;
}
.x-post-carousel.unstyled .entry-cover{
border:none !important;
}
li.x-post-carousel-item {
border-radius: 95%;
width: 95%;
}
li.x-post-carousel-item:nth-child(even) {
border:5px solid black;
}
li.x-post-carousel-item:nth-child(odd) {
border:5px solid red;
}
Try including x-post-carousel-item class like this:
.entry-cover {
border-radius: 100%;
width: 95%;
}
.x-post-carousel-item:nth-child(2n+1) .entry-cover {
border:5px solid black;
}
.x-post-carousel-item:nth-child(2n) .entry-cover {
border:5px solid red;
}
.x-navbar-wrap {
margin-top: 3.5%;
}
.slick-list.draggable {
margin-top: 1%;
}
Please note that there is no need to use !important.
Add this code to your CSS and see magic like this. it's look like this
.slick-track li:nth-child(odd) article a {
width: 230px;
border-radius: 50% !important;
height: 230px;
margin: 0 auto;
border: 3px solid red !important;
overflow: hidden;
display: block;
background-size: cover;
}
.slick-track li:nth-child(even) article a {
width: 230px;
border-radius: 50% !important;
height: 230px;
margin: 0 auto;
border: 3px solid green !important;
overflow: hidden;
display: block;
background-size: cover;
}
.h-entry-cover {
position: absolute;
top: calc(100% - 6em);
left: 0;
right: 0;
margin: 0;
padding: 1.5em;
font-size: 14px;
letter-spacing: 0;
line-height: 1;
text-transform: uppercase;
color: #fff;
-webkit-transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);
}
You are try with wrong css class. Because .entry-cover is a child of li tag, so that your css not working. Use li tag for odd and even css.
Like this:
.entry-cover {
border-radius: 100%;
width: 95%;
}
.x-post-carousel-item:nth-child(odd) .entry-cover {
border:5px solid black;
}
.x-post-carousel-item:nth-child(even) .entry-cover {
border:5px solid red;
}
.x-navbar-wrap {
margin-top: 3.5%;
}
.slick-list.draggable {
margin-top: 1%;
}
I want to have a custom scroll bar in Chrome.
So, I'm using this sass:
::-webkit-scrollbar {
width: 0.5em;
height: 0.5em;
}
::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,.1);
border-radius: 3px;
&:hover {
background: rgba(255,255,255,.2);
}
}
My problem is that I want this scrollbar style only in an specific div. But if I do:
#boardslist {
::-webkit-scrollbar {
width: 0.5em;
height: 0.5em;
}
::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,.1);
border-radius: 3px;
&:hover {
background: rgba(255,255,255,.2);
}
}
}
is not working. Any ideas?
#boardslist {
&::-webkit-scrollbar {
width: 0.5em;
height: 0.5em;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,.1);
border-radius: 3px;
&:hover {
background: rgba(255,255,255,.2);
}
}
}
Check this out http://codepen.io/tholman/pen/tldwm
If you are doing it for a class, you can do it in the following way. Side bar is the class given to the div that you want to allow scrolling.
.side_bar{
padding-right: 20px;
margin-left: -12px;
position: sticky;
top: 0;
height: 100vh;
overflow-y: scroll;
/* width */
}
.side_bar::-webkit-scrollbar {
width: 5px;
}
/* Track */
.side_bar::-webkit-scrollbar-track {
box-shadow: inset 0 0 2px grey;
border-radius: 10px;
}
/* Handle */
.side_bar::-webkit-scrollbar-thumb {
background: rgb(7, 7, 7);
border-radius: 10px;
}
/* Handle on hover */
.side_bar::-webkit-scrollbar-thumb:hover {
background: #009eb3;
}
It's 2020 and ::-webkit-scrollbar is still not supported in Firefox.
Besides overflow:auto shows scrollbar when content overflows in Chrome and Safari, but in Firefox there will be no visible scrollbar until we start scrolling. Go guess whether content is scrollable or not. Same with overflow:scroll. Not very intuitive.
Well, 2022 and still no support in Firefox: https://caniuse.com/?search=%3A%3A-webkit-scrollbar
However, basics can be customized in Firefox:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
https://caniuse.com/?search=scrollbar-color
/* Chrome */
.container::-webkit-scrollbar {
width: 5px;
}
.container::-webkit-scrollbar-track {
/*background-color: grey;*/
box-shadow: inset 0 0 5px grey;
border-radius: 15px;
}
.container::-webkit-scrollbar-thumb {
background-color: orange;
border-radius: 15px;
/*border: 1px solid red;*/
}
/*.container::-webkit-scrollbar-button {
background-color: red;
border-radius: 15px;
}*/
.container::-webkit-scrollbar-thumb:hover {
background: red;
}
/* IE */
.container {
scrollbar-face-color: orange;
scrollbar-shadow-color: grey;
scrollbar-highlight-color: red;
}
/* FireFox */
.container {
scrollbar-color: orange grey;
scrollbar-width: thin;
}
/* View Scrollbar */
.container {
overflow-y: scroll;
overflow-x: hidden;
width:400px;
height: 200px;
}
Working example is here:
https://codepen.io/svigir/pen/LYOOjyj
Basically I want a sexy, responsive circle button that is transparent so you can see the background through it, but with an opaque outline so you can see the button and opaque text (or maybe I will add a font-awesome icon at a later stage).
Here is my JS fiddle so you can see what I am trying to do:
http://jsfiddle.net/njd2g94u/
.round-button {
width:25%;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
border:10px solid #98a1a4;
overflow:hidden;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
border:10px solid #98a1a4;
overflow:hidden;
background: #fff;
background-opacity: 0;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
display:block;
float:left;
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#e2eaf3;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
Thanks in advance!
you can and should use rgba for colors with transparency. The last parameter is the transparency level, any number from 0 to 1. The color below is roughly equivalent to "#98a1a4."
border: 10px solid rgba(151, 162, 164, 0.25);
There's no background-opacity. May be you are looking for this:
.round-button-circle {
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 50%;
border: 10px solid #98a1a4;
overflow: hidden;
background: transparent; /* Change it to transparent */
/* remove background-opacity */
box-shadow: 0 0 3px gray;
}
Fiddle: http://jsfiddle.net/xppow236/
I've created a responsive table CSS and I want a specific CSS to the scroll bar of the table.
But, when inserting this code, the browser scroll bar also changes.
How to specifically use this design to my table?
body {
padding:1.5em;
background: #f5f5f5
}
table {
border: 1px #a39485 solid;
font-size: .9em;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,.25);
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-radius: 5px;
overflow: hidden;
}
th {
text-align: center;
}
thead {
font-weight: bold;
color: #fff;
background: #0088CC;
}
td, th {
padding: 1em .5em;
vertical-align: middle;
}
td {
border-bottom: 1px solid rgba(0,0,0,.1);
background: #fff;
}
a {
color: #73685d;
}
#media all and (max-width: 768px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
text-align: right;
}
table {
position: relative;
padding-bottom: 0;
border: none;
box-shadow: 0 0 10px rgba(0,0,0,.2);
}
thead {
float: left;
white-space: nowrap;
}
tbody {
overflow-x: auto;
overflow-y: hidden;
position: relative;
white-space: nowrap;
}
tr {
display: inline-block;
vertical-align: top;
}
th {
border-bottom: 1px solid #a39485;
}
td {
border-bottom: 1px solid #e5e5e5;
}
}
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
Please help.
You should be able to target the table scrollbar specifically just like any other css element by putting table before the scorll bar selector. So you could do:
table::-webkit-scrollbar{
/*Your styles here*/
}
table::-webkit-scrollbar-thumb{
/*Your styles here*/
}
table::-webkit-scrollbar-thumb:window-inactive{
/*Your styles here*/
}
Proof of concept here: http://codepen.io/supah_frank/pen/JooNKx
EDIT: Additionally, I've noticed a few weird quirks while playing around with this in chrome (Don't know if it affects other browsers).
First, the css for the scroll bars seems to cache, so make sure to do a hard refresh (ctrl + F5) after changing the css.
Second, even if you are not styling it, you need to target and apply some style to {your element}::-webkit-scrollbar before making any other changes to the scroll bar for an element (I found display: block works if you don't want to really make any changes). If you don't target it, none of the other css on the scroll bar will work for some odd reason.
I'm trying to center an anchor tag which is displayed as a CSS3 shape (a large "play"-arrow) in a div.
My markup is as follows:
<div class="element halfcol">
<div class="inner beige-bg fullheight">
<div class="element-content">
</div>
</div>
</div>
And the CSS is:
.element {
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
.element .inner {
border: 2px solid #94111e;
min-height: 50px;
border-radius: 10px;
background-color: #fcf9e3;
height: inherit;
-moz-box-shadow: 2px 2px 6px #646464;
-webkit-box-shadow: 2px 2px 6px #646464;
box-shadow: 2px 2px 6px #646464;
}
.element .inner .element-content {
padding: 10px 15px;
height: inherit;
}
.element .inner .no-padding {
padding: 0px;
}
.element .beige-bg {
background-color: #fcf9e3;
}
.element .red-bg {
background-color: #94111e;
}
.element .transparent-bg {
background-color: transparent;
}
.element .white-bg {
background-color: #ffffff;
}
.element .smallheight,
.element .doubleheight,
.element .fullheight {
overflow-y: hidden;
}
.element .smallheight {
height: 90px;
}
.element .doubleheight {
height: 220px;
}
.element .doubleheight .element-content {
position: relative;
}
.element .fullheight {
height: 350px;
}
.element .no-padding {
padding: 0px !important;
}
/**** Shapes ****/
.play-button {
display: block;
margin: 0 auto;
border-left: 100px solid #94111e;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}
Which gives me this:
What I'm looking for is this:
I could just give it a margin top/left to center it, but the .element container is of variable height and width.
Anyone know how to achieve this? :-)
Thanks in advance!
You need to make the .element-content be position:relative and then
add
position:absolute;
top:50%;
left:50%;
margin-top:-60px;
margin-left:-50px;
to the .play-button
Demo at http://jsfiddle.net/jKs6F/
I changed your .play-button class as follows:
.play-button {
display: block;
margin: 0 auto;
border-left: 100px solid #94111e;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
margin-left: -50px; /* half border-left value */
margin-top: -60px; /* border-top value */
position: relative; left: 50%; top: 50%;
}
See demo