CSS in v3 is incomprehensible

[dahowlett]

I just upgraded, found the plugin needed to be re-implemented in the sidebars. This is bad news – we have custom sidebars so need to implement for ALL of them. This should NOT be default behavior and now find the CSS almost incomprehensible.

Then I find that the default styles are just plain awful. No idea what’s going on but they look dreadful. Reverted to ‘old template’ view.

The documentation refers to events.css but that file does not exist anywhere I can find in the plugin folders.

In the old version, the plugin picked up the site theme styling and we had no custom CSS for this plugin. It wasn’t perfect but it’s a lot better than we have now.

Now I read something about having to style for the theme (duh?) and that I might well need ANOTHER plugin to act as an override (to what?)

Guys…this is NOT what should be happening. It’s driving me crazy on a live site. Any help much appreciated but to be honest, this version should not have been released without a lot more work being done on the impact from past releases.

My main concern is that I cannot find the styles for the sidebar ‘events’ widget even though I can identify them with Firebug.

[Barry]

I’m sorry first of all that you’ve had such a painful experience.

The widgets have effectively been rewritten and so we decided the best course of action was to remove the old ones and let users re-establish their sidebars with the new ones. That may not be ideal in some cases and we apologize if you were negatively affected here.

This was a major update and clearly you’ve had a bit of a bumpy ride – all I can say is that to keep things progressing forward changes had to be made and some of them were breaking changes. That’s often the case with major updates between software releases, not just ours, and in communicating with our customer base we did try to highlight that extra time and resources may need to be budgeted for when making the upgrade, particularly for very custom installations.

If we didn’t communicate that effectively enough – and I guess in your case perhaps we did not – then we are genuinely sorry and open to ideas about handling this better for any future releases of similar magnitude.

Then I find that the default styles are just plain awful. No idea what’s going on but they look dreadful … The documentation refers to events.css but that file does not exist anywhere I can find in the plugin folders.

Sorry to hear you don’t like the new styles – though it will of course vary from theme to theme most people find the default Tribe styles of the new plugin to be aesthetically pleasing, but of course that’s subjective and what one person likes another may hate 🙂

You may inadvertently have been referring to the old documentation (if you could share the link where you saw that reference that may be useful, though). In the current version your theme overrides should be contained in a folder named tribe-events and the stylesheet should be name tribe-events.css.

Now I read something about having to style for the theme (duh?) and that I might well need ANOTHER plugin to act as an override (to what?)

I’m really not sure what you are referring to here.

As with the previous version it is going to be necessary in many cases to tweak the styles some to make it really mesh with your theme – that’s true – however I’m not sure where you read this information about requiring another plugin to act as an override – again perhaps you could share a link?

[Barry]

My main concern is that I cannot find the styles for the sidebar ‘events’ widget even though I can identify them with Firebug.

Much of the styling will be inherited directly from your theme. Is there a specific element of the widget that you are trying to target?

[dahowlett]

@barry thanks for getting back to me.

The plugin I referred to is: The Events Calendar User CSS

I still don’t have a clear answer – where are the CSS hooks? From what you say it looks like I will have to style the whole of the sidebar widget so if you can tell me where the hooks are, what they are targeting etc then I can move on.

I’ve attempted to find this with Firebug but am lucking out.

[Barry]

So for the events list widget you can use:

.tribe-events-adv-list-widget { /* Your rules */ }

For individual events within it you might use:

.tribe-events-adv-list-widget > ol > li { /* Your rules */ }

And so on. Does that help?

[dahowlett]

Thx – I’ll let you know. FYI – we make all CSS changes via a custom CSS file which I will try first.

[Barry]

The plugin I referred to is: The Events Calendar User CSS

So in previous versions of The Events Calendar if the events.css file was overridden then instead of building on the default styles it replaced them completely. That plugin, I believe, was designed to change the situation so that the default styles were still used and new styles did indeed build on top of those.

I don’t believe that’s necessary any more since as of 3.0 stylesheet overrides essentially function that way right off the bat. So, unless The Events Calendar User CSS has changed to do something new you probably won’t need it.

[Andy Fragen]

Barry, is correct. The Events Calendar User CSS is no longer required for TEC 3.0 as long as you’ve changed the override CSS to be in {YOUR_THEME/tribe-events/tribe-events.css

[Andy Fragen]

dahowlett – Oops, I just discovered that while TEC 3.0 does automatically load your override CSS if your have it located in the {YOUR_THEME}/tribe-events/tribe-events.css it loads it before the default CSS and not after. Therefore, none of your overrides will work.

I’ve adapted The Events Calendar User CSS to fix this and load the override CSS in at the end. Please update to version 0.9 and let us know if it works.

[Barry]

Great work Andy 🙂 – dahowlett so you have a couple of approaches here that you can take advantage of. Are there any other points that you raised still in need of attention?

[Author]

Posts