Search-button on main calendar page not automatically resizing to larger text

[Barbara]

Via an earlier thread, I used Cliff’s suggestion to change both the label for Organizer and Event. In most places, the buttons automatically resized, like the “Export” button on the bottom of the list-view.

However, the Search button at the top of the main calender page doesn’t automatically resize according to the contents. I understand that in this case, there needs to be at least a limit set, but there is still a lot of unused space that could have been filled with a bigger button.

We’ll try to fix this locally with a custom change to the CSS, but I can imagine other people encountering this as well after changing the Event-label. Or whenever the official translation of “Event” for a language is changed, you’ll encounter this problem as well, I can imagine.

[Geoff]

Hey Hans!

Man, it’s been a little while since I’ve looked at your site — awesome work. 🙂

Ah, yes, I see what you mean. CSS will definitely be the best way to clean that up. Give this a try:

.tribe-bar-submit {
width: 36%;
}

Here’s a screenshot of how that looks when I test it out on your site.

Cheers!
Geoff

[Barbara]

Hi Geoff,

Thanks for the reply, we will test that out!

Thanks about the website, though much of the designing credit goes to our recently acquired web designer, who has made a lot of (local) websites such as ours. I mainly do the functional part of running the website now, and am glad to have left the designing part in the skillful hands of our designer.

One more question that comes to mind: She hasn’t been able to find a way to differentiate between the several link colors used in the event page environment. So the “View All”-link, the links in the main text of the event AND the links in the Month view are, as far as she could see, changeable in just one way. Is there a way to differentiate between the hyperlink colors for these three situations? It would be very much appreciated if it would!

Thanks,
Hans

[Geoff]

Great websites are often the result of great collaboration. 🙂

All the links you mentioned in there ought to be selectable on their own in CSS. This might be the exact case on your site, but this should give you an idea of what I mean:

/* The "View All" link in the List Widget */
.tribe-events-adv-list-widget .tribe-events-widget-link a {
color: orange;
}

/* Links in the Main Content of an Event */
.tribe-events-content a {
color: green;
}

/* Month View Event Title Links */
h3.tribe-events-month-event-title a {
color: purple;
}

It’s mostly about finding the right parent class/selector that allows you to distinguish one element from another. A pretty efficient way to test those changes on the fly is to use a browser’s DevTools.

I hope this helps!
Geoff

[Barbara]

Hi Geoff,

We will look into this in the future, thanks for your advise!

By the way, your suggested snippet caused some viewing issues on iPad, our designer has worked around it and it now looks OK. Feel free to see how she fixed this to further benefit your experience 🙂

Best regards,
Hans

[Geoff]

Heck yeah, that’s awesome to hear! Well, not the fact that sizing was off on other screen sizes but that it led to the ultimate fix. 🙂

Cheers and thanks for following up on that!

Geoff

[Author]

Posts