Themer’s Guide has no CSS info or instructions

[Robin]

3.0 seems to have a very different structure, with lots of css files. I need to do a bit of styling for my theme and it would help greatly if the themer’s guide gave instructions on the best practices for setting up css files. Should I add the css to my custom theme css file? or does a new css file go in its own folder? What should the file be called?

[karen]

There are some vague instructions on putting a tribe-event.css in the theme/tribe-events/pro folder. However, all the classes are new, so I have yet to figure out which ones to change to get the desired results. Hope someone comes to my rescue. ..

[Robin]

I just put a “tribe-events” folder in my theme folder. Inside it, I put some very simple custom CSS and titled the file “tribe-events.css”. Just to start small, I changed the line height and alignment of the .tribe-events-page-title.
Doing so removed and or changed the styling of the rest of the content. This doesn’t seem to be the way to go.
Please tell me if there is another way I’m supposed to go about changing css. thanks very much.

[Leah]

Hi there,

I’m sorry we haven’t been in touch with a reply here. We’ve been inundated with support requests as more people update to 3.0, so we are a little behind our usual 24-hour window for responses. We do not do support over the weekend, but we will be in touch here with a more substantial reply as soon as possible.

In the meantime, some of these tips might be helpful:
* Double check your Plugin page for updates. We’ve just released our latest maintenance release. As of 7/12, the most current versions are The Events Calendar 3.0.1 and Events Calendar PRO 3.0.2.
* If you’re experiencing a problem with links, try resetting and resaving your permalinks.
* If the issue is with settings, try resaving your settings page- even if you haven’t changed anything.
* Having trouble with a customization done in 2.x? Be sure to check out our Themer’s Guide and documentation.

You might also search the forums to see if someone else has a similar issue and has found a solution. Finally, if the problem you’re experiencing is a serious problem, you may choose to downgrade back to 2.0.11.

Thank you for your patience and support.

Best,
Leah
and the Modern Tribe Support Team

[Cynthia Lockley]

@Robin, A few more hints have been added to the Themer’s Guide. Specifically near the top in section 2. “Locate the files you wish to edit.” Perhaps if you can find the body class for the file you want to edit, it will make the CSS change just to that element and not change everything else; I’m hoping. But, I agree, the guide needs a lot more guidance about the CSS classes and how to modify specific individual elements such as a widget or the title of a widget or view.

[Robin]

Thanks Cynthia, I had seen those hints, apparently added sometime this afternoon. I looked for the body class, and pasted these changes into the tribe-events.css, which is in a folder named “tribe-events” in my theme folder. I wanted to just remove the filter box, and style the headline.
http://pastebin.com/fugpu3qS
Here is a screenshot of “before” the changes were made. https://www.dropbox.com/s/zxpz352p32vts9x/Screen%20Shot_3.0_nostyle.png
I have “Tribe Events Styles” selected in my Basic Template Settings, btw.

This screenshot shows the “After” state:
https://www.dropbox.com/s/77tul242oizhpn0/Screen%20Shot_3.0_style.png
changes that were inexplicably made in addition to those I spec’d in the css…note the content wrapper no longer has its original styles (no max width, no padding, etc.), the date and address meta text has changed styles to bigger and bolder, and the month has lost its styling as well.

I’d like to point out the the .css file referenced, tribe-events-full.min.css, is unformatted–such that all styles appear on Line 1…very hard to decipher anything when you’re trying to pinpoint a particular style.

[Cynthia Lockley]

Wow–that is not encouraging. Lots of changes happened. I looked at the CSS to try to figure out what I needed to try to work on for my restyle need and saw the all-in-one-line code and got very discouraged. I looked at all 18 CSS files and they are all formatted to be on one line.

[Cynthia Lockley]

This reply is private.

[ISANS]

Hi ladies. I’ve had success just adding the styles I want to change to my theme’s css file.

[twentwatchers]

Having some issues here as well..
The instructions in the css files when followed, do not result in any overwritten css files.
I am using a widget fixed in my theme however; perhaps this is why the plugin breaks?

[dostie]

Glad I’m not alone here. After a bit of sleuthing using Chrome’s Inspect Element fucntion and looking at the various CSS files that indicated the controlling DIV or CLASS definitions I was actually more confused than ever. There’s an awful lot of variations and CSS files to account for.

Let me get to my main request. For the moment I can live with existing styling of fonts and colors. However, the calendar does not fit in the post space I have defined on my test site (http://www.demo.earnyourturns.com). It pushes the R sidebar content down below the post content (event content) space.

I see some really weird looking CSS as follows (from resources/tribe-events-full.min.css):

@media only screen and (max-width:767px){#tribe-events-header .tribe-events-sub-nav .tribe-events-nav-next,#tribe-events-header .tribe-events-sub-nav .tribe-events-nav-previous,#tribe-events-footer .tribe-events-sub-nav .tribe-events-nav-next,#tribe-events-footer .tribe-events-sub-nav .tribe-events-nav-previous{display:block;width:50%;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.tribe-events-sub-nav li a{display:block;padding:10px 15px;background:#666;color:#fff;white-space:normal}.tribe-events-sub-nav .tribe-events-nav-previous,.tribe-events-sub-nav .tribe-events-nav-left{padding:0 1px}.tribe-events-sub-nav .tribe-events-nav-next,.tribe-events-sub-nav .tribe-events-nav-right{padding:0 0 0 1px}}
suggesting that the width of the calendar, or list, or single event is variable up to 767px. However, I just want to make sure it fits inside a width of 550px plus 40px in padding (20px L, 20px R) so that it can’t push either of my sidebars out of position.

I also started to create a tribe-events.css file in my Child Theme folder per your Themer instructions…(/child-theme/tribe-events/tribe-events.css as follows:

/* Loop ————————————-
modified from tribe-events-theme.css */
.events-list .tribe-events-loop,
.tribe-events-day .tribe-events-loop,
.single-tribe_venue .tribe-events-loop,
.single-tribe_organizer .tribe-events-loop {
max-width: 560px;
margin: 0 auto;
}

I just want to know what will control the width of any display of event calendar information in the post area where it appears.

While I have your attention…some of your CSS files under /resources are nicely laid out – in others the code is just squished together. Can you make them all easier to read? Pretty please?

[smallmammothdesign]

I’ve sent an email about this as well, but I read that you check the forums more frequently than email, so let me post here as well: am also having trouble getting CSS overwrites to take, so count me as another person who urgently needs an answer to this thread! Following what the documentation suggests simply does not work, nor does everything else I could think of trying.

Additionally, I’d be grateful if you could point me in the direction of a working tutorial on how to add thumbnails to the events list widget pro. I’ve found numerous threads/tutorials on this topic, and various people claiming they do/do not work for the new version, and am completely lost as to which set of directions I should be following.

Thanks.

[twentwatchers]

For now I’m just overwriting the styles in my theme’s CSS;

To give those rules more weight (ensuring overwriting) just place something like #content before the selector. (If the thing to be styled is in the content div, which it is most of the time ;))

[smallmammothdesign]

Thanks so much for the advice twentwatchers, but I’ve tried that as well and it didn’t work. Thought your #content might do the trick, but no luck.

Specifically, right now I’m just trying to style the events list widget, not the events page. I’ve got the styles set to full since it includes some basic styling for the list widget for us to work off of. Am therefore making changes to tribe-events-pro-full.css in the events-calendar-pro/resources folder, but nothing I do has any effect whatsoever. Honestly, I’m at my wits’ end — it’s like talking to a wall. I’ve styled countless themes and plugins and never experienced anything like this.

[smallmammothdesign]

So I thought, silly me, of course it’s calling the minified CSS. Tried renaming the full to min just to check real quick, and that doesn’t work either. (Slowly bangs head against wall).

[Author]

Posts