Calendar Styling

[Samuel]

Hi,

I’m trying to style my events feed the same way it is styled on your customer example site, Northpointe.org.

I’ve tried styling mine near the bottom of my homepage, found here.

I’m using this code, but am still not achieving the desired results:
[tribe_events view="photo" category="test" tribe-bar="false"]

Can you assist please?

[Geoff B.]

Good evening Samuel and welcome back!

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

I think the simplest solution is a bit of CSS.

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

.home .tribe-events-list h2.tribe-events-page-title {display:none !important;}

.home .tribe-events-user-recurrence-toggle {display:none !important;}

.home .tribe-events-photo #tribe-events-footer {display:none !important;}

.home #main-wrapper #tribe-events .tribe-events-button {display:none !important;}

.home .tribe-events-list .tribe-events-loop .tribe-events-content {display:none !important;}

Have a good weekend,

Geoff B.

[Samuel]

Thanks for the stellar support, Geoff.

The CSS worked well.

One last thing — Can you help me:
1) Remove the white background from behind the text.
2) Center the text
3) Change the text color to white

Thank you for the support!

[image: logo]
*Sam Holt* *Marketing Consultant**, Catalyst Advertising*
(336) 675-8745 | [email protected] | catalystadv.org

Get a signature like this: Click here!

—
Sam Holt
Catalyst Advertising
Sent from mobile. Please excuse brevity.
[image: logo]
*Sam Holt* *Marketing Consultant**, Catalyst Advertising*
(336) 675-8745 | [email protected] | catalystadv.org

Get a signature like this: Click here!

[Geoff B.]

Good evening Samuel,

I am super stoked that this helped you out!

.home .type-tribe_events.tribe-events-photo-event .tribe-events-photo-event-wrap {
background: transparent !important;
text-align: center;
color: white;
}

.home .tribe-events-list #tribe-events-photo-events .tribe-events-event-details h2 a {
color: white;
}

Let me know if that helps.

Have a great day!

Geoff B.

[Samuel]

That totally helped! You’re a rockstar.

I think this is the last thing (fingers crossed) I need help with on this front page. I tried 5 different css combinations on my own to no avail.

I need to add padding between the event description and the event image (see screenshot).

What css code is this?

Thanks Geoff,
Sam

URL: http://c18.2c4.myftpupload.com/

[Samuel]

Hi Geoff,

One more issue regarding calendar styling 🙂

I want to limit the feed of events on my homepage to 3.

However, when I use this shortcode, it doesn’t work. What do you suggest?

[tribe_events view="photo" limit="3" tribe-bar="false"]

[Geoff B.]

Good evening Samuel,

Awesome. We are getting close to your goal!

.home .tribe-events-list .tribe-events-event-image {
margin: 0 3% 10px 0;
}

As for the limit parameter, it is unfortunately not part of our full calendar shortcode for now.
But, there are are a couple of things to be done:

1. You can vote for that feature here: https://tribe.uservoice.com/forums/195723-feature-ideas/suggestions/17229266-add-limit-x-option-to-photo-view-shortcode
2. As you can see from that page, there is a snippet that can help: https://theeventscalendar.com/support/forums/reply/1217300/
3. You could use a category filter instead, something like “homepage”.

Let me know how that goes.

Best regards,
Geoff B.

[Samuel]

Thanks, Geoff.

That code worked for the padding.

And the ‘hack’ worked until this feature is added to the pro plugin.

Thanks for all your help! You make me want to buy this plugin more so I can
receive your stellar support.

[image: logo]
*Sam Holt* *Marketing Consultant**, Catalyst Advertising*
(336) 675-8745 | [email protected] | catalystadv.org

Get a signature like this: Click here!

—
Sam Holt
Catalyst Advertising
Sent from mobile. Please excuse brevity.
[image: logo]
*Sam Holt* *Marketing Consultant**, Catalyst Advertising*
(336) 675-8745 | [email protected] | catalystadv.org

Get a signature like this: Click here!

[Geoff B.]

Good afternoon Sam,

I am really glad we were able to help you out!

Thank you for your fantastic words, it’s truly appreciated.

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