How to modify style of oembed

[Steve]

I have a test page up at the URL below.

1. How do I change that wordpress icon to something different?

2. How do I modify how this displays, or how the sharing features work?

Thanks!
Steve

[George]

Hey Steve,

Thanks for reaching out.

We unfortunately can only provide very, very limited support for customizations and design tweaks—please read our support policy here for more information—but I am happy to take a look and recommend what I can.

However, you mention having posted a test page URL, but there is no URL visible in your post. 🙁 Can you share the link again so I can take a closer look at your exact test page?

Thanks!
George

[Steve]

This reply is private.

[Steve]

Understood about the policy, just looking for you to point me in the right direction. If the styling is from WP core, or TEC, etc. Thanks!

[George]

Sure thing Steve, thanks for the link.

You have a few customization options here. Being that the contents of the embed are within an iFrame, using CSS is a bit tricky. However, since the embeds are happening on the same domain, you may be able to use a bit of JavaScript, especially jQuery, to customize some of the elements. You can learn more about this online, and check out this StackExchange question to start learning the basics of doing this.

The other method requires making custom template files within your theme.

The process for doing this is documented in our Themer’s Guide here → https://theeventscalendar.com/knowledgebase/themers-guide/

All of the calendar’s embed features are generated based on template files located in the /src/views/embed/ folder of The Events Calendar plugin files.

The CSS from the plugin that helps style the embeds is located here in the plugin files:

the-events-calendar/src/resources/css/tribe-events-embed.css

☝️ There are some instructions for modifying the CSS in the top of that file…

So, there are a few different angles of attack here, Steve. I hope the information I’ve shared here about them helps you proceed with your project!

Cheers,
George

[Steve]

Perfect!! Thank you very much. A+ support. Cheers!

[George]

Cheers! ?

Open a new thread on these forums any time if other issues or questions arise.

— George

[Author]

Posts