[Support request] Theme overpowering link colors in Event Calendar Plugin?

[Chelsea]

Aloha Generate Press,

I’ve been connecting with The Event Calendar Plugin regarding an issue with link color customization. Basically the links are behaving strangely on the Event section of the dev site I’m building which is handled by The Events Calendar plugin.

Hoping you can help us to isolate and fix an issue that is occurring with our “Read More” buttons … which we renamed to “More…” In the Customizer the Events Calendar Plugin has two styling options – “General” – which provides Accent Color and Link Color Options and “Single Event” which provides color options for Event Title Color and Details Background Color. Basically the issue I’m having is with the “Link Color”. In order to make the buttons on the Event Calendar look like all the other buttons throughout my site I had to make the Link Color “White”.

FYI: The brand standard for our buttons throughout the site is a red background with white text and an orange background with white text on hover. Generate Press Premium is the theme we are using with Beaver Builder page builder integration. Generate Press has a setting in customizer to make all “read more” links turn into buttons. We have this active on the site. It looks like the theme translated over the buttons to The Events Calendar plugins Event page… however they are not behaving how we want them to.

The strange thing is that in Customize / The Events Calendar / General the “Link Color” setting controls the link “text” color on the button “More..” but also controls only the website link on the Single Event Page. Therefor if I change the “Link Color” on the General to the color white (in order to make the buttons uniform with all other buttons on the website)… it ends up making the “Website” link on the single event page the color white which doesn’t work for obvious reasons.

The Events Calendar Plugin support team provided this custom css to try to see if it could style the single events links. Here is what they said and provided:

”
From what I understand, the only missing thing here is reverting the color of the links in single event.

You should be able to do that with some CSS.

Please go to Appearance->Customize->Additional CSS and paste the following code. Then Save changes.

.single-tribe_events #tribe-events-content .tribe-events-event-categories a,
.single-tribe_events #tribe-events-content .tribe-organizer a{
color: #444444 !important;
}

I went ahead and added this code to my Additional CSS but had some odd reactions take place here are a couple videos and a description of what happened:

I added the CSS but it is not working. Something very bazar is happening with Events Calendar links and how its working with Generate Press Premium. I took two screencast videos of the issue so you can see what happens when I add the css you supplied.

I kept the hex color #444444 (dark grey) the same in your code to see how it generates. Strangely links on some of the pages are white but orange on other pages (its random). I took videos of pages with white links to show what happens when I add the CSS code you provided. When I add the code the links turn orange not #444444 (its almost like adding the code triggers the links to work as expected)…. but the really strange thing is that when I delete the CSS code you provided the links remain orange. See videos.

Also of note – in the video you can see that when I add the CSS it also changes the background color of the Details section of the single event page.

[video src="https://www.cloudhq.net/screencast/76fa09080ef7e3.webm" /]
[video src="https://www.cloudhq.net/screencast/2a7318eceb65ff.webm" /]

________________________

After reviewing the above The Events Calendar Support team said this:

There is definitely something odd happening. I’m not familiar with the theme and how it may load the styles for the templates. It’d be good to look for any other style that is being applied to the same elements. If a style is applied with the !important parameter after the custom rule we added, then it will take precedence.

Can you make sure no other custom CSS is pointing to those elements?
I will take a look on my end and see if I can spot anything. Please let me know if you find anything.

I’m hoping you might be able to understand what might be overriding these links and causing this issue. I noticed that not all single event pages are having the issue. But if you click back to “Previous Events” you will be able to see more events and if you click on different events and look at the single page you will see how some links (ie: Website link on the Details section) is white while others are orange.

Hope this all makes sense and you can point out what might be happening. Thank you so so much!

Aloha,
Chelsea

[Leo]

Hi there,

The link you’ve provided requires a username and password to view.

Can you provide that or unlock it for now?

[Chelsea]

Yes – Please try these:

https://www.cloudhq.net//screencast/76fa09080ef7e3

https://www.cloudhq.net//screencast/2a7318eceb65ff

Thank you Leo!

[Leo]

Sorry I need to actually see the issue live and not just the video.

However, the link you’ve provided requires a username and password to view.

Can you provide that or unlock it for now?

[Chelsea]

Hi! Yes the dev site is password protected. Thought I included it in the initial ticket. Oops – Here it is:

User: rdorgdev
Password:eadc5566

[David]

Hi there,

try adding this CSS:

.tribe-events-event-url a {
    color: #fb9334;
}
.tribe-events-event-url a:hover {
    color: #fc3516;
}

[Chelsea]

Aloha David,

Thank you for looking into this. I added the code to the dev site… Strange thing is that before I added the code when I view certain event pages in Chrome in the Customizer (to add CSS) sometimes as I scroll the page the white links turn orange… super odd?

I checked the site on chrome and safari and still having white links on event posts like:

“Putting Love into Action with Benjy Wertheimer” and “‘Real Change’ Livestream with Sharon Salzberg”

Would it help to add !important

[Chelsea]

Actually just tried adding !important and didn’t work : (

[Chelsea]

Also wanted to note that when I add a manual excerpt to the Event post the “More…” button ((read more linke)) disappears. I’ve remedied this for all of my other Posts I’ve created with manual excerpts but the Events posts isn’t adapting this code I got from GP forums for manual excerpts:

add_filter( ‘wp_trim_excerpt’, ‘tu_excerpt_metabox_more’ );
function tu_excerpt_metabox_more( $excerpt ) {
$output = $excerpt;

if ( has_excerpt() ) {
$output = sprintf( ‘%1$s <p>More…</p>’,
$excerpt,
get_permalink()
);
}

return $output;
}

Any thoughts on why Events Posts is not responding?

[David]

The inner content links such as seen on /real-change-livestream-with-sharon-salzberg are coming from this CSSS:

.tribe-events-single-event-description a, .tribe-events-event-url a, .tribe-venue-url a, .tribe-organizer-url a, .tribe-events-pro .tribe-events-pro-organizer__meta-website a, .tribe-block__organizer__website a, .tribe-events-pro .tribe-events-pro-venue__meta-website a, .tribe-block__venue__website a, .tribe_events p a {
    color: #ffffff;
}

Which comes from tribe-events-pro-views-v2-full-inline-css
So that should be fixable in their plugin ?

[Chelsea]

Thank you David!

I sent a support ticket update to Events Calendar Support and provided your input. Hopefully they will be able to come back with a fix.

I also inquired with them about the missing button on the manual excerpts. Hopefully they have a fix for that too. Do you have any insight on that? Thank you!

Aloha,
Chelsea

[Tom]

That read more function should work if they’re using core functions to output the excerpt. They should be able to point you in the right direction there as well hopefully 🙂

[Chelsea]

Thank you Tom : )

I forwarded that detail to Event Calendar Support…Hopefully they can point me in the right direction.

[Tom]

No problem! 🙂

[Chelsea]

Hi Tom,

Quick question – Do you have an event calendar plugin (similar functionality to The Events Calendar) that you would recommend works well with Generate Press and is greatly supported?

We keep on having issues with The Event Calendar plugin in a number of ways – it doesn’t seem to be optimally integrating into the WordPress environment we are building and their support is limited and not very quick to respond. Would love your input. Thank you!

Aloha!

[Author]

Posts