CSS for vikBooking search form widget

Hi Andy,

Thanks for the detailed message. We were able to see the “Search Form” widget in the home page of your website, and we noticed that you are using the “classic” layout. You should try to play on the settings of that widget to see if the “human readable” layout looks better, because maybe it doesn’t have the same coloring issues like the current layout type.

In any case, the problem is caused by the fact that your theme is applying a default body-color as #4b4f58 (it’s actually a CSS variable of your Theme in RGB format, which is set to rgb(75, 79, 88)). That’s a dark font color for the body of the theme, and so that’s why you cannot read those labels, also due to the dark background of that position/sidebar of your Theme.

The only solution in this case is to add some custom CSS rules to your Theme. Most of the times, this default setting is available in the Customizer of your Theme. By using the browser inspector tool you should be able to identify a common element for all labels to define via CSS a new color for those contents.

The following CSS rule will do the trick, and it should be added to your Theme’s custom CSS:

.widget_mod_vikbooking_horizontalsearch {
  color: #fff;
}

We hope this helps!

The VikWP Team

Thanks! Just tweaked my theme colours and it’s cooking a lot better.