Styling the View My Events table a little better in the community addon

[James O’Sullivan]

Hi there, I am using the canvas v5.8.1 theme (latest version) from woothemes and I am using your community addon for Events Calendar. I have the frontend submission working and basically I also have a page where the user can view their events. My question is basically this, where the user views their events is like a table of their events however it’s very ugly and a little bit of a mess in terms of how they table seems to inherit the theme’s css. This is basically a theming question and I have looked at the guide here https://theeventscalendar.com/support/documentation/events-calendar-themers-guide/ however I am not sure about how to make this table just look a little more solid. I am not looking for it to be amazing or anything just for it to be a little more tidy and functional and work ultimately. Right now it looks like this: http://i58.tinypic.com/fmurfp.jpg

As you can see its certainly not awful but for the average user who is not tech savvy this table of events is very confusing. I really need a little more padding on this table and a little more spacing in general to divide up the columns as you can see. Is there any basic example for this I can follow where someone has tidied up the table? Or where would I go about making this a little neater, what override should I focus on here. Any help would be much appreciated.

In terms of my Settings > Display options I am using the Tribe Events Styles and the Events template is the default events template as in general this gives the best results. The only area that looks very bad right now is this table of submitted events by the user and well it has caused alot of confusion so I must try and amend it and make it look even 20% better with some padding as I describe. I hope this is descriptive enough to get some help here. thanks in advance. James

[Brook]

Howdy James,

I get where you are coming from. It would be amazing if it was easier for the non CSS crowd to make changes like that. But, the truth is that we have not found a tenable solution for allowing people to make all the changes they want, without having some knowledge of how CSS interacts with various browsers. And a person with that knowledge already knows enough to make changes far quicker and with greater flexibility than any GUI in Settings could ever offer them.

Here is a quick snippet I came up with that will add spacing to that table. You can freely play with the .15em (vertical) and .25em(horizontal) values if they are too big or too small for your tastes.:

table.events-community.my-events.enhanced { border-spacing: .15em .25em; }

You can add that line to any of your CSS files. If you do not already have any custom CSS files anywhere, follow this guide to add a Child Theme and put this inside of its CSS file.

I hope that helps. Ordinarily we do not provide CSS customizations like that as it falls well outside our scope of support. But, on occasion we are allowed to for nice folks like yourself. Cheers!

– Brook

[James O’Sullivan]

Cheers Brook, this really got me going in the right direction. I ended up using something like this actually in my child theme css:
.my-events th.essential, .my-events td.essential { padding: 10px !important; }

Just incase this helps anyone else, I just wanted to get rid of the crushing effect in this table really, other than that the styling is fine and I understand completely you guys keeping this as clean as possible. I just need that extra little bit of 5px or 10px cell spacing. Appreciate this and the great support. Thank you kindly sir once more 😉

[Brook]

You are so very welcome. Post back anytime.

By the way, if you have a minute or two, we would love it if you could write a few words about the plugin here. Happy developing!

– Brook

[Author]

Posts