'View As' Dropdown Not Obvious

[Carolin]

The styling of the “View As” drop-down to change the page view from e.g. Photo to Week etc. is not very obvious. Users are not realising that they can change the view. Oddly, when the page loads there is a better styled version visible for a couple of seconds but then it changes to the eventual, more confusing style. How can I override it to a version where there is an obvious drop-down?

See screen shots of briefly visible style as opposed to the eventual style after full page load:

View post on imgur.com

<script async src=”//s.imgur.com/min/embed.js” charset=”utf-8″></script>

View post on imgur.com

<script async src=”//s.imgur.com/min/embed.js” charset=”utf-8″></script>

[Barry]

Hi Carolin,

It sounds like you are experiencing something other than what you find if you visit our demo site:

wpshindig.com/events

I wonder, could you share your domain (by private reply if you prefer) so I could take a look first hand and see if there is any obvious reason for the discrepancy?

[Carolin]

Hi Barry

Your demo site actually has the same configuration that my client is complaining about. Without a drop-down arrow, it is not immediately obvious to someone unfamiliar with the site that there is an option to change the view. The user has to click on the view type in order to see a drop-down with other options. We would prefer a style where it is clear that there is a selection of views available. The standard drop-down list style would achieve that.

[Carolin]

This reply is private.

[Barry]

Hi Carolin,

Thanks for clarifying – I see what you mean now.

There are various ways you could style it to make it clearer that it functions as a dropdown, for instance here’s a basic CSS-based approach (nothing more than a starting point):

.tribe-bar-views-list li:first-child a span::after {
  content: '\2193';
}

Alternatively, if you prefer to revert to the raw select element, you could add some CSS like this:

#tribe-bar-views [name="tribe-bar-view"] {
  display: inline-block;
}

#tribe-bar-views .tribe-bar-views-list {
  display: none;
}

To find out more about adding custom CSS, please refer to our Themer’s Guide — does that help?

[Carolin]

Perfect solutions. Thanks a million!

[Barry]

Happy to help 🙂

[Author]

Posts