I have done a calendar with plugin full-calendar. I want to change the style of today date.
.fc-unthemed .fc-today {
color: #fff !important;
background-color: red;
}
But the background color of the cell, have to be like the next image.
How could do it? Thanks
You can apply CSS to create border like a triangle and show it at the top-right corner.
.fc-day.fc-today {
position: relative;
}
.fc-day.fc-today::before,
.fc-day.fc-today::after {
content: '';
position: absolute;
top: 0;
right: 0;
border-color: transparent;
border-style: solid;
}
.fc-day.fc-today::before {
border-width: 1.5em;
}
.fc-day.fc-today::after {
border-radius: 0;
border-width: 1.5em;
border-right-color: red;
border-top-color: red;
}
The output will be shown like below.
Related
This question already has an answer here:
How to cut a circular part from an image?
(1 answer)
Closed 1 year ago.
I am trying to create image icons that have a status dot which emulates Slack member-icons (left).
How can I use CSS to add a transparent ring around the dot?
.memberIconRow {
display: flex;
.memberIconArea {
position: relative;
img {
width: 30px;
margin: 0 6px 0 0;
border-radius: 5px;
}
.statusDot {
background: #f00;
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
z-index: 2;
top: 21px;
left: 23px;
}
}
}
Some dirty trick what I think of is add border to your dot with the same background as your photo, in this case - a light yellow.
Like this -
.statusDot {
...
border:4px solid yellow; /* same color as you profile photo background */
}
In multiple background colours case, use css var() like;
:root {
--blue: #1e90ff;
}
.member-bg {
background-color: var(--blue);
}
. statusDot {
border: 4px solid var(--blue);
}
I want to change the scrollbar width wider, so it looks clear when user hover on it.
So I wrote:
::-webkit-scrollbar {
width: 7px;
height: 7px;
background-color: #ddd;
}
::-webkit-scrollbar:hover {
width: 10px;
height: 10px;
background-color: red;
}
The background color changed to red, but not the width, Is there anyway to solve this?
Here is plnkr
*:hover::-webkit-scrollbar {
width: 10px;
height: 10px;
}
This will change the width and height of any element's scrollbar. If you want to be more specific, just exchange the '*' to a selector of your choice. For instance, to apply it to scrollbars of elements with the class of 'my-custom-scrollbar':
.my-custom-scrollbar:hover::-webkit-scrollbar {
width: 10px;
height: 10px;
}
You can achieve that by using border instead of width:
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-thumb {
background: #ababab;
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box; // <== make the border work
}
::-webkit-scrollbar-thumb:hover{
border: 0;
}
::-webkit-scrollbar-track {
background: transparent;
}
this is a workaround I used using mousemove event:
document.addEventListener("mousemove", function(e){
let ele = document.getElementById('element');
let distance = ele.offsetLeft + ele.offsetWidth - e.pageX;
distance < 15 && distance > -15 ? ele.classList.add('more-width') : ele.classList.remove('more-width');
});
and styling would be
#element::-webkit-scrollbar-thumb {
background: #888;
}
#element::-webkit-scrollbar {
width: 5px;
}
#element.more-width::-webkit-scrollbar {
width: 10px;
}
codepen sample: https://codepen.io/KhaleD_D/pen/OJpgJKM
This solution uses scrollbar which is natively 16px large, but we show only 6px to make it thinner (and leave more space for content). But the trick is overflow: overlay which allows content to be displayed even over scrollbar area.
Using this approach you have thin scrollbar which enlarges on hover (and the hover are is a bit wider).
I got inspired by Khaled's solution, but I used CSS only approach:
.custom-scrollbar {
scrollbar-color: var(--gray) var(--secondary);
scrollbar-width: thin;
overflow: overlay !important;
}
.custom-scrollbar::-webkit-scrollbar {
width: 16px;
height: 16px;
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-track-piece {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb:vertical {
background: linear-gradient(to left, var(--gray) 6px, transparent 0%);
}
.custom-scrollbar::-webkit-scrollbar-thumb:horizontal {
background: linear-gradient(to bottom, var(--gray) 6px, transparent 0%);
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: var(--gray);
}
I use following code to achieve increase width on hover effect.
Sadly, its working on Chrome and Edge only. My apologies for incorrect formatting.
* {
&::-webkit-scrollbar-thumb {
border: 5px solid transparent;
border-radius: 10px;
background-color: grey;
background-clip: content-box;
-webkit-background-clip: content-box;
}
&::-webkit-scrollbar-thumb:hover {
background-color: black;
background-clip: border-box;
-webkit-background-clip: border-box;
}
&::-webkit-scrollbar {
width: 16px;
height: 16px;
background-color: transparent;
}
}
Is there a way to display a tooltip or bubble as per the image below to show the highest value in the line graph? It should be visible at all time not just when roll over with the mouse.
Does jQplot support this? If not, is there any other graphing librabry that does this?
Many thanks.
With jqplot, this is possible using the pointLabels plugin:
JS:
$(document).ready(function(){
var line1 = [[0,14,null],[1,32,null], [2,41,null], [3,44,'Hello World!'], [4,40,null], [5,47,null], [6,53,null], [7,67,null]]; // Only the 'Hello World' will have a label
var plot1 = $.jqplot('chart1', [line1], {
title: 'Chart with Point Labels',
seriesDefaults: {
showMarker:false,
pointLabels: { show:true }
}
});
});
CSS for bubble (from here):
#chart1 .jqplot-point-label {
width: 100px;
height: 25px;
padding: 0px;
background: #CC857E;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align: center;
padding-top: 10px;
margin-bottom: 8px;
}
.jqplot-point-label:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 10px 0;
border-color: #CC857E transparent;
display: block;
width: 0;
z-index: 1;
bottom: -10px;
left: 40px;
}
Produces this (fiddle here):
In the highstock you can use flags like this
Other options is using renderer to add custom shapes: http://api.highcharts.com/highstock#Renderer
<a id="nextslide" class="load-item"></a>
#nextslide:after {
position: absolute;
left: 100%;
bottom: 0;
width: 0;
height: 0;
content: '';
border-bottom: 36px solid rgba(0,0,0,0.75);
border-right: 36px solid transparent;
}
If I press the #nextslide:after shape, it will load the next slide. I would like to disable link function for the above shape, I want it to work only when I press the #nextslide not psuedo. Is there any simple CSS method for this ?
Theres is just one possibility with CSS you can add this :
#nextslide:after {
pointer-events: none;
}
The big problem is compatibility http://caniuse.com/pointer-events
Anybody figured out how to print the colors on progress bars in bootstrap 3? Saw some hacks for 2.3.2 but I can't do it on bootstrap 3.
.progress {
background-image: none;
-webkit-print-color-adjust: exact;
box-shadow: inset 0 0;
-webkit-box-shadow: inset 0 0;
}
.progress > .progress-bar {
background-image: none;
-webkit-print-color-adjust: exact;
box-shadow: inset 0 0;
-webkit-box-shadow: inset 0 0;
}
Maybe a starting point for someone, based off of some code I found for the old workaround.
To build on the prior answer this is how I have the CSS setup to print from Chrome or IE. FireFox still does not work. You'll need to set up each bar color though.. info, success, etc.
#media print{
.progress{
background-color: #F5F5F5 !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#F5F5F5', endColorstr='#F5F5F5')" !important;
}
.progress-bar-info{
display: block !important;
background-color: #5BC0DE !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#5BC0DE', endColorstr='#5BC0DE')" !important;
}
.progress, .progress > .progress-bar {
display: block !important;
-webkit-print-color-adjust: exact !important;
box-shadow: inset 0 0 !important;
-webkit-box-shadow: inset 0 0 !important;
}
}
Reference:
CSS #media print issues with background-color;
Beside the -webkit-print-color-adjust: exact; for b.e. .progress-bar-success you will have to make the background visible also. You can do this by adding !important to the ccs rules, see: Background color not showing in print preview
Add / bind the different print style to #media print in a different style sheet.
For printing the borders / shadows of the progress bar add !important to the border-box properties too. See also: Remove shadow from printed version and text-shadow and box-shadow while printing (Chrome)
This is because the browser doesn't print backgrounds (with default settings), but it prints borders and we can use it!
Just try this https://stackoverflow.com/a/46216102/8601222
Edited after comments
You can add this for #media print (my LESS-CSS code):
#media print {
.progress {
position: relative;
&:before {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
border-bottom: #line-height-computed solid #gray-lighter;
}
&-bar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 1;
border-bottom: #line-height-computed solid #brand-primary;
&-success {
border-bottom-color: #brand-success;
}
&-info {
border-bottom-color: #brand-info;
}
&-warning {
border-bottom-color: #brand-warning;
}
&-danger {
border-bottom-color: #brand-danger;
}
}
}
}
Compiled CSS (with my variables):
#media print {
.progress {
position: relative;
}
.progress:before {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
border-bottom: 2rem solid #eeeeee;
}
.progress-bar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 1;
border-bottom: 2rem solid #337ab7;
}
.progress-bar-success {
border-bottom-color: #67c600;
}
.progress-bar-info {
border-bottom-color: #5bc0de;
}
.progress-bar-warning {
border-bottom-color: #f0a839;
}
.progress-bar-danger {
border-bottom-color: #ee2f31;
}
}
Works like a charm in Bootstrap 3.