Trying to override the styles of FullCalendar, but running into some issues.
Within .fc td, .fc th on Chrome, I disabled the border-style attribute, and thus, there are no border attributes for the fc-widget-header. However, I attempted to do this in my CSS using:
.fc td, .fc th {
border-style: none;
}
It did not remove the border.
Next, I am trying to remove the today border:
In Chrome, it meant disabling:
.fc td.fc-today {
/* border-style: double; */
}
I did that in my CSS, and that also did not work.
Wondering what the issue is?
EDIT:
Ok, so I setup a Fiddle to show you guys it didn't work. However, strangely, it worked in my Fiddle: http://jsfiddle.net/46tnzj72/10/ But not in my actual app.
The most probable reason for this issue was due to the CSS priority levels. If any selector having the higher priority then it overwrites your styles, so for this case you need to write the selector with higher priority level.
Otherwise you can simply use the !important with you CSS styles, so it doesn't consider any priority and the important style only applied.
.fc td, .fc th {
border-style: none !important;
}
(or)
.fc td, .fc th {
border-style: double !important;
border-width: 3px !important;
border-color: #aaa !important;
}
Updated Fiddle
I am not sure what you mean by heading but you can remove the border of Today by placing the following code in your CSS
.fc-right > button{
border: none;
}
Update
I just noticed that your border is removed by setting the border of .fc td, .fc th to non but your chrome is loading the cached stylesheet so you have to "Disable cache (while DevTools is open)", to do so inspect your element and click the settings symbol then check the check box beside Disable cache (while DevTools is open).
i hope it will help you
use these scss styles
.calendar-wrapper {
.fc-scrollgrid {
border-color: transparent !important;
}
.fc-scrollgrid td:last-of-type {
border-right-color: transparent !important;
}
.fc-scrollgrid-section.fc-scrollgrid-section-body td[role='presentation'] {
border-bottom-color: transparent !important;
}
[role='row']:last-of-type td {
border-bottom-color: transparent !important;
}
th[role='presentation'] {
border-right-color: transparent !important;
}
}
Related
I'm styling the page which has consecutive boxes with bottom border except for the last box. I applied class .box for all the boxes and added .box_last to hide the border only for the last box.
.box {
border-bottom-style: solid;
}
.box_last {
border-bottom-style: transparent;
}
However, I realized that the browser is still applying my .box styling. But when I changed the .box_last from transparent to none, the browser overrode the first style and the border is disappeared.
I have searched for a few CSS specificity articles but hasn't got the answer yet. Can anyone explain for me? Thanks in advances.
The reason border-bottom-style: transparent; is not working is because transparent is a color, not a style. This should work fine:
.box_last {
border-bottom-color: transparent;
}
Or without an extra class:
.box:last-child {
border-bottom-color: transparent;
}
So, i'm having a bit of trouble with some css hover and tables. I got most things to work but while chrome changes the color just to the content and ignoring the padding, firefox does not. It just changes everything, padding or not. I just can't figure out how to make it look the same in both browsers even when using a css reset.
I tried this in firefox 35 and chrome 40.
Edit: Should've said that i was looking for firefox to display it like chrome does.
Here's fiddle with the code.
span {
height: 50px
line-height: 50px;
background-color: orange;
}
table {
border-spacing: 0;
}
tr > td {
padding-top: 6px;
}
tr:hover {
background-color: red;
background-clip: content-box;
}
In Chrome, it appears that the background-clip is being applied to the child elements, whereas in Firefox, it is being applied to the tr instead of the child elements.
To make Firefox behave like Chrome, simply change
tr:hover {
background-color: red;
background-clip: content-box;
}
To
tr:hover>td {
background-color: red;
background-clip: content-box;
}
And the background of each td will be clipped separately.
http://jsfiddle.net/degLm3vv/6/
The > operator specifies that the following CSS selector only applies to direct descendents of the previous selector. In this case direct td descendents of a tr that is being hovered over.
if you want chrome to look like firefox you have to use the webkit- prefix
background-clip: webkit-content-box;
http://jsfiddle.net/degLm3vv/5/
Let's say I have a Button with the following CSS style:
Button {
border:2px #eee solid;
border-top-width: 5px;
}
This will generate a button that has a 2px border in color #eee, except the top border will be 5px in thickness.
Now, let's say I have another button that inherits this style, but for this new Button I would like to remove the border-top-width property.
So my question is, how can I set border-top-width to null or to listen to the default border style? The following doesn't work but shows what I'm trying to do:
Button.class-name {
border-top-width: auto;
}
Note that in my situation, I can't just set the value to "2px". I need to remove the value entirely. I've tried "auto", "inherit", "initial", etc... and nothing seems to remove the "border-top-width" property...
Any ideas?
CSS proposes an initial value which would reset it to the default value for the browser.
There is no way (and no proposed way) to set it to the value set by the previous but one rule that set it.
If you want it to take the value from border:2px #eee solid; then you must explicitly set it to 2px.
If you were using a CSS preprocessor, such as SASS, you could use a variable:
$defaultBorderWidth: 2px;
Button {
border:$defaultBorderWidth #eee solid;
border-top-width: 5px;
}
Button.class-name {
border-top-width: $defaultBorderWidth;
}
You could also use this technique with native CSS variables.
You can just use the class to set the width of the button that should be 5px on top:
button {
border:2px #eee solid;
}
button.class-name {
border-top-width: 5px;
}
You can, also, use the :not() CSS selector:
button{
border:2px #eee solid;
}
button:not(.normal) {
border-top-width: 5px;
}
Fiddle
You can use like this if you want your top border-top-width is null;
HTML code
<button>Press me</button>
<button>Hit me</button>
<button class="leave-me">Leave me</button>
CSS code:
button{
border:2px #eee solid;
border-top-width: 5px;
}
button.leave-me{
border-top-width:initial;
}
JSFIDDLE
Eighter you put the border-top-width on your
button.class-name
Or instead of calling that property on the css, try calling it directly on your html.
Or, you can also, on the second button, call
border-top-width:2px;
I have two style sheets in page.html:
parent.css and child.css
In parent.css I have:
#MAINTable tr:hover
{
background:#C0C0C0;
}
I need to deactivate this from child.css
I'm doing:
#MAINTable tr:hover{text-decoration: none !important;}
But this is not working. What am I doing wrong?
Thanks a lot!
PD: Sorry if the question was too simple, learning CSS here
You can try this to overwrite the background:
#MAINTable tr:hover {
background: transparent;
}
Parent.css defines the background, but child.css only sets the text decoration. They both stay, due to the nature of CSS. You need to override it manually.
In child.css:
#MAINTable tr:hover{
text-decoration: none !important;
background: none transparent !important;
}
If child.css is after parent.css you don't need the second !important. I used none transparent so that it also overrides any background images.
I have some CSS added to support a table that looks like this:
#outertable {
background-color: #000000 !important;
border: 40px black solid !important;
}
#innertable {
background-color: #000000 !important;
border: 20px #A67100 solid !important;
}
#innertable td {
background-color:#F1F1D4 !important;
border: 2px #A67100 solid !important;
}
When I use the above CSS in a stand-alone HTML page, it works fine. There is no other CSS, so there are no conflicts. However, when I incorporated the above CSS into a Joomla template there is a problem, that Table's cell doesn't include what is expected. I used Inspect in Google Chrome web browser and identified the source of the problem. Here is the CSS that's causing the problem to the above CSS:
table, table td {
border-collapse: collapse;
}
While in Inspect in Chrome I can uncheck the box for this CSS code and the page looks like expected. The CSS for this is coming from com_content.css. But I don't want to override this CSS for the entire website, just for the table it's being used in on this specific Joomla web page of the site.
How can I incorporate the above CSS into the CSS at the top of this posting so it has the same effect that unchecking it does in Chrome's Inspect, but only on this table on this web page of Joomla?
I have tried adding a 'border-collapse:separate', but it doesn't do anything:
#innertable td {
background-color:#F1F1D4 !important;
border: 2px #A67100 solid !important;
border-collapse:separate !important;
}
I'm not a CSS expert by any means, so I would greatly appreciate help on this. Thanks!
The border-collapse property affects tables only, not cells, so you need to set it on the table element:
#innertable { border-collapse: separate }
You should also consider using selectors and named HTML elements so that you can apply styles on a per element basis