Support

Home Forums Events Calendar Add-on Events Calendar Table template – problem with a narrow frame

Events Calendar Table template – problem with a narrow frame

Posted: October 13, 2014 at 12:45 pm


Angus Russell

October 13, 2014 at 12:45 pm

Hi,

I’m trying to solve this problem http://supersportsevents.me/testing-2/ whereby my usable page is obviously too narrow for the table.

Is there an easy way to solve this for someone with little coding experience?

Wp4.0 Event Espresso – 3.1.36.6.P not sure what version for the add-ons, but they’re the latest ones.

Thank you
Angus


Lorenzo Orlando Caum

  • Support Staff

October 13, 2014 at 1:47 pm

Hi Angus,

The template should adapt to the size of the area like this:

http://cl.ly/image/0n1v2v0f0o2m

Could you try updating the template shortcode so only a handful of events are shown so we can check into this further?

Try publishing two test events that occur within the next 30 days. Then update the shortcode to this:

[EVENT_CUSTOM_VIEW template_name=”calendar-table” max_days=”30″]


Lorenzo


Victor

October 13, 2014 at 2:16 pm

Looks like your Overall Rankings tables and Age Group Rankings tables are pushing your content off the edge.

If you lower your font size on those tables then the Event Calendar Table should fit within that area.

Another solution is removing the “Overflow: hidden;” from your main container. Any content spilling over will still be visible and not clipped.


Angus Russell

October 13, 2014 at 9:08 pm

Hi Lorenzo, that solved the problem temporarily but would be good not to be limited to 30 days. I tried 45 & 60 days but neither of these worked either.

Our entire events season here is only about 6 months, Oct-April, and entirely focused at w/e’s so quite important we can display more than a month ahead.

Would it difficult to widen our display area?

How can I reduce font size for event names, and control the information being displayed? This will permit me to take up less real estate and make it easier to scroll down.

The large gap between the organiser details and the event info is annoying too, and doesn’t appear in the event window.

I’d like to add the ical link to this template – I found this elsewhere in the forum will it do the trick, or is there more I need to do?

<?php echo apply_filters(‘filter_hook_espresso_display_ical’, (array)$event ); ?>

How important is the location of this within the plugin code?

I’ve some experience with html (a few years ago!), but a complete novice with php!

Thanks
Angus


Dean

October 14, 2014 at 2:04 am

Hi,

I’ll do my best to answer your questions, though the table was no longer showing on your site, so I do not have that for reference.

Would it difficult to widen our display area?

Yes and no. You would have two broad choices: use a full width template if your theme has one, but this will generally lose the sidebar navigation. Or change the CSS to make everything a bit wider.

The CSS should be relatively straight forward but as it uses a background image it may require additional work. I would suggest contacting your web developer for assistance with that.

How can I reduce font size for event names, and control the information being displayed? This will permit me to take up less real estate and make it easier to scroll down.

The short answer is: with CSS. Without seeing the table on your site, it’s hard to give more exact advice.

The large gap between the organiser details and the event info is annoying too, and doesn’t appear in the event window.

Again, without seeing the table on your site, it’s hard to give advice regarding this.

I’d like to add the ical link to this template – I found this elsewhere in the forum will it do the trick, or is there more I need to do?


How important is the location of this within the plugin code?

Yes, that should be fine, just make sure your Custom Templates addon and the Events Calendar Template are up to date.

Placement does matter. Firstly it defines where the ical icon will show and secondly if placed wrong it can break the PHP code.

Really you want it placed somewhere in the content of the description, so around line 137 (approx.!) of the templates index.php file – screenshot http://take.ms/GaajK


Angus Russell

October 14, 2014 at 2:49 am

Thanks Dean. Sorry, I moved the page since I posted last night 🙁 http://supersportsevents.me/

The 30 days fix made it usable so we’re running with it for now.

I’ve used Chrome’s inspect element tool, and found the CSS I need to access, but my research tells me I need an FTP to access the files, download, edit, and then reload them – correct?

The ical is 50/50 – I inserted the code and the plugin works, but no ical icon is showing.

I was able to use a parameter to change the “band/artist” to “race/event details”, but is there a parameter to change the “Tickets” to “Enter Event”?

Presumably to customise the register button I need to access the CSS too?

Thanks


Dean

October 14, 2014 at 7:07 am

Hi

I’ve used Chrome’s inspect element tool, and found the CSS I need to access, but my research tells me I need an FTP to access the files, download, edit, and then reload them – correct?

Yes and no, you can access them via Appearance > Editor or simply add new CSS via a plugin such as My Custom CSS. However it’s recommended to back the files up first so FTP or control panel access would be needed for that.

(if using the My Custom CSS, a backup isn’t needed as it doesn’t change anything as such).

Regarding the ical, without seeing the code (maybe put it on pastebin?) it’s hard to say, but it isn’t breaking things at least!

I was able to use a parameter to change the “band/artist” to “race/event details”, but is there a parameter to change the “Tickets” to “Enter Event”?

Currently there is no parameter for that.

Regarding the button image, you could possibly do it with CSS, but the easiest option would be to upload a new image to the plugin file called register-now.png (updates to the addon will over ride this though).


Angus Russell

October 14, 2014 at 9:02 am

When I look in Appearance – Editor the only CSS I see are under Styles:
Stylesheet
(style.css)
Visual Editor RTL Stylesheet
(editor-style-rtl.css)
Visual Editor Stylesheet
(editor-style.css)
RTL Stylesheet
(rtl.css)

I can copy the code from http://supersportsevents.me/wp-content/plugins/espresso-template-calendar-table/style.css?ver=4.0 and paste it in once edited. Presumably the plugin will create the correct heirarchy?

My Custom CSS was last updated 2 years and is not tested with WP4.0 whilst Simple Custom CSS was last updated 4 months ago and is also not tested – any recommendation/suggestion/preference?

iCal code – I used the snippet that I pasted here, and added it in as and where you suggested – nada! No biggie, least of my worries right now!

I’m using BackWPup which seems to work fine to dropbox except always has an issue on the manual run where it is unable to create a WP export file. Once I abort, or let it run its course, and re-run it’s fine – go figure!

To load a new image to the plugin file will require FTP access – correct?

Thanks


Lorenzo Orlando Caum

  • Support Staff

October 14, 2014 at 12:21 pm

Hi,

We recommend applying CSS customizations to a child theme or a plugin like My Custom CSS or Reaktiv CSS Builder. Both plugins are free and are available from the WordPress plugins directory.

We have not seen any recent reports of issues with these plugins that weren’t caused by another plugin so if you run into any issues, let us know.

Moving a new image into place will require an SFTP or FTP client. Filezilla and Cyberduck are both free options that are available for multiple platforms (e.g. Mac, Windows, Linux).

http://codex.wordpress.org/FTP_Clients


Lorenzo


Angus Russell

October 14, 2014 at 11:55 pm

Thanks for everyone’s assistance, I’m starting to get somewhere.

Using Simple CSS I got nowhere but maybe I’m not getting the start & finish code correct for a CSS. I edited it in Chrome so I could see what I was doing, then copied it into Simple CSS and updated it, but it made no changes. All I want to do is change the font size of the event name!

However, I’ve had more success editing the plugin in directly – changed “Tickets” to “Enter Event” and deleted some of the extraneous info that wasn’t wanted there by removing lines of code. Couple of false starts and deactivations, but at least coding is logical so doesn’t take long to compare with other lines and work out how it should be 🙂

I know this will change once I update a plugin, but they’re not major changes so no biggie to redo after an update.

As for the iCal code – managed to get the word “array” where I want the icon for the iCal link so I know I have it in the correct place, but not sure where to go next. Read the intro to the plugin and made some changes to the code, but obviously having never used php before I am at a loss 🙂

Here’s the snippet that refers to the day, date, month image in the left column http://supersportsevents.me/ with my line of code – <?php echo apply_filters(‘filter_hook_display_ical_espresso_custom_template_calendar_table’, (array)$event); ?> – added near the bottom.

<?php } else { ?>
<td class=”td-date-holder”><div class=”dater”>
<div class=”cal-day-title”><?php echo event_date_display($event->start_date, “l”); ?></div>
<div class=”cal-day-num”><?php echo event_date_display($event->start_date, “j”); ?></div>
<div><span><?php echo event_date_display($event->start_date, “M”); ?></span></div>
<?php echo apply_filters(‘filter_hook_display_ical_espresso_custom_template_calendar_table’, (array)$event); ?>
<?php } ?>
</div>
</td>

I love learning new stuff 🙂 Are there any good free guides online that will help me get my head around the basics?

Thank you


Dean

October 15, 2014 at 2:18 am

Hi,

Use

It’s different to the one you mentioned above and works for me, whereas yours just displays “array”.

The CSS might simply be a case where the site is cached in your browser or via a plugin, or the CSS rule may need an !important after it (e.g. body { color:red !important; } )

I know My Custom CSS is 2 years old, but it keeps on working (I use it daily), but any other similar plugin should work fine too.


Angus Russell

October 15, 2014 at 5:00 am

Dean, I added the extra code in because of this at the top of the plugin:
//The end of the action name (example: “action_hook_espresso_custom_template_”) should match the name of the template. In this example, the last part the action name is “calendar-table”,
add_action(‘action_hook_espresso_custom_template_calendar-table’,’espresso_custom_template_calendar_table’);

I’ve added your snippet only and now all I get is it showing in plain text on the webpage!

This is the section in total:
</div></td>
<?php } else { ?>
<td class=”td-date-holder”><div class=”dater”>
<div class=”cal-day-title”><?php echo event_date_display($event->start_date, “l”); ?></div>
<div class=”cal-day-num”><?php echo event_date_display($event->start_date, “j”); ?></div>
<div><span><?php echo event_date_display($event->start_date, “M”); ?></span></div>
< ?php echo apply_filters(‘filter_hook_espresso_display_ical’, (array)$event ); ?>
<?php } ?>
</div>
</td>

I figure I’ve pasted it incorrectly and ruined the code.

CSS is now sorted – huge thanks 🙂


Dean

October 15, 2014 at 5:09 am

OK, the info at the top refers to creating new templates not for this particular task.

The issue with it breaking is because of a typo see where it says < ?php (arrow then space, then ?php) remove the space.


Angus Russell

October 15, 2014 at 5:19 am

Now I’m back to it only saying “array” on the web page! Since I’ve sorted the CSS it fits better under price!

http://supersportsevents.me/

<p>
<?php _e(‘When:’, ‘event_espresso’); ?>
<?php echo event_date_display($event->start_date); ?><br />
<?php _e(‘Where:’, ‘event_espresso’); ?>
<?php echo stripslashes_deep($event->venue_name); ?><br />
<?php _e(‘Price: ‘, ‘event_espresso’); ?>
<?php echo $org_options[‘currency_symbol’].$event->event_cost; ?><br />
<?php echo apply_filters(‘filter_hook_espresso_display_ical’, (array)$event ); ?></p>

Thanks


Dean

October 15, 2014 at 5:28 am

The main EE plugin, the Custom Templates addon plugin and the Event Calendar template addon plugin – are these all up to date?

If so can you copy and paste the entire index.php you are editing into a pastebin (pastebin.com) and I’ll take a look, as the above code should work.


Angus Russell

October 15, 2014 at 7:29 am

AFAIK, I only downloaded them in the last 203 days since I paid up for my licence 🙂

OK, pastebin done, public paste, never expiring, called “SSEME1 – 151014”

Thanks


Josh

  • Support Staff

October 15, 2014 at 12:05 pm

Hi Angus,

I’m not able to access your pastebin, maybe that’s a mistype?

It turns out that there’s a newer version of the Custom Templates add-on that’s available since 203 days ago.


Angus Russell

October 15, 2014 at 8:04 pm

Meant 2-3 days 🙂

http://pastebin.com/ic9bc5Dm

SSEME1 – 151014


Dean

October 16, 2014 at 5:48 am

Hi,

The code you pasted looks identical to the default index.php so it should work, however as the ical code wasn’t in there it’s hard to see what’s going wrong.

What I’ve done is pasted my version here http://pastebin.com/UVJxh4gP it contains 2 icals, both marked with a comment above them that says HERE. This is because I wasn’t sure where you wanted the ical to go.

Paste all that code into the template files index.php (repalcing the exisiting stuff, so maybe make a copy first) and see if it works.


Angus Russell

October 16, 2014 at 6:13 am

Not sure how that happened!

Anyway, your code works, bonus! – will compare with mine to see what happened. Job done 🙂

Many thanks


Dean

October 16, 2014 at 6:43 am

No problem, glad we got it resolved!

The support post ‘Events Calendar Table template – problem with a narrow frame’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso