Help editing the look of the events list widget?

[Edward]

I have the events pro list widget displayed on my home page at http://233.766.myftpupload.com.

I would like to make a few changes to the layout:

1. List event date and start time first (above event title).
2. Reduce the spacing between lines.
3. Change the font color of the event title.

Thanks!

p.s. I’m just an amateur at this. As much step-by-step that you can provide or point me to is much appreciated!

[George]

Hey @Edward,

Thanks for reaching out! We unfortunately are explicitly unable to help with step-by-step customizations. Check out the “Product Support” section on this page for more information on this and to see examples of what customer support we do provide outright → https://theeventscalendar.com/terms/

---

Now while what I shared above is true, it’s also true that I can still help out a little bit here and can hopefully point you in the right direction for anything outside the scope of these forums.

Let’s start with the first concern moving the event date/time above the title:

1. List event date and start time first (above event title).

You can do this by editing the Widget template files directly – we have a “themer’s guide” here that is a comprehensive overview of how to do stuff like this in a safe way, check out the themer’s guide here → https://theeventscalendar.com/knowledgebase/themers-guide/

—

2. Reduce the spacing between lines.

This could mean a number of different things, so your best bet would be to use 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 elements whose spacing, coloring, et cetera you’d like to change; then, just write your custom CSS based on that and place the custom CSS code into the bottom of your theme’s style.css file. If any of this isn’t something you’re too familiar with, then Google that specific thing you’re not sure of and there are fortunately a mountain of great resources about CSS customizations online 🙂

I will also give an example below.

—

3. Change the font color of the event title.

Doing this will require the sort of CSS Customization that I mentioned above for Question #2 – you can change the event title colors by using CSS like the following in the bottom of your theme’s style.css file:


.tribe-mini-calendar-event h2.tribe-events-title,
.tribe-mini-calendar-event h2.tribe-events-title a {
color: #cc9900 !important;
}

Now, #cc9900 is a sort-of rusty orange color, so just use a color that suits your needs and this should work well.

---

I’m sorry that we cannot help with customizations, @Edward! I hope the information here is helpful regardless and helps you get started with your own customizing and tweaking and such 🙂

Cheers!
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