WordPress.org

Ready to get started?Download WordPress

Forums

Event Organiser
Serious layout issues with Twentythirteen theme (12 posts)

  1. sparky672
    Member
    Posted 11 months ago #

    I'm using the stock Twentythirteen theme with no modifications and the latest version of Event Organiser, again without any modifications.

    Everything looked fine until I activated the WordPress sidebar.

    Check out this screenshot of the Single Event page, showing how the content is squished really bad...

    http://oi41.tinypic.com/t99jcp.jpg

    It's the same in Chrome, Firefox and Safari. Have not checked in IE.

    http://wordpress.org/plugins/event-organiser/

  2. Stephen Harris
    Member
    Plugin Author

    Posted 11 months ago #

    Hi,

    The default templates were based on the TwentyEleven/Twelve and haven't been tested with TwentyThirteen. In any case, one size never fits all...

    However, its very easy to customise the templates, simply copy them into your theme and edit them. More details on this can be found here: http://wp-event-organiser.com/documentation/editing-the-templates/

  3. sparky672
    Member
    Posted 11 months ago #

    I just figured that since twentythirteen was so new, you'd like to know.

    Meanwhile, I'll just edit the templates.

  4. Stephen Harris
    Member
    Plugin Author

    Posted 11 months ago #

    Thanks for the heads up :). I may bundle twentythirteen templates with the plug-in - or otherwise try to ensure the default templates play nice.

  5. sparky672
    Member
    Posted 11 months ago #

    In order for me to fix this, I simply edited the templates so that the core content ended up inside the same set of HTML containers, using the same class name(s), as you'd have on the standard WordPress static "page" in Twentythirteen. If I remember correctly, that meant a couple minor changes, like updating the class name on a div or two and adding an <article> wrapper. The layout then fell into place naturally.

    Isn't there a way you can leverage the default HTML structure of whatever theme and simply insert your content, as if it was just another posting, without having to worry about manually duplicating all those outer div containers and their assigned classes?

    As far as the reason why the content was so squished as shown in my OP: The normal padding that is added to the content area to accommodate the widget sidebar was applied twice; once to the content area as it should, and again to the inner content area, because the HTML was missing an <article> container which would have blocked that CSS rule from also being applied to the inside content.

  6. sparky672
    Member
    Posted 11 months ago #

    For the single-event.php template, changes are as follows...

    <div id="primary">
    	<div id="content" role="main">

    into this...

    <div id="primary" class="content-area">
    	<div id="content" class="site-content" role="main">

    and this...

    <?php get_footer(); ?>

    into this...

    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

    I'll post each template's changes separately...

  7. sparky672
    Member
    Posted 11 months ago #

    For the archive-event.php template...

    This...

    <div id="primary" class="site-content">
    	<div id="content" role="main">
    		<!-- Page header-->
    		<header class="page-header">
    		        <h1 class="page-title">
    			    ...
    			</h1>
    		</header>

    into this...

    <div id="primary" class="content-area">
    	<div id="content" class="site-content" role="main">
    		<article class="page type-page status-publish hentry">
    			<!-- Page header-->
    			<header class="entry-header">
    			        <h1 class="entry-title">
    				    ...
    				</h1>
    			</header>
    		</article>
  8. Stephen Harris
    Member
    Plugin Author

    Posted 11 months ago #

    Isn't there a way you can leverage the default HTML structure of whatever theme and simply insert your content, as if it was just another posting, without having to worry about manually duplicating all those outer div containers and their assigned classes?

    Unfortunately not. For the single event pages, if the theme doesn't have a single-event.phptemplate it reverts to single.php and appends the content. But for the other templates pages, its not as simple and the methods I have looked at are prone to error, or stomp all over the theme to make it look nice. While that may be fine for some users, as a developer I don't like it when plug-ins do that - and prefer to have default templates which can be quickly copied across to the theme an edited.

    In most cases it simply a case of altering the HTML structure or class names. (As it seems with TwentyThirteen).

    Thank you for posting these changes!

  9. sparky672
    Member
    Posted 11 months ago #

    For event-meta-event-single.php template...

    this...

    <div class="entry-meta eventorganiser-event-meta">

    into this...

    <div class="eventorganiser-event-meta">
  10. sparky672
    Member
    Posted 11 months ago #

    For the taxonomy-event-venue.php template...

    this...

    <div id="primary" class="site-content">
    	<div id="content" role="main">
    
    	<header class="page-header">
    		...
    		<h1 class="page-title">...</h1>
                    ...
    	</header><!-- end header -->

    into this...

    <div id="primary" class="content-area">
    	<div id="content" class="site-content" role="main">
    
    	<article class="page type-page status-publish hentry">
    
    		<header class="entry-header">
    			...
    			<h1 class="entry-title">...</h1>
    		        ...
    		</header><!-- end header -->
    	</article>
  11. sparky672
    Member
    Posted 11 months ago #

    Those are the only four templates I'm using at this time. Hope it helps.

  12. volresource
    Member
    Posted 9 months ago #

    Thanks very much for this sparky672. I'm using Coraline theme (left hand sidebar, plus left and right sidebars on probable 2nd website) and needed a quick pointer of what should be tweaked. In this case, changing id="primary" to id="content-container" seems to be the ticket - looks fine after a quick test (changed archive-event, taxonomy-event-x, single-event).

    Would probably have got there by myself eventually, but a worked example does help!

Reply

You must log in to post.

About this Plugin

About this Topic