Of course it’s possible 🙂
You need to add the main content container and/or widget class to your styling. That way you “limit” its reach.
Please provide a link.
Thread Starter
drjanp
(@drjanp)
Hi Patrick,
Many thanks. I don’t have a link that I can provide, but I can give you the html:
Small Calendar (in widget):
<aside id=”sidebar” role=”complementary” class=”sidebar fusion-widget-area fusion-content-widget-area fusion-sidebar-right fusion-eventscalendar” style=”float: right;” >
<div id=”em_calendar-3″ class=”fusion-widget-align-default widget widget_em_calendar” style=”padding: 50px 0 0 0;”>
<div class=”heading”><h4 class=”widget-title”>Calendar of Events</h4></div>
<div id=”em-calendar-118″ class=”em-calendar-wrapper”><table class=”em-calendar”>
<thead>
<tr>
The full calendar has the following html:
<section id=”content” style=”width: 100%;”>
<div id=”post-1503″ class=”post-1503 page type-page status-publish hentry”>
<span class=”entry-title rich-snippet-hidden”>Events Calendar</span>
<span class=”vcard rich-snippet-hidden”>
<span class=”fn”></span></span>
<span class=”updated rich-snippet-hidden”>2019-07-30T20:31:35+08:00</span>
<div class=”post-content”>
<div class=”fusion-fullwidth fullwidth-box nonhundred-percent-fullwidth non-hundred-percent-height-scrolling” style=’background-color: rgba(255,255,255,0);background-position: center center;background-repeat: no-repeat;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;’><div class=”fusion-builder-row fusion-row “>
<div class=”fusion-layout-column fusion_builder_column fusion_builder_column_1_1 fusion-builder-column-1 fusion-one-full fusion-column-first fusion-column-last 1_1″ style=’margin-top:30px;margin-bottom:20px;’>
<div class=”fusion-column-wrapper” style=”padding: 0px 0px 0px 0px;background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;” data-bg-url=””>
<div class=”fusion-text”><div id=”em-calendar-172″ class=”em-calendar-wrapper”><table class=”em-calendar fullcalendar”>
<thead>
<tr>
etc
I have tried all sorts of different combinations of classes and cannot isolate the full calendar from the small one, so any advice would be appreciated.
Regards,
Janet
Fusion is using a LOT of inline styling. That is certainly NOT best practice! At all. Also, it’s almost impossible to successfully target, unless you dig into the actual code. And then all changes will be lost if the theme is updated.
You could try something like this:
#content .em-calendar-wrapper {
// Styling
}
#sidebar .em-calendar-wrapper {
// Styling
}
But since the main content calendar is wrapped in 5 divs with inline styling, it might not do the trick.
Thread Starter
drjanp
(@drjanp)
Hi Patrick,
Many thanks for your help. As a result of your comments, I have found out how to disable Fusion Builder on selected pages (I got rid of it for the Events listing page, which really cleared things up for me), and found that things are much easier to identify now. After doing that, it got rid of multiple classes, etc and your suggestion does indeed work for individual styling of the small and large calendar.
Thanks again for your help – very much appreciated!
