asked on

PHP Help needed

I have purchased the Events Calendar Pro WordPresss plugin. I am trying to make the countdown timer look better but I am new to php and apparently I suck at it.

I have been trying to edit the countdown-widget.php file in an effort to make it look better because the default one is terrible. I want it to look more modern.

This is what i have tried:
<table border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#657b86">
<tr>
<td width="50%"><p align="center"><img border="0" width="200" height="148" src="<?php echo $img; ?>" ></td>

<td align="center" width="50%"><font size="30px"><div class="tribe-countdown-days tribe-countdown-number">DD</font><br />
            <span class="tribe-countdown-under"><?php esc_html_e( 'days', 'tribe-events-calendar-pro' ); ?></span>
      </div>
      <div class="tribe-countdown-colon">:</div>
      <div class="tribe-countdown-hours tribe-countdown-number">HH<br />
            <span class="tribe-countdown-under"><?php esc_html_e( 'hours', 'tribe-events-calendar-pro' ); ?></span>
      </div>
      <div class="tribe-countdown-colon">:</div>
      <div class="tribe-countdown-minutes tribe-countdown-number">MM<br />
            <span class="tribe-countdown-under"><?php esc_html_e( 'min', 'tribe-events-calendar-pro' ); ?></span>
      </div>
      <?php if ( $show_seconds ) : ?>
            <div class="tribe-countdown-colon">:</div>
            <div class="tribe-countdown-seconds tribe-countdown-number tribe-countdown-right">SS<br />
                  <span class="tribe-countdown-under"><?php esc_html_e( 'sec', 'tribe-events-calendar-pro' ); ?></span>
            </div>
      <?php endif; ?>
</div></td>
</tr>
</table>

You can see this at https://www.efbconline.com/events/

Is there a way that this can be made so the image is on the right and the timer is to the left of it?(Like in a table in html) Also would it be possible to control the image size, text color, etc?

Julian Hansen

You probably want to be editing the styling (CSS) rather than the PHP. A lot of magic can be achieved with CSS.

What specifically do you want to change?

Mark Wood

ASKER

i would like it to look something like this. https://webnus.net/modern-events-calendar/countdown-type-3/?ref=16

Mark Wood

ASKER

i just have no clue on how to get it there to be honest

Julian Hansen

You can start with this

.tribe-countdown-time {
	font-size: 11px;
	font-family: arial;
}
.tribe-countdown-time .tribe-countdown-under {
  font-size: 11px;
  color: black;
}

Open in new window

The reference site uses the acumin-pro font - which you would need to include before you could use it (assuming you want it to look exactly the same) I have used Arial above as that is a guaranteed available font.

Post back regarding any other changes needed.

Julian Hansen

If you want to manage the attributes of the Numbers independently of the text under them you can use this

.tribe-countdown-time {
	font-size: 11px;
	font-family: arial;
}
.tribe-countdown-time .tribe-countdown-number {
  color:#222;
}
.tribe-countdown-time .tribe-countdown-under {
  color: #333;
}

Open in new window

David Favor

Tip: There are so many HTML + CSS errors, tough to guess how to even start.

Suggestion: Consider fixing these...

Page Speed Problems - fix this to optimize visitor on page + on site time.

HTML Validation Problems - personally, I target 0 HTML errors + warnings, because subtle problems can break the entire rendering process. Only a few look to be problems in your case. My preference is 0 errors + warnings, so I can glance at a page knowing if I ever see a new error or warning pop up, it's something to fix.

CSS Errors - some of these will break rendering.

Note: Using the following...

<table border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#657b86">

Open in new window

This is very old deprecated/unsupported HTML4, which is ill-defined... meaning...

If you use this type of <table> tag embedded CSS, every browser will immediately fallback to run in what's called Quirks Mode... which means... it's anyone's guess how rendering will work... Even better, each browser changes how it handles Quirks Mode with each new browser release, so once you have this working today, every browser change will change rendering either slightly or a great deal.

Better to follow Julian's suggestions above for handling this outside your .php files using .css files instead, for any CSS changes.

David Favor

Note: Whatever you're changing isn't propagating through your content rendering process to you're rendered page. You can prove this to yourself by doing a view source on the page. You'll see there's no <table> tag with the embedded CSS you mention above, so whatever you're changing isn't rendering.

This is likely due to the following Opcache setting...

opcache.revalidate_freq=0

Open in new window

Or Apache headers.

If you can't figure out how to get your changes pushed through to visitors, open another question about this... as resolving caching oddities can be a very long conversation.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial