This gap right here highlighted in red
preferably the change is only in the day view
FullCalendar Version 4.3.1
override this style
.fc-direction-ltr .fc-timegrid-col-events { margin: 0 2.5% 0 2px; }
either match the left and right gaps
.fc-direction-ltr .fc-timegrid-col-events { margin: 0 2px 0 2px; }
or have no gaps at all
.fc-direction-ltr .fc-timegrid-col-events { margin: 0; }
make it day specific by changing to
.fc-timeGridDay-view .fc-timegrid-col-events { margin: 0; }
Correct for FullCalendar v5
--
update, this should work for v4
override this
.fc-ltr .fc-time-grid .fc-event-container { margin: 0 2.5% 0 2px; }
to either match left and right
.fc-ltr .fc-time-grid .fc-event-container { margin: 0 2px 0 2px; }
or no gaps at all
.fc-ltr .fc-time-grid .fc-event-container { margin: 0; }
Related
Here is the style sheet:
QSlider{
border: 0px solid;
}
QSlider::handle:horizontal#slider_xScaling{
image: url(":/tools/references/dragger.png")no-repeat scroll 0 0;;
}
QSlider::add-page:horizontal#slider_xScaling{
image: url(":/info/references/ic-scroll-layer-track.png")no-repeat scroll 0 0;
}
QSlider::sub-page:horizontal {
background: transparent url(":/tools/references/ic-track-fill.png") no-repeat scroll 0 0;
margin-top: -1px;
}
I have been experimenting on the CSS stylesheet on QT but still can't produce the proper output for this. The track is supposed to be on the middle obviously but here it is.
This is how I fixed it. I also changed the height of the QSlider to make the tracker in line with the handle
QSlider::sub-page:horizontal {
background: transparent url(":/tools/references/ic-track-fill.png") no-repeat scroll 0 0;
}
QSlider::handle:horizontal{
image: url(":/tools/references/dragger.png")no-repeat scroll 0 0;
}
QSlider{
border:0px solid;
}
How to fix footer height on my website https://ekasya.com?
I tried this code
.footer-widgets {
padding: 10px 0 0 0 !important;
}
#sidebar-footer.widget-area .col-md-12 .widget {
margin-bottom: 0 !important;
}
But nothing happend using shopekeeper theme please help me?
You can change site footer padding:
#site-footer {
padding: 0px;
}
So lets have following snippet:
.dashboard.tile {
display: block;
color:white;
&-blue {
#body-color:#light-blue;
#footer-color:#dark-blue;
font-size: 10px;
}
#body-color:#greenBright;
#footer-color:#000;
div.tile-body {
border-radius: #tile-border-radius #tile-border-radius 0 0;
background-color: #body-color;
font-size: #font-size-h2;
}
div.tile-footer {
border-radius: 0 0 #tile-border-radius #tile-border-radius;
background-color: #footer-color;
}
}
My goal is to create additional classes like tile-blue tile-red etc that would only change color variable values.
Unformtunelty this does not work. tile-blue gets generated with font-size:10 but variables are unaffected - more over, default color is not applied so I guess that i have messed something up with selector hierarchy etc.
Found the solution that exactly suits my needs
.dashboard-tile{
&-blue{
.dashboard-tile(#light-blue,#dark-blue)
}
&-green{
.dashboard-tile(#light-green,#dark-green)
}
&-red{
.dashboard-tile(#light-red,#dark-red)
}
&-violet{
.dashboard-tile(#light-violet,#dark-violet)
}
}
.dashboard-tile(#body-color,#footer-color) {
margin-bottom: 5px;
margin-top: 5px;
display: block;
color: white;
.tile-body {
border-radius: #tile-border-radius #tile-border-radius 0 0;
background-color: #body-color;
font-size:#font-size-h2;
#tilePadding;
}
.tile-footer {
border-radius: 0 0 #tile-border-radius #tile-border-radius;
background-color: #footer-color;
#tilePadding;
}
}
For a given class, I want to have the following styles:
stlye1 {
padding-top: 0;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0px;
}
But that's a lot of duplicates so I would like to just write:
stlye1 {
padding: 0;
padding-bottom: 10px;
}
Will this be something bad to do?
update:
when I see 3 values (the short hand), i'm not sure what is the last one going to apply to.
so i came up with the second method above to make it clear which one i want to override.
update 2:
for a short hand method, how do you specific the followings:
stlye1 {
padding-top: 0;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0px;
}
style1 {
padding: 0 0 10px; // now i know this one, thanks!
}
stlye2 {
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 0px;
}
style2 {
padding: 0 10px 0; // is this correct?
}
stlye3 {
padding-top: 10px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0px;
}
style3 {
padding: 10px 0 0; // is this correct?
}
stlye4 {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 10px;
}
style4 {
padding: // i have no clue.
}
update 3:
in short, style2 and 4 cannot be done in shorthand format by suppling 3 values only.
as indicated by PassKit, left and right can't be specified alone with 3 values only.
Why don't you just use the shorthand?
stlye1 {
padding: 0 0 10px; /* top (right/left) bottom */
}
Where it's:
padding: top right bottom left;
While your suggestion is perfectly valid, the most concise form would be:
stlye1 {
padding: 0 0 10px;
}
This short hand format breaks down as padding: top(0) right(0) bottom(10px); and left defaults to the right value because a left value has not been specified.
For the 4 styles in your question, styles 1 and 3 are correct, but for styles 2 and 4, see style 5 below and the accompanying note.
For reference, the style shorthand breaks down as follows:
If there is one value, it applies to all 4 attributes, top, right, bottom and left.
stlye1value {
padding: 10px;
}
/* equals */
stlye1value {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
If there are two values, the first value applies to top & bottom attributes and the second value to left & right
stlye2values {
padding: 0 10px;
}
/* equals */
stlye2values {
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}
If there are 3 valus, the first applies to top, the second applies to left & right and the third applies to bottom.
stlye3values {
padding: 0 10px 20px;
}
/* equals */
stlye3values {
padding-top: 0;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}
Specifying all 4 values sets padding in the order top, right, bottom, left (think of a clockwise circle starting at the top).
stlye4values {
padding: 0 10px 20px 30px;
}
/* equals */
stlye4values {
padding-top: 0;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 30px;
}
Note: There is no way to independently specify a right or left value using shorthand without entering all 4 values or using the padding-left or padding-right.
style5 {
padding-left: 10px;
}
/* providing there are no previous padding rule for style5 equals */
style5 {
padding: 0 0 0 10px;
}
/* equals */
stlye5 {
padding:0;
padding-left:10px;
}
/* equals */
stlye5 {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 10px;
}
I'm trying to make a Mixin output two different things based on context. Like so:
.seticon(#r,#g,#b) {
b {
background-color: rgb(#r,#g,#b);
}
&.act b {
.box-shadow(0 0 5px 1px rgba(#r,#g,#b,0.45));
}
&.act.hover b {
background: #000;
.box-shadow(inset 0 0 0 3px rgb(#r,#g,#b) !important;
}
}
.nonreceivable {
.seticon(#r,#g,#b) {
b {
background: #000 !important;
.box-shadow(inset 0 0 0 2px rgb(#r,#g,#b));
}
}
}
Now .seticon works as expected, but .nonreceivable .seticon doesn't seem to work. Is this a bug, or am I doing something wrong or isn't this intended by the Less developers? How would you instead solve this?
Is nonreceivable class applied to the same element or parent element? if it's parent, it should work. Otherwise, put an & in front of .section
.nonreceivable {
&.seticon(#r,#g,#b) {
b {
background: #000 !important;
.box-shadow(inset 0 0 0 2px rgb(#r,#g,#b));
}
}
}