I am using the jquery fullcalendar and it's working great however in the agendaweek view there are no dividing lines between the days.
I have reviewed the fullcalendar site and even tried to find what css handled displaying the dividing lines with no luck.
How do I get the day dividing lines to show?
Thanks
I had the same issue in angular js (bower install), solved it with:
.fc-time-grid .fc-slats td {
background: transparent;
}
to add dividing lines between days
.fc-border-separate td {
border-width: 1px 0 0 1px;
border-color: red;
}
adjust pixels and color
I had the exact same issue using styling from http://jqueryui.com/themeroller/. If using themerolled calendar, try adding opacity to css class fc-agenda-slots td.
.fc-agenda-slots td {
border-width: 1px 0 0;
background: none;
opacity:0.15;
}
This is my solution.
$('.fc-timeGridWeek-button').click(function(){
$(".fc-time").next("td").removeClass('fc-widget-content').addClass('fc-widget-skeleton');
});
Related
I'm a CSS beginner and I struggle with this problem :
in a table, I have a CSS to display a line when I'm hover a row...
But if I'm hover a specific cell (the second column from the left in my example), I want the row line to hide
I cannot fix that
pict example
this is the code I use
.secondCell:hover {
text-align: left;
border-bottom: solid;
border-bottom-color: blue;
border-width: 1px
}
.tabulator-row.tabulator-selectable:hover {
border-bottom: solid;
border-bottom-color: #FD9A00;
border-width: 1px;
}
thanks
If I understand you correctly, I'd suggest a solution like this.
tbody td:not(:nth-child(3)):hover {
/* your hover properties here */
}
The :not() selector will not select an element if whatever inside the parentheses matches.
The :nth-child(x) selector selects a specific child. It also accepts odd org even as an argument.
In the future, please be more specific and provide an example of your HTML as well. It's hard to provide help when there is little to go on.
I am using bootstrap datetimepicker and want to remove the cell border around the days and months.
Here is what I have tried so far:
.bootstrap-datetimepicker-widget td {
border: 0px !important;
}
I have also attached an image to show the borders that I am trying to get rid of.
Any help is appreciated.
In CSS, you may create a border-like effect using at least 3 properties. Not knowing more about your case, try:
border: none;
box-shadow: none;
outline: none;
Maybe with !important.
I need to change a button on my website's homepage from a curved edge to sharp.
It is a WordPress website and I am trying to add this code via Additional CSS window.
I tried to perform the below code, but it did not work.
wobble-horizontal.shop-button.arrow-right.style2.black.bg-white
{
border:3px solid #bada55;
}
Any suggestion on how to make the button sharp-edged?
Edit: I have just realised I haven't mentioned "a" class at the beginning. It should be a.wobble. Sorry for the confusion.
Assuming that's just a div, it's as simple as setting the border-radius to 0px
Also, the library you're using could be high up in specificity, so you can also try border-radius: 0px !important; to try and force it.
Based on your border: 3px solid #bada55 line, I think you may have the wrong selector as that should be setting the border of that button a lime green and not gray.
#sharp {
border-radius: 0px;
}
#not-sharp {
border-radius: 10px;
}
div { background: red; margin: 10px; }
<div id="sharp">My Sharp Button</div>
<div id="not-sharp">My Not Sharp Button</div>
There seems to be another CSS script that is manipulating the border-radius property.
To have sharp borders, use:
border-radius: 0;
The code you were using just sets the border's thickness (3px), style (solid fill), and color(#bada55), not the radius.
If this does not do it, try tracing down what other CSS script is manipulating the border radius, or just use the !important directive to override:
border-radius: 0 !important;
border-radius: 0;
or border-radius: 0 !important; if your CSS is being overridden.
Setting border-radius to 0px should give you straight edges on the button
I'm looking for a way to remove the border around the event picture and event title on my main Page ( ofen49ers.de ).
Adding a custom class to the section and changing the border value to 0 dosen't seem to work. Maybe someone has an idea to remove the border.
Here the CSS I used:
.custom-class-event-front {
border: 0px !important;
}
You can try this
.fusion-events-shortcode .fusion-events-thumbnail, .fusion-events-shortcode .fusion-layout-column .fusion-column-wrapper {
border-width: 0!important;
}
<style>
.post-content .fusion-column-wrapper,
.fusion-events-thumbnail.hover-type-none
{
border: none !important;
}
</style>
I am trying to make a header of multistage form containing the page number and description .
What I want to do is divide each step with an arrow mark something like this
1 step > 2tep > 3 step> 4 step
This is mostly a css question I just need to know how to make those boder into arrow sign
Fiddle
Explanation
As you can see in the fiddle I have icons that changes to check mark when you slide to next step . So I am trying to separate these icons with > arrow and then add some css background colors to separate the active,previous, next steps
Looking at your fiddle, does this do what you want?
.divider:before { content: ">"; }
are you searching something like this fiddle (I've done a simple arrow with text)?
.generatecssdotcom_arrowpoint {position:absolute;top:0;right:0;font-size:8px;color:#cccccc;}
.generatecssdotcom_arrowpoint a {color:#cccccc;text-decoration:none;font-weight:normal;}
.generatecssdotcom_arrowpoint a:hover {color:#cccccc;text-decoration:none;font-weight:normal;}
.generatecssdotcom_arrow {text-align:left;font-size:24px;font-family:Georgia;color:#000000;width:250px;height:30px;position:relative;background:#E46B00;border:7px solid #FFCC00;margin:7px 41px 7px 7px;padding:10px;}
.generatecssdotcom_arrow:after, .generatecssdotcom_arrow:before {left:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;}
.generatecssdotcom_arrow:after {border-left-color:#E46B00;border-width:34px;margin-top:-34px;}
.generatecssdotcom_arrow:before {border-left-color:#FFCC00;border-width:44px;margin-top:-44px;}
refer this site to generate it
for a single arrow refer this demo
.arrow-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid green;
}
<div class="arrow-right"></div>