Themer’s Guide has no CSS info or instructions

[dostie]

For the record, most of my problems were solved after reading this thread:
https://tri.be/support/forums/topic/events-calendar-3-0-not-working-with-theme/

On page 2 of the discussion there are a couple of nuggets. The use of the ” tag in the HTML after event content is critical to themes using sidebars. The hero for that trick is @sparkuparts. Bravo!

The other nugget is the Plug-in by Andy Fragen and his tips on how to use it properly. I suspect this may be what many people on this thread are looking for. Again, this is on page 2 of the thread Events Calendar Not Working with My Theme.

[smallmammothdesign]

Turns out, if you add the styles to your theme’s CSS, they overwrite the tribe styles (maybe just those elements that don’t have tribe styling applied?). In any case, works for me — hope it does for you too (if you set it to skeleton, there shouldn’t be any tribe styles applied and you should be good to go).

[Robin]

@dostie and kristy, I also added my styles to my theme’s customized CSS and they do indeed overwrite the tribe styles as expected. Thanks for sharing this. FYI I wasn’t using the skeleton version and it still works fine. I don’t use sidebars in my theme so that wasn’t an issue for me.

[Jonah]

Hi all,

Sorry about all the troubles and our inaccurate documentation. Well, it actually is accurate but we’re working out some bugs in the code that is preventing the correct method for overriding the CSS (as indicated in the guide) from working. That fix should be coming out in the next release soon, but for now as other have instructed in this thread the best solution is to:

1. Add CSS to your theme’s style.css file using proper selectors in order to override and have a higher specification than our styles.

2. Use the methods discussed by Andy in this thread: https://tri.be/support/forums/topic/events-calendar-3-0-not-working-with-theme

I hope that helps and again I apologize for any frustration this has caused people. We’re fixing bugs as fast as we can!

Regards,
Jonah

[karen]

ok.. I finally found what I needed by searching all the CSS files. You are going to take the tribe-events-full.css from the The Events Calendar plugin/resources directory and put it in the theme/tribe-events folder that you create. Rename the file: tribe-events.css .. Then using an element inspector and trial and error, you can change the settings. Hope this helps someone.

[Cynthia Lockley]

Thanks @karen that helps a lot. I’ve been looking in the wrong places for the tribe-events-full.css file. I wish there was a directory in the “guide” that showed us the paths for these files they refer to. Tribe is familiar with their files so they know where they are but the rest of us have to do a lot of searching to find them. I feel like I’m on a scavenger hunt.

[Cynthia Lockley]

Oops! I just discovered that there is a tribe-events-full.css in the the-events-calendar/resources/ folder and a tribe-events-full.css in the events-calendar-pro/resources/ folder. Which one of these are we supposed to move to the tribe-events folder we create in our child theme to edit?
I am guessing I need to move all views I want to edit from both plugins into the tribe-events folder I create, and then move all the css in the resources folders of both plugins. But some have the same name–how do I know I am editing the correct one? Or should there be a pro and nonpro folder in the theme’s tribe-events folder and we edit both?

[Andy Fragen]

karen/Cynthia, why do you want to move a default css file to {YOUR_THEME}/tribe-events/ folder. What you should do is just create a new tribe-events.css file in this new folder and simply add your CSS overrides to it. You don’t need to override the entire file and I would guess that this is probably not a good idea in general as any changes that Modern Tribe makes to these defaults would then not be used. It also defeats the whole concept of cascading in CSS.

In almost every case, I would think best case usage would be to only make your specific changes to an override file. There’s no point in duplication. The benefit is that you really don’t need to know where the default css files are located. All you need is to figure out the selector that you wish to change.

Creating a {YOUR_THEME}/tribe-events/tribe-events.css file shouldn’t be sufficiently different than putting any overrides in your theme’s style.css, it just serves to abstract the overrides in case you change themes later.

If there’s something specific you want to change perhaps we can help further.

[Jonah]

Andy is right on the money here, thanks for commenting Andy! Cynthia, please let us know if you have any questions about that approach.

Thanks,
Jonah

[karen]

Well, now.. there’s an idea.. Now, if I only knew what I was doing.. Might be too late for that approach. At some point I may be able to compare the original with the copied one and remove the duplicate entries. Thanks for that Andy!

[Andy Fragen]

You’re welcome Karen. It’s in my nature to apply the KISS principle to most things.

[Cynthia Lockley]

@Jonah and @Andy, the approach sounds good. The hard part is “All you need is to figure out the selector that you wish to change.”

1- I’ve tried looking at the templates and the various CSS files–some of which are readable and some of which have the CSS all smushed together on Line 1 trying to figure out what rules the large space between the calendar navigation bar and the bottom of my header. It is about an inch of white space and I’d like to reduce it down to 2 lines. See http://events.stcwdc.org/events/ See also http://events.stcwdc.org/event/stc-wdcb-summer-vision-day-meeting/ (that page has a double posting problem which is being handled in another thread). Except for the Events Calendar pages, my other pages start nicely at the top. I’ve been able to find PHP code in the Events views templates that says do stuff before the calendar but there is no CSS class associated with this for me to tell it not to add so much white space. Where is that?

2- Then I’d like to find what is causing the sidebar to sink below the content. I made a template for the /events page similar to the one I did for the /archives page at http://events.stcwdc.org/archives/ to bring the sidebar up to the top but something in Events Calendar is ignoring it.

3- The last thing I’d like to find, which will probably be easier but I haven’t started looking yet, is to be able to change the teal green used for the iCal button and the current date in the calendar to a color that works better with my site. http://events.stcwdc.org/

Those are the only three fixes I want to make. The first two are the hard ones to figure out what CSS class or template needs to be changed. (Neil is trying to figure out why I’m getting double posting of the events posts in two different formats on the same page.)

[Andy Fragen]

@Cynthia,

Try the following in {YOUR_THEME}/tribe-events/tribe-events.css

You might also want to download and activate The Events Calendar User CSS plugin.

1. `.singular .hentry { padding: 0; }`

3. `a.tribe-events-ical, a.tribe-events-gcal { background-color: red; }` obviously pick a color of your choosing instead of red.
`.tribe-events-calendar td.tribe-events-present div[id*=”tribe-events-daynum-“], .tribe-events-calendar td.tribe-events-present div[id*=”tribe-events-daynum-“] > a, #tribe_events_filters_wrapper input[type=”submit”], .tribe-events-button, .tribe-events-button.tribe-inactive, .tribe-events-button:hover, .tribe-events-button.tribe-active:hover { background-color: #21759b; }`
Again, change to your color of choice.

Not so sure I can help with #2, though did you put the template in {YOUR_THEME}/tribe-events/ ?

[Andy Fragen]

Sorry, backticks are code markers and shouldn’t be copied.

[Cynthia Lockley]

@Andy Thank you! That’s some fancy CSS–I’d have never figured that out myself. Not familiar with the id*, the square brackets and the angle bracket being in the CSS–I guess that is CSS3? I know CSS2 but I think I have to start studying CSS3.
I have the colors fixed for the calendar now thanks to you. Do you have a suggestion for how to get the text of the event in the calendar table cell to fit better in the box (needs more padding on the left)? It is OK on the /events/ page but it is too far to the left in the calendar view on the home page. (http://events.stcwdc.org/) I tried
`tribe-events-calendar td.tribe-events-present div[id*=”tribe-events-daynum-“] > a:link { padding:0.5em;}` but nothing happens. If I add margin:0.5em it just moves the top line over 0.5em. That also affected the text in the /events/ calendar, which was OK before. I don’t want it to affect every calendar; just that one but they all have the same CSS classes.

I tried moving my events template into the tribe-events folder and it is still ignored.

[Author]

Posts