Issue with Search Bar, Font Color and Text for Details -> Event Website

[Roland Goehde]

Dear Support Team,

I have following issue with The Events Calendar: Using The Events Calendar Pro, in list view the font of the text within the bar which is placed over the event picture is showing always the same color as any text used in the entire plugin as color of text with links (please see below link: picture in the middle). With a darker bar, a lighter text is needed for the bar, which then is not working well as link text on other parts of the plugin. Chosing a darker color for the link text, the same color is applied for the text at the bar which then is not or almost not readible.

In contrast to this, in the basic version of The Events Calendar (with The Events Calendar Pro plugin deactivated), the text within the bar which is placed over the event picture is white (please see below link: picture at top).

Screenshots:

Screenshots from The Events Calendar

How can I set different text colors in The Events Calendar Pro (a) for the text in the bar over the picture and (b) for the text with links?

Another issue is that the pre-defined German text over the event filter button is too wide, thus running out of the button (can be seen in the same screeshots). Is there any way to adapt/change the pre-defined text?

Furthermore, in the single event view, under details where the event website is given, long weblinks lead to text running out of the entire detail area (at the above given picture link, please see screenshot at the bottom). Is there any way to avoid this effect which is not so nice?

Thank you so much in advance for your support.

Kind regards

Roland

[Cliff]

Hi Roland. We typically do not provide multiple CSS customizations as part of our support, but if you provide me a link to each page/view that you’re referring to (e.g. your Month View and your Event Single view) and provide me an annotated screenshot of the edits to be made (one annotated screenshot per accompanying link), I could probably help a bit.

If you need some customization/coding/styling help, you may want to ask your developer or reference our list of known customizers.

[Roland Goehde]

Dear Cliff,

thank you very much for your kind support availability. I would not have asked for support if not having tried over many hours to fix the issues on my own.

Issue 1: Event List View – Control of color for text in the background colored bar over event picture

The issue with the color of the font only occurs in the event list – please see the attached screenshot no. 1 with annotations and following webpage:
Link to Website – Event List View

Target is to always have white text in the bars which are automatically placed over the event pictures in the event list view. I was not successful in using an own CSS element for managing this.

Question 1: Is there any way to control the color of the text over the background bard of the image seperately from the color of the text links (latter is set globally for The Events Calendar Pro – please see attached picture of control panel)?

—

Issue 2: Pre-defined German text over filter bar is running out of bar

Please see same screenshot no. 1 at the top right.

Question 2: Where can the pre-defined German text over the filter button be changed so that it does not run out of the filter bar due to length?

—

Issue 3: Longer event website links are running out of sidebar

In the given second screenshot, the text for the URL of the event website in the sidebar is running out of the sidebar. An example can be seen at following webpage:
Link to Website – Single Event View

Sometimes, event URLs are quite long depending on the venue or organizer of the event. Of course, a tool for creating short URLs could be used, but it would be nice to have either the original link shown or to have the choice of controlling the text referring to the URL.

Question 3: Is there a way to avoid that longer event website links will lead to link text running out of the sidebar?

Again, thank you so much.

Kind regards

Roland

[Roland Goehde]

Dear Cliff,

after some more attempts, issue 1 could now be solved by me: In the WordPress “Global Element” settings for The Events Calendar, I completely erased the hexcode for the link color and saved this new setting. It was not clear and could not be expected that manually erasing the code for the color of link texts would lead to standard definitions of a dark color for the link texts while allowing white text in the background bar of the event picture in the event list view.

Should you have any ideas regarding issue 2 and eventually also issue 3, I would be very grateful.

Kind regards

Roland

• This reply was modified 9 years, 10 months ago by Roland Goehde.

[Cliff]

Hi Roland.

FYI: I visited http://djo-nrw.de/?post_type=tribe_events but I only see the Tribe Bar (default search bar), not the Filter Bar (advanced search bar — separate add-on plugin).

1) I’m glad you figured this one out via the Color Customizer. It could have been done via custom CSS too.

2) Adding this CSS should do the trick:

.tribe-bar-geoloc-filter, .tribe-events-uses-geolocation .tribe-bar-date-filter,
.tribe-events-uses-geolocation .tribe-bar-search-filter,
.tribe-events-uses-geolocation .tribe-bar-submit,
.tribe-bar-submit {
width: inherit;
}

3) example event: http://djo-nrw.de/?tribe_events=sinfoniekonzert-2

Adding this CSS will make long links wrap within its container area:

.single-tribe_events .tribe-events-event-url a {
overflow-wrap: break-word;
}

===

You can add custom CSS code via your child theme’s style.css file or via a plugin like Simple Custom CSS or, my favorite, Jetpack. Jetpack supports regular CSS and the LESS and Sass pre-processors.

If you’re not a CSS expert, Jetpack’s Custom Design reference may prove helpful.

Please let me know how it goes for you.

[Roland Goehde]

Dear Cliff,

thank you so much for all your kind and precious support. Everything is fine now as the mentioned issues all could be solved!

Kind regards and best wishes

Roland

[Cliff]

Glad to hear! Have a great rest of your week.

[Author]

Posts