|
tneumann
|
November 22, 2015 at 6:54 am
I have a problem I am trying to solve and I think it may just be my not understanding the ids / classes and elements that are used in the full-sized calendar display.
I am trying the following:
#espresso_calendar:not(.ui-widget).calendar_fullsize .fc-today {
background-color:#FC0000;
}
in my Child-Theme style.css, but I am not getting expected result (red background on “today”). Looking at Chrome:Inspector it looks as though another style may be overwriting my change:
#espresso_calendar:not(.ui-widget).calendar_fullsize .fc-state-highlight {
background: #FEFEDF;
}
I am at loss to get the CSS Selector focused correctly in my CSS, can you clarify?
Additionally I would like to make similar changes to: fc-other-month, but can’t seem to get focus on that either.
Thanks!
Tim
http://softlitestudiossandbox.com/workshops-calendar/
|
|
Tony
|
November 23, 2015 at 1:45 am
Hi Tim,
There’s a couple of ways you can work around this.
The problem is that both of those above selectors have the same specificity – 0130
You can use something like this to compare: http://specificity.keegan.st/
When selectors have the same specificity which ever one loads last ‘wins’, so it depends on how you are loading these styles. You can try using a plugin such as My Custom CSS to loads your styles and load them in the footer.
Or you can add !important to your rule:
#espresso_calendar:not(.ui-widget).calendar_fullsize .fc-today {
background: #FC0000!important;
}
And that should work, or add another selector to your rule to make it even more specific, something like:
#main-content #espresso_calendar:not(.ui-widget).calendar_fullsize .fc-today {
background: #FC0000;
}
Does that help?
|
|
tneumann
|
November 23, 2015 at 4:13 am
That helps immeasurably and immediately solved the issue. Was not something I was aware of in CSS, so the link was extremely helpful!
Thanks Again!
Tim
|
|
Tony
|
November 23, 2015 at 12:01 pm
You’re most welcome, Tim 🙂
Have a great day.
|
