How do we edit the count down widget?

[Tommy]

The widget is a good feature but it seems that you guys didn’t put any work in the presentation of this plugin.

How do i remove or change that red?

How do i centre the countdown?

How do i remove or increase the height of the black area and add padding to the right? Because the “SEC” word is right up against the right of the black background.

Any help into the right direction would be great

[Geoff]

Hi Tommy,

Thanks for reaching out and i’m sorry to hear you’re disappointed with the presentation of the Countdown Widget.

Based on the screenshot you shared, it appears the layout of the widget is conflicting with the layout of the theme because that’s different from how the widget normally appears of the box.

That said, it is possible to customize the widget using a combination of CSS and that would be the best way to change the colors and positioning so the layout does not conflict with your site’s other styles. I just looked at your site and it appears you have worked that out already (screenshot) but please do refer to our Themer’s Guide on customizing styles and this article on how to use DevTools to identify CSS rules.

Cheers,
Geoff

[Tommy]

Yes you are right. It was the theme that was making the colours. However how to i change the css for this widget? Where do i go to edit?

How do i move all the text to the left by about 10px? (DAYS, HOURS, MIN, SEC)

Also how to i enlarge the count down? It’s too small

[Geoff]

Hey Tommy,

Glad to hear the layout was a CSS conflict rather than an oversight on our part–thanks for confirming!

The couple of links I shared in my last reply will help guide you for making further customizations:

• Themer’s Guide: These are instructions for setting up your own stylesheet for The Events Calendar (including the Countdown Widget) and placing it in your theme.
• How to use DevTools: This is a step-by-step guide for how to determine which CSS styles to target and add to your stylesheet to modify any style in The Events Calendar.

So, for example, increasing the font size of the labels might look like:

span.tribe-countdown-under {
font-size: 20px;
}

Cheers!
Geoff

[Tommy]

Geoff that is way our of my scope. Are you about to give me a few codes? I tried adding your code to the customer css but it did nothing.

I just need to move the wording text over to be closer to the number (shouldn’t it be closer to the number anyhow? Perhaps add a padding between those blocks) and i need to enlarge the entire countdown text.

[Geoff]

Hey Tommy,

Unfortunately, we are quite limited in how much we can support custom development questions like this. We do, however, have a list of freelancers who might be able to help you out.

Sorry I don’t have a concrete solution for you, but I do hope this helps get things moving in the right direction.

Thanks!
Geoff

[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