Events (from Events Calendar) in footer widget wrong color and font - Support

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
February 22, 2023 at 3:55 pm #1398900

tom_on_wheels
Participant

Hi,

In Customizer settings for Events Calendar I was clicking to inherit theme fonts. Partially it works, partially not. I’ve added forthcoming events in a widget in footer column 2. On all pages except the one with the calendar in the footer it shows the right font, but not the right color. It should be #919191 as defined in Events Calendar settings in Customizer.

On the page displaying the calendar in the footer it’s definitely the wrong font, but the correct color. Font should be “Ubuntu Condensed”.

That looks strange to me. Please could you have a look there?

Best regards,
Tom

Best regards,
Tom

February 23, 2023 at 12:34 pm #1398993
Yigit
Keymaster
Hey Tom,

I reported the issue to our developers. ~~Issue should be fixed in upcoming version.~~

As a temporary solution, I added the following code to the bottom of the Quick CSS field in Enfold theme options > General Styling
```
/* Temporary CSS fix for TEC styling */
:root{
    --tec-color-text-events-title-day:var(--tec-color-text-events-title);
    --tec-color-text-events-title-latest-past:var(--tec-color-text-events-title);
    --tec-color-text-event-title-list:var(--tec-color-text-events-title);
    --tec-color-text-events-title-month-multiday:var(--tec-color-text-events-title);
    --tec-color-text-events-title-widget-list:var(--tec-color-text-events-title);
    --tec-color-text-secondary-event-date-month:var(--tec-color-text-secondary-event-date);
    --tec-color-text-secondary-event-date-month-mobile:var(--tec-color-text-secondary-event-date-month);
    --tec-color-text-day-of-week-month:var(--tec-color-text-secondary);
    --tec-color-day-marker-month:var(--tec-color-text-primary);
    --tec-color-day-marker-month-hover:var(--tec-color-text-primary-hover);
    --tec-color-day-marker-month-active:var(--tec-color-text-primary-active);
    --tec-color-day-marker-current-month:var(--tec-color-day-marker-month);
    --tec-color-day-marker-current-month-hover:var(--tec-color-day-marker-month-hover);
    --tec-color-day-marker-current-month-active:var(--tec-color-day-marker-month-active);
    --tec-color-day-marker-past-month:var(--tec-color-text-primary);
    --tec-color-day-marker-past-month-hover:var(--tec-color-day-marker-past-month);
    --tec-color-day-marker-past-month-active:var(--tec-color-day-marker-past-month);
    --tec-color-text-day-of-week-week:var(--tec-color-text-secondary);
    --tec-border-radius-month-multiday:9.5px;
    --tec-color-border-secondary-month-grid:var(--tec-color-border-secondary);
    --tec-color-border-active-month-grid-hover:var(--tec-color-border-active);
    --tec-color-background-month-grid:transparent;
    --tec-color-background-tooltip:var(--tec-color-background);
    --tec-color-text-events-bar-input:var(--tec-color-text-primary);
    --tec-color-text-events-bar-input-placeholder:var(--tec-color-text-secondary);
    --tec-opacity-events-bar-input-placeholder:var(--tec-opacity-default);
    --tec-color-border-events-bar:var(--tec-color-border-secondary);
    --tec-color-background-events-bar:var(--tec-color-background);
    --tec-color-background-view-selector:var(--tec-color-background-events-bar);
    --tec-color-background-view-selector-tabs:var(--tec-color-background-view-selector);
    --tec-color-background-view-selector-list-item-hover:var(--tec-color-background-secondary);
    --tec-color-background-subscribe-list-item-hover:var(--tec-color-background-secondary);
    --tec-color-text-view-selector-list-item:var(--tec-color-text-primary);
    --tec-color-text-view-selector-list-item-hover:var(--tec-color-accent-secondary-hover);
    --tec-color-background-search-container:var(--tec-color-background-events-bar);
    --tec-color-text-events-bar-submit-button:var(--tec-color-background);
    --tec-color-text-events-bar-submit-button-active:var(--tec-color-text-events-bar-submit-button);
    --tec-color-text-events-bar-submit-button-hover:var(--tec-color-text-events-bar-submit-button);
    --tec-color-background-events-bar-submit-button:var(--tec-color-button-primary);
    --tec-color-background-events-bar-submit-button-hover:var(--tec-color-button-primary-hover);
    --tec-color-background-events-bar-submit-button-active:var(--tec-color-button-primary-active);
    --tec-color-icon-events-bar:var(--tec-color-icon-primary);
    --tec-color-icon-events-bar-active:var(--tec-color-icon-active);
    --tec-color-icon-events-bar-hover:var(--tec-color-icon-hover)
}
```
~~You can remove in the version after 5.4.1~~

Edit: After checking your other thread, I realized we must hear back from our devs. As I mentioned in the other thread, TEC styling should inherit Enfold theme options.

Best regards,
Yigit
- This reply was modified 1 year, 10 months ago by Yigit.
February 23, 2023 at 3:14 pm #1399018

tom_on_wheels
Participant

Hey Yigit,

Thanks a lot for your efforts, but I cannot find any changes on the site.

Fonts are still wrong.

Best regards,
Tom

February 24, 2023 at 1:27 pm #1399149
Yigit
Keymaster
Hi Tom,

I added the following code to the bottom of Quick CSS field
```
#top .tribe-events-content p, .tribe-events-content ol, .tribe-events-content p, .tribe-events-content ul, #top .tribe-common .tribe-common-b2 {
  color: #919191;
 font-size: 16px; 
font-family: var(--tec-font-family-sans-serif);
}
```
This seems to fix the font size, color, and family issues. Please review your website and let me know if you still experience issues.

Best regards,
Yigit
February 24, 2023 at 2:12 pm #1399154
tom_on_wheels
Participant
Hi Yigit,

This code address by you solved the issue perfectly. Thank you very much!!! You made my day!!!

Best regards,
Tom
- This reply was modified 1 year, 10 months ago by tom_on_wheels. Reason: Link added to private content
February 24, 2023 at 3:03 pm #1399164
Yigit
Keymaster
Hi,

1- I added the following code to the bottom of Quick CSS field
```
#top .tribe-events-event-meta .tribe-events-address .tribe-address {
  display: block;
}
```
2- I added following code to bottom of Functions.php file in Appearance > Editor to change the Single Event title to H4
```
/* Change single event title to h4 */
add_filter('avf_customize_heading_settings', 'single_event_title_h4');
function single_event_title_h4(){
	$args['heading'] = 'h4';
	return $args;
}
```
Since you set H4 tagged elements to use “Amati SC 40px #499f99”, this is now applied to your single event titles as well
Edit: Since you are not using a child theme, the codes added to the functions.php file will be removed when you update the theme. Please switch to a child theme and move (codes should be in either parent or child theme’s functions.php file, having in both at the same time will crash your site) your code from the functions.php file of the parent theme to the functions.php file of the child theme.

3- I added the following code to bottom of the Quick CSS field to change the color and font family of the event date
```
#top.single-tribe_events #wrap_all .all_colors .tribe-events-schedule h3 {
  color: #919191;
  font-family: var(--tec-font-family-sans-serif);
}
```
Please review your website and let us know if you have any other questions :)

Best regards,
Yigit
- This reply was modified 1 year, 10 months ago by Yigit.
February 24, 2023 at 3:30 pm #1399170

tom_on_wheels
Participant

Hi Yigit,

Thank you so much! Everything is perfect now.

I have no other questions for now ;-)

Our website became so beautiful and so much better than we expected as non web developers when starting to work with Enfold.

Your support is outstanding! We are happy customers!

Best regards,
Tom

February 24, 2023 at 9:19 pm #1399192

tom_on_wheels
Participant

Hi Yigit,

It works well – on desktops.

On my iPhone and 2 iPads the last changes are not shown. Deleted cache, closed Safari, still the wrong fonts.

Best regards,
Tom

February 25, 2023 at 6:58 pm #1399271

Mike
Moderator

Hi,
Thank you for your patience and the link to your site, I compared the footers of your event calendar page and a single event page, by emulating a mobile and tablet because I don’t have an actual iPad, but I’m not sure which element should have the wrong font or color, please include a screenshot and paste the image URL in your post of the error so we can try to investigate.
Please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

February 25, 2023 at 7:51 pm #1399277
tom_on_wheels
Participant
Hi Mike,

the result of the last changes by Yigit solved on desktops:

– correct font in search field (menu)
– correct fonts on single events page
– correct new line between “Deutschland” and “Google Karte”.

On iPhone and iPad

berliner-podencos.de/events (with an event)
– wrong font in search field (menu): should be Ubuntu Condensed
– wrong font date & time and event location (should be Ubuntu Condensed)
– wrong font “Previous” and “Next”, also “Today”

– wrong font in footer column 2 time (12:30-14:30)

https://berliner-podencos.de/event/testtermin-3/
– wrong font subheader “12. März @ 12:30-14:30
I think Yigit solved this for desktops by

#top.single-tribe_events #wrap_all .all_colors .tribe-events-schedule h3 {
color: #919191;
font-family: var(–tec-font-family-sans-serif);
}
– wrong body (“Dies ist ein Testtermin…” (should be Ubuntu Condensed)

– Google Maps map is missing
– no new line between “Deutschland” and “Google Karte”
– in footer column 2 wrong font again for “12:30-14:30” like on events page

berliner-podencos.de/events (without an event)
– wrong font “Es sind keine anstehenden…”, “Previous”, “Today”, “Next”

Footer column 2 wrong font “Es sind keine anstehenden Veranstaltungen…”.

Same at all footers of other pages.

As said before everything looks perfect on desktop and I guess the CSS additions by Yigit were not specialized on desktops and should be seen on every screen. I’ve found one post were someone reported a similar behavior on desktop, but cannot find it anymore.

I was clearing the cache and also checked on my wife’s iPhone which was never used before to visit the website.

Best regards,
Tom
- This reply was modified 1 year, 10 months ago by tom_on_wheels.
February 26, 2023 at 5:24 pm #1399321

Mike
Moderator

Hi,
Thank you, when I was logged out of your site I was seeing a call for the font ubuntu-condensed-custom but I didn’t see this font installed at Enfold Theme Options ▸ Import/Export ▸ Custom Font Manager nor anywhere else.
I cleared your WP Fastest Cache and now the correct font ubuntu-condensed is called when I’m logged in or out.
Please clear your browser cache and check.
Please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

February 26, 2023 at 5:34 pm #1399324

tom_on_wheels
Participant

Hi Mike,

Thank you very much. Now all fonts are correct.

Best regards,
Tom

February 26, 2023 at 5:45 pm #1399326

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts