replace date time icon on event list shortcode with featured image

[Karrie]

I’m new to customizing template files, but I’m going to give it a shot, but I wanted to be clear on some things (please pardon my kindergarten-level experience here):

1. I must make a child theme to change or create template files for this plugin (so they do not get overwritten in theme updates)

2. How do I modify the layout of the event list shortcode display (particularly replacing the date/time icon, as noted in the title)

3. I have already created a new directory for css customizations, but I’m not sure that applies here – I think what I want to do has to happen in templates.

4. I would also like to change the related posts calendar icon image to something else, and I think that happens in the CSS.

Thank you in advance for your help 🙂

[George]

Hey Karrie!

We unfortunately do not offer support for customizations, but your questions here are “general” enough that I will try to help with as much information as reasonably possible.

—

1. I must make a child theme to change or create template files for this plugin (so they do not get overwritten in theme updates)

I think you’re simply telling us your plan to make a child theme here – which is totally fine! The things we describe in our themer’s guide work fine if you use a parent theme or a child theme → https://theeventscalendar.com/knowledgebase/themers-guide/

—

2. How do I modify the layout of the event list shortcode display (particularly replacing the date/time icon, as noted in the title)

The event list shortcode is really just a wrapper that calls the same template as the event list widget. So, you can create customized versions of either (or both!) of the following files:

• In The Events Calendar: /src/views/widgets/list-widget.php
• In Events Calendar Pro: /src/views/pro/widgets/list-widget.php

So in your child theme:

• /tribe-events/widgets/list-widget.php
• /tribe-events/pro/widgets/list-widget.php

—

3. I have already created a new directory for css customizations, but I’m not sure that applies here – I think what I want to do has to happen in templates.

If you have a child theme, then that child theme’s style.css is a good place to write custom CSS tweaks. You can indeed also add another directory for CSS files if that is more organized for you, for example.

Modifying the Date Icon Specifically

If by “date icon” you mean the thing shown in this screenshot, then you will have to also add a customized version of this file from Events Calendar Pro:

/src/views/pro/widgets/modules/single-event.php

Now, that path looks long. But the customization is simple. You can simply duplicate this file into your child theme here:

[child-theme]/tribe-events/pro/widgets/modules/single-event.php

Then, look for the div at the top of the file called “list-date”.

This div is the square icon shown in the screenshot above, and so to replace this you will need to replace this code with the alternative you’d like.

—

4. I would also like to change the related posts calendar icon image to something else, and I think that happens in the CSS.

As for this icon, do you mean the gray icon/images as shown in this screenshot? → https://cloudup.com/cOAXxDvL9jF

If so, then those are just placeholder images – if you add a “featured image” to the event, then that featured image will be used instead of the placeholder. If you want the image to be hidden regardless of whether its a feature image or placeholder anyways, then you can hide the image area there altogether with the following CSS:


.tribe-events-single ul.tribe-related-events .tribe-related-events-thumbnail {
display: none !important;
}


—

As I noted earlier in my post here, we do not officially offer any support for customizations. I hope that the information I shared is helpful despite that, and that you find this information useful for getting started with your customizations.

One last tip I have is to definitely check out a [free!] tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome. They have “Inspector” tools that let you zoom right over the element you’d like to customize; it makes things so much easier, and I used Firebug for Firefox myself a bit to answer this question in fact 😀

Best of luck with your customizations!
George

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts