issue with child theme in Calendar-Pro

[inkmouse2]

Sorry, I accidentally hit answered for this issue in a prior post. I tried using the a twentytwelve child theme as well as the twentytwelve parent theme and everything displayed correctly. The events calendar shows up correctly in the parent theme of twentyfourteen–just not the child theme I created for twentyfourteen. In the twentyfourteen theme the left sidebar obstructs the view of the left side of the calendar.
screenshot links:

View post on imgur.com

View post on imgur.com

View post on imgur.com

View post on imgur.com

[Gordon Banks]

Just want to second this problem with Calendar Pro and twenty fourteen child setup. My 2014 child theme has no tweaks but the calendar content is offset left into the sidebar.

[Barry]

Hi Gordon Banks – please feel free to monitor  this thread for ideas but if you need further help that is specific to your situation please do create a new thread of your own.

inkmouse2: thanks for those screenshots, but is there any way I could see a live example? Unfortunately the screenshots alone don’t give me any insight into what custom CSS might exist in the case of your child theme (or indeed what the HTML structure is), and given you stated it works correctly with Twenty Fourteen itself I’m guessing there must be some differences between that and your child theme?

[inkmouse2]

Hi Barry,
That is what has me perplexed. I have done no modifications to the theme at all through the child theme. The child theme is just an empty shell. Attached I have a screen shot of the style.css as it exists in my Twenty Fourteen child. I am currently working on the project through MAMP and haven’t set up my hosting yet. If there are any files I can email that would be of any help I would gladly do so.

View post on imgur.com

[Barry]

Ah, ok – I think I see what’s happening here.

It’s not possible to make our plugins work smoothly with every theme that’s out there – simply because the structure and CSS can vary tremendously. What we do for some very popular/default themes though is add some helper CSS – and that’s what we do in the case of Twenty Fourteen.

We can do this because we add an appropriate CSS class to the body element – tribe-theme-twentyfourteen – but this won’t be added if you use a child theme. What I’d recommend then is looking through our stylesheets for items like these:

.tribe-theme-twentyfourteen .entry-content .tribe-events-calendar th, .tribe-theme-twentyfourteen .tribe-events-calendar th {
	padding:3px;
	border-width:0;
}

.tribe-theme-twentyfourteen #tribe-events-pg-template {
	padding-left:0;
	padding-right:0;
}

.tribe-theme-twentyfourteen.events-archive .entry-content {
	width:90%;
}

And simply port them across, using an appropriate class instead of tribe-theme-twentyfourteen (you might simply swap it out for tribe-theme-parent-twentyfourteen). Does that help?

[Gordon Banks]

Barry thanx for researching this mystery of broken child themes. I understand the CSS fix. I think there are many child theme users using WordPress’ default themes (2014, 2013, 2012, 2011) and I would want my plugin’s content displaying properly when using default themes using an empty child theme. If ECP doesn’t display properly some of the default themes, document to developers that the theme will need some CSS tweaking to work with any child theme setup. The helper CSS for twentyfourteen was very hidden to me.

[inkmouse2]

This reply is private.

[Barry]

I think there are many child theme users using WordPress’ default themes (2014, 2013, 2012, 2011) and I would want my plugin’s content displaying properly when using default themes using an empty child theme.

That doesn’t sound unreasonable and I’ve logged an issue so we can investigate doing just that 🙂

I’m not exactly sure what you mean when you say “port across using an appropriate class” .Do you mean copy those particular style sheets into my child-theme? Relatively new with CSS so I need a bit of clarification on the procedure.

Copying them verbatim won’t help here – you’ll need to adjust them to work with your child theme. One way to do this is find all stylesheet rules targeting tribe-theme-twentyfourteen and replace that part of the selector with tribe-theme-parent-twentyfourteen. To take an example:

.tribe-theme-twentyfourteen.events-archive .entry-content {
	width:90%;
}

You would copy the above rule across to one of your own stylesheets but adjust it to look like:

.tribe-theme-parent-twentyfourteen.events-archive .entry-content {
	width:90%;
}

Or, if you look at the body classes, you will see that there is a specific class for your child theme. The exact name of this class will vary but based on your screenshots a good guess is:

.tribe-theme-twentyfourteen-child.events-archive .entry-content {
	width:90%;
}

Does that help?

[Barry]

…just to add, a great place for any custom rules like these is a tribe-events.css stylesheet – please see our Themer’s Guide for details on setting this up 🙂

[inkmouse2]

Thanks Barry!

[Barry]

My pleasure – and I’ve logged an issue so we can investigate making these styles transfer more seamlessly to child themes in the future – so thank you very much for raising our awareness of this.

I’ll go ahead and close this thread, but please don’t hesitate to create new threads as needed if we can help with anything else … and, last but not least, we’re always keen to hear your thoughts on The Events Calendar in general and if you wished to leave a review we’d be delighted to hear what you think 🙂

[Leah]

Hi there,

I just wanted to drop in and update you on the status of this issue. We are working on a fix, but we were not able to include it in our upcoming release (3.7). Correcting this problem is still important to us and we hope to have a fix done for a future maintenance release. We will do our best to keep you updated here on our progress. Thank you for your patience and understanding while we work on this.

Best,
Leah

[Author]

Posts