Leland Fiegel

Hi @stinkbuck2000,

Thank you for using The Events Calendar.

It appears this issue is caused by a CSS rule coming from your theme.

However, we can workaround it with the following Custom CSS:

.aft-default-mode .tribe-events-c-subscribe-dropdown__button:not(.tribe-events-c-subscribe-dropdown__button--active):not(:hover):not(:focus):not(:active) button.tribe-events-c-subscribe-dropdown__button-text:not(:hover):not(:focus):not(:active) {
    color: var(--tec-color-accent-primary);
}

Here’s a guide on adding Custom CSS to your WordPress site if you’re unfamiliar: https://theeventscalendar.com/knowledgebase/k/customizing-css/

I believe the “aft-default-mode” body class comes from your theme. If that body class were to change, this snippet would no longer work.

Hope this helps. Do let us know how it goes.

IMPORTANT NOTE FOR OTHERS READING THIS: unless you are using the same WordPress theme with the same settings, the above CSS will not work for you.

Please make a new topic and include your site URL so we can come up with Custom CSS tailored to the unique circumstances of your site.

Best regards,
Leland

Hello @danchan22,

Thank you for using The Events Calendar.

The following Custom CSS will hide the “events header” (left and right arrows, “Today” tag, “Upcoming” with down arrow, view selector icon:

.tribe-events-header {
  display: none !important;
}

I noticed “May 2022” was included in your screenshot. Did you want to hide that as well?

If so, use this Custom CSS (also hides the “events header” referenced above):

.tribe-events-header,
.tribe-events-calendar-list__month-separator {
  display: none !important;
}

Hope that helps. Do let us know how it goes.

Best regards,
Leland

Hi @danchan22, please make a new topic with your question. You can do so on this page.

This topic is resolved, and is scoped to a sub-component of the bar. Hiding the entire bar is another matter, and warrants a new topic.

In your new topic, if you could include:

1) an annotated screenshot indicating precisely what you want removed
2) an explanation as to why you want to do this, while acknowledging that critical aspects of the product’s navigational features may not be able to function according to what is hidden
3) your site URL, as the potential CSS necessary may vary from site-to-site due to the unique combinations of theme/plugins in use

That will be immensely helpful in getting you the help you need from responding support agent.

Best regards,
Leland

Hi there,

Thanks for using The Events Calendar.

A couple options for you to consider.

1) This is a question that would be best directed to your theme author because the “content-sidebar” layout comes from that end.

They may have an option to switch to a “full width” layout on post type archive pages.

For reference, according to the stylesheet of your active theme, this is the author: https://wp-eventmanager.com/the-team/

2) A quick solution would be a dash of Custom CSS that I just whipped up for you:

.post-type-archive-tribe_events .primary-content-area {
    max-width: 100%;
    flex: 0 0 100%;
}

.post-type-archive-tribe_events .secondary-content-area {
    display: none;
}

Here’s a guide on adding Custom CSS to your site if you’re not familiar: https://theeventscalendar.com/knowledgebase/k/customizing-css/

Hope this helps point you in the right direction.

Let us know how it goes.

Best regards,
Leland

Hello homme4, thank you for your reply.

I think you may have discovered an issue in the plugin.

While that’s addressed, I came up with this PHP snippet which worked for me:

<?php
/* Previous */
add_filter( 'tribe_the_prev_event_link', function( $link ) {
	// Set the new string
	$new_string = 'Previous';

	// Get rid of HTML entity
	$link = str_replace( '<span>&laquo;</span> ', '', $link );
	
	// Parse the element
	$a = new SimpleXMLElement( $link );

	// Build the new link
	$link = '<a href="' . $a["href"] . '">' . $new_string . '</a>';
	
	return $link;
} );

/* Next */
add_filter( 'tribe_the_next_event_link', function( $link ) {
	// Set the new string
	$new_string = 'Next';

	// Get rid of HTML entity
	$link = str_replace( ' <span>&raquo;</span>', '', $link );
	
	// Parse the element
	$a = new SimpleXMLElement( $link );

	// Build the new link
	$link = '<a href="' . $a["href"] . '">' . $new_string . '</a>';
	
	return $link;
} );

Please see here for our guide on adding custom code snippets: https://theeventscalendar.com/knowledgebase/k/best-practices-for-implementing-custom-code-snippets/

To clarify, you shouldn’t need to do this. What you were trying to do should have worked.

This snippet (well, two snippets: one for “Previous” and one for “Next”) is only meant as a temporary workaround while this is addressed in the plugin itself.

Once it’s addressed, you should be able to use functions like tribe_the_prev_event_link as you were trying to.

Hope this helps. Please let us know how it goes.

Best regards,
Leland

Hi there,

Thanks for using The Events Calendar.

I see the issue and that blue color does not come from our end. It comes from this file: https://auburnchamberma.org/wp-content/et-cache/global/et-divi-customizer-cpt-global.min.css?ver=1647032794

And the inline styles set on those Uber Menu selectors are not specific enough to be taking effect on the events post type archive.

As far as solutions go, there are a number of ways to peel this onion.

One way would be by adding the following Custom CSS to the site:

.et-db #et-boc .et-l .ubermenu-new_template_blank .ubermenu-item-level-0 > .ubermenu-target {
  color: #fff;
}

.et-db #et-boc .et-l .ubermenu-new_template_blank .ubermenu-item-level-0.ubermenu-current-menu-item > .ubermenu-target {
  color: #10396f;
}

.et-db #et-boc .et-l .ubermenu.ubermenu-new_template_blank .ubermenu-item-level-0:hover > .ubermenu-target {
  color: #9b9b9b;
}

This is based off the inline CSS currently on the site. I’m just adding the .et-db #et-boc .et-l beforehand for enough specificity.

Why this is necessary only on the events post type archive, I am not quite sure.

100% of these CSS selectors appear to be related to either Elegant Themes or Uber Menu, which means there may be some other options within those products.

I hope this information is helpful. Let us know how it goes.

Best regards,
Leland

Below are a couple code snippets I whipped up that will utilize the built-in Event Website URL field for a “Buy Tickets” button.

<?php
/* Change label of website URL from the URL itself to "Buy Tickets" */
add_filter( 'tribe_get_event_website_link_label', function( $label, $post_id ) {	
	// Check if the label equals the website URL
	if ( $label === tribe_get_event_website_url( $post_id ) ) {
		$label = "Buy Tickets";
	}
	
	// Always return the $label
	return $label;
}, 10, 2 );

/* Add a "button" CSS class to the website link */
add_filter( 'tribe_get_event_website_link', function( $html ) {
	// Customize the button class here. Might be 'btn' or something else
	$button_class = 'button';

	// Insert the class attribute and value defined above.
	$html = str_replace( '<a', '<a class="' . $button_class . '"', $html );
	
	// Always return the $html;
	return $html;
} );

There are two snippets above. The first will change the text to “Buy Tickets” instead of the URL itself.

The second may not be necessary if you’re handy with CSS. It’s just a helper function to add a “button” class to the link, which is commonly included in WordPress themes although not guaranteed.

So that part might not do anything depending on your theme. If you could share your website URL, I could help you cross the finish line as far as the styling goes.

These are PHP code snippets so please search for “adding php snippets to wordpress” for further guidance if you’re not familiar with the process. The free https://www.ads-software.com/plugins/code-snippets/ plugin is a popular choice.

The “downside” is that it assumes every event will be set up like this. Might not be ideal if some event tickets would be free, or if tickets were distributed on your WordPress site, for example.

Maybe that’s okay with your use case, just wanted to mention for you and potentially others reading this post.

Hope that helps and let me know how it goes.

Best regards,
Leland

Hi Roland,

Glad to hear that.

I’ll go ahead and mark this topic as resolved. Feel free to start a new topic if you have any other questions and we can take a look.

Hope you have a nice day as well.

Best regards,
Leland

Hi there,

Thanks for clearly explaining the issue with pictures. ??

Please try this Custom CSS, it should help:

.tribe-events-sub-nav li a {
  background: transparent !important;
}

If you haven’t added Custom CSS to your WordPress site before…

Custom CSS can be added to your WordPress site through: Appearance → Customize → Additional CSS

More info here: https://www.ads-software.com/support/article/appearance-customize-screen/#additional-css

Or search for something like “how to add custom css to your wordpress site” in your preferred search engine for further guidance.

Hope this helps. Let us know how it goes.

Best regards,
Leland

Hi Owen,

Thank you for the kind words.

I’ll go ahead and mark this topic as resolved. Feel free to start a new topic if you have any other questions and we can take a look.

Best regards,
Leland

Happy to help!

I’ll go ahead and mark this topic as resolved. Feel free to start a new topic if you have any other questions and we can take a look.

Best regards,
Leland

Awesome, that’s exactly the information I was looking for.

So first off, it looks like the event grid on that page are rendered by something called Fusion Builder.

I believe that’s related to your Avada theme. They might have a built-in feature that would help with this. It might be worth checking with their support just in case.

With that said, even if they don’t, the below PHP code snippet that I just whipped up for you should help:

<?php
add_action( 'wp_footer', function() {
// Only run this code on page id #27735, aka the "Upcoming Events" page
if ( is_page( 27735 ) ) :
?>
	
<script>
	(function () {
	 	// Customize your domain name here, if needed
		const DOMAIN_NAME = 'pellis.online';

	 	// Grab all links that start with /event/
		const eventLinks = document.querySelectorAll( 'a[href^="https://' + DOMAIN_NAME + '/event/"]' );
		
		// Define the function that will add target="_blank" to any link passed to it
		const targetBlankify = link => {
			link.setAttribute( 'target', '_blank' );
		};
		
		// Apply the targetBlankify function to each link
		eventLinks.forEach( link => targetBlankify( link ) );
	} )();
</script>

<?php
endif;
} );

If you’re not familiar with working with custom PHP snippets, we have a guide about it here: https://theeventscalendar.com/knowledgebase/k/best-practices-for-implementing-custom-code-snippets/

Or really any “php snippets wordpress” guide should help. It’s not specific to us.

Since this Fusion Builder isn’t our product and I don’t have access to it, this snippet isn’t specific to that or even The Events Calendar. It’s just looking for any link that starts with /event/ on your Upcoming Events page.

IF ANYONE ELSE IS READING THIS, please see this more generalized snippet: https://gist.github.com/lelandf/6ff9e9bf91066e09a5dbf6c0b3c8cbee

You will need to customize it for use on your site, especially the domain name.

Hope that helps.

Best regards,
Leland

• This reply was modified 2 years, 8 months ago by Leland Fiegel. Reason: bbpress messing with my code snippet

Hi there,

Thanks for your note.

There is probably a way with a dash of custom code.

I say “probably” because I’m not entirely sure what you mean by “the events page” as it relates to your site.

Take our live preview site for example: https://demo.theeventscalendar.com/

The homepage is essentially also the events page, so there’s not really a way of opening that in a new window if someone happens to land on that page anyway.

However, there would be a way to write code to make sure when somebody clicked “Multi-day Event” (or any individual event link like that) that that opened in a new window.

Could you provide some additional details as to what you mean?

Links to a page on your site (and direction as to which links on that page should open in a new window when clicked) and/or annotated screenshots, if you wouldn’t mind, would be immensely helpful in directing you to a satisfactory solution.

Looking forward to your reply.

Best regards,
Leland

Hi there,

This can be achieved with a template override of the List Event template.

You may override this template in your own theme by creating a file at [your-theme]/tribe/events/v2/list/event.php

Then insert the “book now button” code after the </header> as follows:

<div class="book-now-button">
	<a class="book-now-button__link tribe-common-c-btn" href="<?php echo esc_url( $event->permalink ); ?>">Book Now</a>
</div>

Full example can be found here: https://gist.github.com/lelandf/99068384b3a4fd9ef077318c04c1d67a

Keep an eye out for the “CUSTOMIZATION [STARTS OR ENDS] HERE” comments to get an idea of what exactly is added.

Our documentation about overriding templates is here: https://evnt.is/1aiy

Hope this is helpful. Let us know how it goes!

Best regards,
Leland

• This reply was modified 2 years, 8 months ago by Leland Fiegel. Reason: appended semicolon to esc_url function reference

Hi there,

I tried to visit your site although I received an error that read “The page isn’t redirecting properly” and wasn’t able to see: https://cloudup.com/coqlqjwV4rU

While I understand it seems like an error exclusive to The Events Calendar, this is a problem that goes beyond the scope of our product, affects your entire site, including potentially other plugins that leverage Ajax.

For those reasons, I would suggest directing your research toward general WordPress solutions. For example: https://www.wpbeginner.com/wp-tutorials/how-to-fix-common-ssl-issues-in-wordpress-beginners-guide/

Your web hosting provider may be a good contact for further assistance as well, if they offer managed WordPress hosting.

I hope this is helpful and points you in the right direction.

Best regards,
Leland