Today’s update erased my custom CSS

[mlfa]

I had a background white at “opacity: 0.8;” for the widget module that displays on our home page, but this disappeared after today’s update. I would really like some help getting that back. If someone could just point me in the right direction.

I essentially had all the widgets on the homepage looking the same. https://www.mlfa.org

[mlfa]

I still have the custom CSS in the template/tribe-events/pro folder tribe-events-pro.css but it doesn’t seem to be fully registering.

Here is the customer CSS

/* .tribe-events-adv-list-widget-3 { height: 400px; } */

.tribe-events-adv-list-widget ol {
list-style:none;
background-color: #fff;
opacity:0.8;
filter:alpha(opacity=80);
height: 400px;
/* padding: 10px; */
}

.tribe-events-adv-list-widget li {
list-style:none;
background-color: #fff;
opacity:0.8;
filter:alpha(opacity=80);
/* height: 380px; */
padding: 10px;
}

[Brian]

Hi,

Thanks for using our plugins. Sorry for the css issues on the update.

We changed the css for the list widget in 3.9 and I am afraid we also have a glitch where it is not loading the css for the event list widget.

I would recommend adding that css in your reply using a plugin such as a href=”https://wordpress.org/plugins/simple-custom-css/”>Simple Custom CSS.

Then please add this coding to your theme’s function to fix the styling for the Event List Widget:

https://gist.github.com/jesseeproductions/9ac665ddcdef95c8a2e5

Let me know how that works out and I can provide some more information if you like.

Thanks

[mlfa]

Where do I find the ecp-list-widget file? is that a css, php, or other file type (what extension should I look for)?

Thank you!

[Brian]

You can follow our themer’s guide to move the list widget to your theme and modify it there.

https://theeventscalendar.com/support/documentation/events-calendar-themers-guide/

These are the two files to start with:

events-calendar-pro\views\pro\widgets\list-widget.php

events-calendar-pro\views\pro\widgets\modules\single-event.php

The snippet I have before is to add to your theme’s function.php file and loads the css.

Let me know if that helps.

Thanks

[mlfa]

I created the /theme/tribe-events/pro folder when I customized the widget the first time. It was reading the tribe-events-pro.css file and adding the white background to the widget. Now, it is not and I’m not a programmer so this is really confusing. Everything seems to look fine except the background. All I need to do is add the white background with opacity:0.8 for the widget.

I edited and uploaded tribe-events-pro-full.css and tribe-events-full.css to the /pro folder under my theme and the background did not become white.

[Brian]

Unfortunately, that way no longer works.

I would try to a plugin such as Simple Custom CSS. and add the css through that.

The coding also changed so you will have to modify the css, this may work:

.tribe-events-adv-list-widget {
list-style:none;
background-color: #fff;
opacity:0.8;
filter:alpha(opacity=80);
height: 400px;
/* padding: 10px; */
}

.tribe-events-adv-list-widget .type-tribe_events {
list-style:none;
background-color: #fff;
opacity:0.8;
filter:alpha(opacity=80);
/* height: 380px; */
padding: 10px;
}

[mlfa]

That seemed to get it somewhere… the white background is back, but I think it’s putting it over the entire widget (header block and content portion), which is making the header block look lighter than the other two widgets. When I ran across this the first time, it was because the calendar was styling the ol and li together and I separated them out, so the li was the only one getting the white background treatment.

How can I achieve this with this new version?

[mlfa]

Oh, and thank you, by the way.

[Brian]

Your Welcome.

No worries, you could try removing this css:

.tribe-events-adv-list-widget {
list-style:none;
background-color: #fff;
opacity:0.8;
filter:alpha(opacity=80);
height: 400px;
/* padding: 10px; */
}

And see if that works for you.

That might get you closer.

[mlfa]

YES! That brought the blue back to normal. The height is a little messed up, but I can live with it for now (until I have time to figure out if I want to make the other widgets taller or try to tame the calendar widget to make it smaller).

[mlfa]

Perhaps I can get rid of the extra padding beneath each listing?

[mlfa]

I reduced the padding from 10px to 2px and that seemed to get the height issue under control. Thank you, again.

[Brian]

Great, glad it helps, I am going to go ahead and close this ticket, but if you need help on this or something else please post a new ticket.

Thanks!

[Author]

Posts