Date box formatting in List View

[Kevin]

How do I change the color scheme and font colors of the date box. I just want a single border with black lettering for date and day.

[Geoff B.]

Good evening Kevin and welcome to the Events Calendar Support forum!

Thank you for reaching out to us.
I would love to help you with this topic.

There are 2 ways to go about this:

1. Use the WordPress customizer: https://theeventscalendar.com/knowledgebase/wordpress-customizer/
2. Use some CSS

Try adding the following CSS rule to your style.css file or in your Custom CSS metabox:

.tribe-mini-calendar-event .list-date {
background: #fff !important;
border: 1px black solid;
}

.tribe-mini-calendar-event .list-date .list-daynumber {
color: #000 !important;
}

Let me know how that goes.

Best regards,
Geoff B.

[Kevin]

Perfect. Thank you so much for this. It works well!
One other styling question that I can’t find on support forum:
I want to remove the “view more” link in list view. I just want to put my own custom button there.
Forgive these newbie questions.

[Geoff B.]

Good evening Kevin,

I am super stoked that this worked well for you.

I want to remove the “view more” link in list view. I just want to put my own custom button there.

The best way to do this would be to do a view customization. In your case, the list view.

We actually built our plugins in a way that makes view overrides possible and relatively easy.
You might want to read our Themer’s guide to get a sense of how that works.

Basically, you:

1. Find the view file you want to tweak
2. Download it and edit it (remove the “view more” link and add your button instead)
3. Upload your modified file in the appropriate folder of the /tribe-events/ folder in your child theme files.

These are great questions, please ask away 🙂

Let me know if you need assistance with the customization.

 

Best regards,

Geoff B.

[Kevin]

Geoff,

I’ve managed to locate and delete the link. One final styling question and then I am done. Please bear with me.

I just want to darken up or eliminate the line between events in the list view widget (see screenshot). It is too faint to be visible on a white background. I’ve searched everywhere in the forums and through the installed plugin files for something I can alter without success.

If I can just get that to look right, I am done with this. Thanks for your time!

[Geoff B.]

Good afternoon Kevin,

I am super stoked to see you are making progress.

I just want to darken up or eliminate the line between events in the list view widget (see screenshot)

Alas, it seems like the screenshot did not make it for some reason.

In order to gain full power on your site’s look and feel, I would highly recommend reading the following articles:

• https://theeventscalendar.com/knowledgebase/using-google-chrome-developer-tools/
• https://theeventscalendar.com/knowledgebase/changing-fonts-and-colours/
• <u>https://theeventscalendar.com/knowledgebase/styling-events-widgets/</u&gt;

With that in mind, if you are looking to style the line that appears under each event in the advanced list widget, you might want to use the following CSS:

.tribe-mini-calendar-event {
border-bottom: 0px !important;
}

Let me know how that goes.

Best regards,
Geoff B.

[Kevin]

This worked. I think things are styled to look great now. You guys should be paid for your great consulting! Thanks for your help!

[Geoff B.]

Good afternoon Kevin,

I am super stoked that this all worked for you.

Thank you for your great words. As a side note, we are paid.
So I am just going to assume you meant we should be paid much more 😉

You are welcome back in our support forums any time 🙂

For now, I am going to close this thread.

Have a great week!

Geoff B.

[Author]

Posts