[Plugin: The Events Calendar] Does not look great..

Anxiously awaiting a solution to this as well.

isocreative

(@isocreative)

In the the-events-calendar/views/ directory, you’ll want to edit the list.php and single.php files.

Towards the top of the page, find this code
<div id=”tec-content”

and add this above it (basically wrapping the tec-content div in your content div).
<div id=”content”>

then find the closing </div> tag towards the bottom of the page, and add another closing </div> tag.

This should apply your css style for content.

isocreative

(@isocreative)

Added note: Depending on the css of your theme, you may need to wrap the content div in the main div to get all the css styling that you expect to see on other pages.

Replace this
<div id=”tec-content” class=”upcoming”>

With this
<div id=”main” class=”clear”>
<div id=”content”>
<div id=”tec-content” class=”upcoming”>

And be sure to close the two additional divs at the bottom
</div></div></div>

Thread Starter

stinaq

(@stinaq)

Ok!
So this worked somewhat great on the single.php. It looks a lot better, how ever, there is a white part below the event that shouldn’t be there..

But, when I tried to do the exact same thing on the list.php-page, the results are extremely strange…
When I paste the same thing there, the entire page goes blank when I upload it. There not even andy code I can look at when i try. So I tried doing other changes to see where it went wrong, and it seems that the page is moody. Sometimes when I write someting, it shows it nicely, and sometimes, when I write the exact same thing, it goes blank again. I have no idea what to do!!

For exampel, i tried styling the content “by hand” since i couldn’t add a div with a id without it going blank on me. And when i set the border-color to #dadada it no longer works, but #000 and “silver” workes fine.

Arghh! Can someone help me with this? I’m at a complete loss!

leofromrio

(@leofromrio)

I am having the exact same problem on a custom Thesis theme.
The layout is completely screwed up and unfortunately the fix doesn’t work.
Does anyone have any ideas?
http://janisfroelich.com/press/

isocreative

(@isocreative)

If you can post a link to the page where the style is breaking, I might be able to come up with a fix for you.

dandigital

(@dandigital)

This problem with Thesis has been cropping up on loads of posts.

I have done some work on a solution for Thesis that works on my site
here
but it is not 100% checked so please use with caution.

The problem seems to be how Thesis uses functions to construct the page. These don’t work with The Events Calendar and you need to pick them apart to get it to look right.

First, as mentioned before and on The Events Calendar pages, make a new directory ‘events’ in wp-content/themes/thesis_17.

Copy over the following files from within the plugin folder (the-events-calendar/views/):

* gridview.php
* list.php
* single.php
* events-list-load-widget-display.php

Now replace the entire contents of gridview.php with

<?php

	global $spEvents;
	global $thesis_design;

	$spEvents->loadDomainStylesScripts();

	echo apply_filters('thesis_doctype', '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">') . "\n";
?>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<?php
	thesis_head::build();

	echo "<body" . thesis_body_classes() . ">\n"; #filter
	thesis_hook_before_html(); #hook

	if ($thesis_design->layout['framework'] == 'page'){
	echo "<div id=\"container\">\n";
	echo "<div id=\"page\">\n";
	}
	elseif ($thesis_design->layout['framework'] == 'full-width'){
	echo "<div id=\"header_area\" class=\"full_width\">\n";
	echo "<div class=\"page\">\n";
	}

	thesis_header_area();

	if ($thesis_design->layout['framework'] == 'full-width'){
	echo "</div>\n";
	echo "</div>\n";

		thesis_hook_before_content_area(); #hook

	echo "<div id=\"content_area\" class=\"full_width\">\n";
	echo "<div class=\"page\">\n";
	}
?>	

	<div id="tec-content" class="grid">

		<div id='tec-events-calendar-header' class="clearfix">

			<h2 class="tec-cal-title"><?php _e('Calendar of Events', $spEvents->pluginDomain) ?></h2>

			<span class='tec-month-nav'>

				<span class='tec-prev-month'>

					<a href='<?php echo events_get_previous_month_link(); ?>'>

					← <?php echo events_get_previous_month_text(); ?>

					</a>

				</span>

				<?php get_jump_to_date_calendar( "tec-" ); ?>

				<span class='tec-next-month'>

					<a href='<?php echo events_get_next_month_link(); ?>'>				

					<?php echo events_get_next_month_text(); ?> → 

					</a>

				</span>

			</span>

			<span class='tec-calendar-buttons'> 

				<a class='tec-button-off' href='<?php echo events_get_listview_link(); ?>'><?php _e('Event List', $spEvents->pluginDomain)?></a>

				<a class='tec-button-on' href='<?php echo events_get_gridview_link(); ?>'><?php _e('Calendar', $spEvents->pluginDomain)?></a>

			</span>

		</div><!-- tec-events-calendar-header -->

		<a class="ical" href="<?php bloginfo('home'); ?>/?ical"><?php _e('iCal Import', $spEvents->pluginDomain) ?></a>

		<?php event_grid_view( ); // See the plugins/the-events-calendar/views/table.php template for customization ?>	

	</div>

<?php

	if ($thesis_design->layout['framework'] == 'full-width'){
	echo "</div>\n";
	echo "</div>\n";

		thesis_hook_after_content_area(); #hook

	echo "<div id=\"footer_area\" class=\"full_width\">\n";
	echo "<div class=\"page\">\n";
	}

	thesis_footer_area();

	echo "</div>\n";
	echo "</div>\n";

	thesis_ie_clear();
	thesis_javascript::output_scripts();
	thesis_hook_after_html(); #hook
	echo "</body>\n</html>";

Replace the contents of single.php with

<?php

	global $spEvents;
	global $thesis_design;

	$spEvents->loadDomainStylesScripts();

	echo apply_filters('thesis_doctype', '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">') . "\n";
?>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<?php
	thesis_head::build();

	echo "<body" . thesis_body_classes() . ">\n"; #filter
	thesis_hook_before_html(); #hook

	if ($thesis_design->layout['framework'] == 'page'){
	echo "<div id=\"container\">\n";
	echo "<div id=\"page\">\n";
	}
	elseif ($thesis_design->layout['framework'] == 'full-width'){
	echo "<div id=\"header_area\" class=\"full_width\">\n";
	echo "<div class=\"page\">\n";
	}

	thesis_header_area();

	if ($thesis_design->layout['framework'] == 'full-width'){
	echo "</div>\n";
	echo "</div>\n";

		thesis_hook_before_content_area(); #hook

	echo "<div id=\"content_area\" class=\"full_width\">\n";
	echo "<div class=\"page\">\n";
	}
?>	

	<div id="tec-content" class="tec-event widecolumn">

	<?php the_post(); global $post; ?>

			<div id="post-<?php the_ID() ?>" <?php post_class() ?>>

				<span class="back"><a href="<?php echo events_get_events_link(); ?>"><?php _e('&laquo; Back to Events', $spEvents->pluginDomain); ?></a></span>

				<h2 class="entry-title"><?php the_title() ?></h2>

				<?php if (the_event_end_date() > time()  ) { ?><small><?php  _e('This event has passed.', $spEvents->pluginDomain) ?></small> <?php } ?>

				<div id="tec-event-meta">

					<dl class="column">

						<dt><?php _e('Start:', $spEvents->pluginDomain) ?></dt> 

							<dd><?php echo the_event_start_date(); ?></dd>

						<?php if (the_event_start_date() !== the_event_end_date() ) { ?>

							<dt><?php _e('End:', $spEvents->pluginDomain) ?></dt>

							<dd><?php echo the_event_end_date();  ?></dd>						

						<?php } ?>

						<?php if ( the_event_cost() ) : ?>

							<dt><?php _e('Cost:', $spEvents->pluginDomain) ?></dt>

							<dd><?php echo the_event_cost(); ?></dd>

						<?php endif; ?>

					</dl>

					<dl class="column">

						<?php if(the_event_venue()) : ?>

						<dt><?php _e('Venue:', $spEvents->pluginDomain) ?></dt> 

							<dd><?php echo the_event_venue(); ?></dd>

						<?php endif; ?>

						<?php if(the_event_phone()) : ?>

						<dt><?php _e('Phone:', $spEvents->pluginDomain) ?></dt> 

							<dd><?php echo the_event_phone(); ?></dd>

						<?php endif; ?>

						<?php if( tec_address_exists( $post->ID ) ) : ?>

						<dt>

							<?php _e('Address:', $spEvents->pluginDomain) ?><br />

							<?php if( get_post_meta( $post->ID, '_EventShowMapLink', true ) == 'true' ) : ?>

								<a class="gmap" href="<?php event_google_map_link() ?>" title="<?php _e('Click to view a Google Map', $spEvents->pluginDomain); ?>" target="_blank"><?php _e('Google Map', $spEvents->pluginDomain ); ?></a>

							<?php endif; ?>

						</dt>

							<dd>

							<?php tec_event_address( $post->ID ); ?>

							</dd>

						<?php endif; ?>

					</dl>

				</div>

				<?php if( get_post_meta( $post->ID, '_EventShowMap', true ) == 'true' ) : ?>

					<?php if( tec_address_exists( $post->ID ) ) event_google_map_embed(); ?>

				<?php endif; ?>

				<div class="entry">

					<?php the_content() ?>	

					<?php if (function_exists('the_event_ticket_form')) { the_event_ticket_form(); } ?>		

				</div>

				<?php edit_post_link('Edit', '<span class="edit-link">', '</span>'); ?>

			</div><!-- post -->

		<?php if(eventsGetOptionValue('showComments','no') == 'yes'){ comments_template();} ?>

	</div><!-- tec-content -->

<?php

	if ($thesis_design->layout['framework'] == 'full-width'){
	echo "</div>\n";
	echo "</div>\n";

		thesis_hook_after_content_area(); #hook

	echo "<div id=\"footer_area\" class=\"full_width\">\n";
	echo "<div class=\"page\">\n";
	}

	thesis_footer_area();

	echo "</div>\n";
	echo "</div>\n";

	thesis_ie_clear();
	thesis_javascript::output_scripts();
	thesis_hook_after_html(); #hook
	echo "</body>\n</html>";

and replace all of list.php with

<?php

	global $spEvents;
	global $thesis_design;

	$spEvents->loadDomainStylesScripts();

	echo apply_filters('thesis_doctype', '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">') . "\n";
?>

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<?php
	thesis_head::build();

	echo "<body" . thesis_body_classes() . ">\n"; #filter
	thesis_hook_before_html(); #hook

	if ($thesis_design->layout['framework'] == 'page'){
	echo "<div id=\"container\">\n";
	echo "<div id=\"page\">\n";
	}
	elseif ($thesis_design->layout['framework'] == 'full-width'){
	echo "<div id=\"header_area\" class=\"full_width\">\n";
	echo "<div class=\"page\">\n";
	}

	thesis_header_area();

	if ($thesis_design->layout['framework'] == 'full-width'){
	echo "</div>\n";
	echo "</div>\n";

		thesis_hook_before_content_area(); #hook

	echo "<div id=\"content_area\" class=\"full_width\">\n";
	echo "<div class=\"page\">\n";
	}
?>

	<div id="tec-content" class="upcoming">

		<div id='tec-events-calendar-header' class="clearfix">

			<h2 class="tec-cal-title"><?php _e('Calendar of Events', $spEvents->pluginDomain) ?></h2>

		<span class='tec-calendar-buttons'> 

			<a class='tec-button-on' href='<?php echo events_get_listview_link(); ?>'><?php _e('Event List', $spEvents->pluginDomain)?></a>

			<a class='tec-button-off' href='<?php echo events_get_gridview_link(); ?>'><?php _e('Calendar', $spEvents->pluginDomain)?></a>

		</span>

		</div><!--#tec-events-calendar-header-->

		<a class="ical" href="<?php bloginfo('home'); ?>/?ical"><?php _e('iCal Import', $spEvents->pluginDomain) ?></a>

		<div id="tec-events-loop" class="tec-events post-list clearfix">

		<?php while ( have_posts() ) : the_post(); ?>

				<div id="post-<?php the_ID() ?>" class="tec-event post clearfix<?php echo $alt ?>">

							    <div style="clear:both;"></div>

							        <?php if ( is_new_event_day() ) : ?>

					<h4 class="event-day"><?php echo the_event_start_date( null, false ); ?></h4>

							        <?php endif; ?>

						<?php the_title('<h2 class="entry-title"><a href="' . get_permalink() . '" title="' . the_title_attribute('echo=0') . '" rel="bookmark">', '</a></h2>'); ?>

					<div class="entry-content tec-event-entry">

						<?php the_excerpt() ?>

					</div> <!-- End tec-event-entry -->

					<div class="tec-event-list-meta">

		              <table cellspacing="0">

		                  <tr>

		                    <td class="tec-event-meta-desc"><?php _e('Start:', $spEvents->pluginDomain) ?></td>

		                    <td class="tec-event-meta-value"><?php echo the_event_start_date(); ?></td>

		                  </tr>

		                  <tr>

		                    <td class="tec-event-meta-desc"><?php _e('End:', $spEvents->pluginDomain) ?></td>

		                    <td class="tec-event-meta-value"><?php echo the_event_end_date(); ?></td>

		                  </tr>

		                  <?php

		                    $venue = the_event_venue();

		                    if ( !empty( $venue ) ) :

		                  ?>

		                  <tr>

		                    <td class="tec-event-meta-desc"><?php _e('Venue:', $spEvents->pluginDomain) ?></td>

		                    <td class="tec-event-meta-value"><?php echo $venue; ?></td>

		                  </tr>

		                  <?php endif; ?>

		                  <?php

		                    $phone = the_event_phone();

		                    if ( !empty( $phone ) ) :

		                  ?>

		                  <tr>

		                    <td class="tec-event-meta-desc"><?php _e('Phone:', $spEvents->pluginDomain) ?></td>

		                    <td class="tec-event-meta-value"><?php echo $phone; ?></td>

		                  </tr>

		                  <?php endif; ?>

		                  <?php if (tec_address_exists( $post->ID ) ) : ?>

		                  <tr>

							<td class="tec-event-meta-desc"><?php _e('Address:', $spEvents->pluginDomain); ?><br />

							<?php if( get_post_meta( $post->ID, '_EventShowMapLink', true ) == 'true' ) : ?>

								<a class="gmap" href="<?php event_google_map_link(); ?>" title="Click to view a Google Map" target="_blank"><?php _e('Google Map', $spEvents->pluginDomain ); ?></a>

							<?php endif; ?></td>

							<td class="tec-event-meta-value"><?php tec_event_address( $post->ID ); ?></td>

		                  </tr>

		                  <?php endif; ?>

		                  <?php

		                    $cost = the_event_cost();

		                    if ( !empty( $cost ) ) :

		                  ?>

	 		              <tr>

							<td class="tec-event-meta-desc"><?php _e('Cost:', $spEvents->pluginDomain) ?></td>

							<td class="tec-event-meta-value"><?php echo $cost; ?></td>

						 </tr>

		                  <?php endif; ?>

		              </table>

					</div>

					<div style="clear:both;"></div>

				</div> <!-- End post -->

				<div class="tec-events-list content_footer"></div>

	<?php $alt = ( empty( $alt ) ) ? ' alt' : '';?> 

		<?php endwhile; // posts ?>

		</div><!-- #tec-events-loop -->

		<div class="tec-nav" id="tec-nav-below">

			<div class="tec-nav-previous"><?php 

			// Display Previous Page Navigation

			if( events_displaying_upcoming() && get_previous_posts_link( ) ) : ?>

				<?php previous_posts_link( '<span>&laquo; Previous Events</span>' ); ?>

			<?php elseif( events_displaying_upcoming() && !get_previous_posts_link( ) ) : ?>

				<a href='<?php echo events_get_past_link(); ?>'><span><?php _e('&laquo; Previous Events', $spEvents->pluginDomain ); ?></span></a>

			<?php elseif( events_displaying_past() && get_next_posts_link( ) ) : ?>

				<?php next_posts_link( '<span>&laquo; Previous Events</span>' ); ?>

			<?php endif; ?>

			</div>

			<div class="tec-nav-next"><?php

			// Display Next Page Navigation

			if( events_displaying_upcoming() && get_next_posts_link( ) ) : ?>

				<?php next_posts_link( '<span>Next Events &raquo;</span>' ); ?>

			<?php elseif( events_displaying_past() && get_previous_posts_link( ) ) : ?>

				<?php previous_posts_link( '<span>Next Events &raquo;</span>' ); // a little confusing but in 'past view' to see newer events you want the previous page ?>

			<?php elseif( events_displaying_past() && !get_previous_posts_link( ) ) : ?>

				<a href='<?php echo events_get_upcoming_link(); ?>'><span><?php _e('Next Events &raquo;', $spEvents->pluginDomain); ?></span></a>

			<?php endif; ?>

			</div>

		</div>

	</div>

<?php

	if ($thesis_design->layout['framework'] == 'full-width'){
	echo "</div>\n";
	echo "</div>\n";

		thesis_hook_after_content_area(); #hook

	echo "<div id=\"footer_area\" class=\"full_width\">\n";
	echo "<div class=\"page\">\n";
	}

	thesis_footer_area();

	echo "</div>\n";
	echo "</div>\n";

	thesis_ie_clear();
	thesis_javascript::output_scripts();
	thesis_hook_after_html(); #hook
	echo "</body>\n</html>";

Voila!

Hope that helps. You may want to do lots more tidying up, but this should at least get it working.

If anyone else can work out why the drop down date picker in gridview gives a 404 I’d be very grateful!

Dan

(@kierenmccarthy)

Thanks for this Dan, I have been trying – and failing – for days to get this work.

Your fix works – mostly. It certainly allows me to use my theme.

BUT switching between list view and calendar view doesn’t work.

Both try to link to “/events/month” – which goes nowhere. I can see from your site that the List View link goes to “/category/events?eventDisplay=upcoming”.

I turned off nice URLs but the list view link wants to go to “/?post_type=sp_events&eventDisplay=month.

See here: http://gibc.biz/events/

Also the CSS is off on a particular event page – the type is tiny.

Example: http://gibc.biz/event/internet-politics-policy-2010/

I’m wondering if you made any subsequent code changes and/or if you an what may be going wrong in my case.

Any help appreciated.

Kieren

(@kierenmccarthy)

The problem appears to be that it’s not calling this function:

—
‘><?php _e(‘Event List’, $spEvents->pluginDomain)?>
—

(@kierenmccarthy)

<a class='tec-button-off' href='<?php echo events_get_listview_link(); ?>'><?php _e('Event List', $spEvents->pluginDomain)?></a>