Backlight 4 Wordpress CSS conflict

ShawWellPete · July 23, 2024, 4:25pm

Hi,

I have a wordpress site which uses BL4 WP theme www.begurvillas.com.
I am trying to install a widget.
The instructions say to paste this somewhere in the page

<script src="https://app.lodgify.com/portable-search-bar/stable/renderPortableSearchBar.js" defer></script>

And this where I want the widget

<style>
  :root {
    --ldg-psb-background: #ffffff;
    --ldg-psb-border-radius: 0.42em;
    --ldg-psb-box-shadow: 0px 24px 54px 0px rgba(0, 0, 0, 0.1);
    --ldg-psb-padding: 14px;
    --ldg-psb-input-background: #ffffff;
    --ldg-psb-button-border-radius: 0px;
    --ldg-psb-color-primary: #fac600;
    --ldg-psb-color-primary-lighter:#fde380;
    --ldg-psb-color-primary-darker: #7d6300;
    --ldg-psb-color-primary-contrast: #000000;
    --ldg-semantic-color-primary:  #fac600;
    --ldg-semantic-color-primary-lighter: #fde380;
    --ldg-semantic-color-primary-darker: #7d6300;
    --ldg-semantic-color-primary-contrast: #000000;
  }
  #lodgify-search-bar { 
    position: relative;
    z-index: 999999;
    width:100%;
  }
</style>
<div
  id="lodgify-search-bar"
  data-website-id="526819"
  data-language-code="en"
  data-search-page-url="https://book.begurvillas.com/en/all-properties"
  
  data-dates-check-in-label="Arrival"
  data-dates-check-out-label="Departure"
  data-guests-counter-label="Guests"
  data-guests-input-singular-label="{{NumberOfGuests}} guest"
  data-guests-input-plural-label="{{NumberOfGuests}} guests"
  data-location-input-label="Location"
  data-search-button-label="Search"
  
  data-new-tab="true"
  data-version="stable"
></div>

What I should get is this

What I actually get is this

I am guessing this is something to do with a CSS conflict between the theme and the widget.

Any ideas how to fix it please?

rod_barbee · July 23, 2024, 5:49pm

looks like the color assigned in the widget css is the culprit. That color is #aaa. In the Inspector, I see it in two places, both are inline styling. Do you have any control over the widget color?

Otherwise, you could try overriding with custom css and use !important

Here are two places I’m seeing it:

ShawWellPete · July 23, 2024, 6:08pm

Thank you Rod,

I have sent Lodgify your image and asked them to fix the widget. Seems better to fix the code then working around it.

rod_barbee · July 23, 2024, 7:28pm

seems there should be somewhere in the widget/plugin to set colors.

Just a thought, are you using that light grey color in the page template for your theme?

ShawWellPete · July 24, 2024, 9:37am

Thanks Rod,

The widget allow me to define the colours but the theme seems to overide the ones from the widget.

I am not using the light grey (slightly blue?) anywhere, but I have several
items that have no colour defined, like this

Any idea where I would find the one that defines the text on this kind of widget?

rod_barbee · July 24, 2024, 11:43am

I thought it could be inherited from your theme via the main Color settings in the page template.

Are there no controls in the Lodgify plug-in settings?

ShawWellPete · July 24, 2024, 1:41pm

There are options but what I choose has no effect on the site

ShawWellPete · July 24, 2024, 1:51pm

these ones?

rod_barbee · July 24, 2024, 1:59pm

yep, but I don’t see a light gray for text color.

rod_barbee · July 24, 2024, 2:39pm

looks like your other booking widgets are working well.
For some reason, the one you show above had a transparent background instead of a white one, which made the grey text harder to see.

Daniel · July 24, 2024, 2:45pm

If you look at the source code, your css markup is mixed with html tags:

<style>
  :root {<br />
    --ldg-bnb-background: #ffffff;<br />
    --ldg-bnb-border-radius: 0.42em;<br />
    --ldg-bnb-box-shadow: 0px 24px 54px 0px rgba(0, 0, 0, 0.1);<br />
    --ldg-bnb-padding: 14px;<br />
    --ldg-bnb-input-background: #ffffff;<br />
    --ldg-bnb-button-border-radius: 0px;
</p>
<p>
    --ldg-bnb-color-primary: #fac600;<br />
    --ldg-bnb-color-primary-lighter:#fde380;<br />
    --ldg-bnb-color-primary-darker: #7d6300;<br />
    --ldg-bnb-color-primary-contrast: #333333;<br />
    --ldg-component-calendar-cell-selection-bg-color: #fac600;<br />
    --ldg-component-calendar-cell-selection-color: #333333;<br />
    --ldg-component-calendar-cell-selected-bg-color: #fde380;<br />
    --ldg-component-calendar-cell-selected-color: #333333;<br />
    --ldg-bnb-font-family: inherit;<br />
  }<br />
  #lodgify-book-now-box {<br />
    width: 100%;<br />
  }<br />
</style>

That’s most likely due to Wordpress.

I would just define everything in one line. This way, it WP shouldn’t add any additional html tags:

ShawWellPete · July 24, 2024, 3:36pm

Thanks Matt, copying the code into VS code and using J to remove the line breaks seems to fix it!

ShawWellPete · July 24, 2024, 6:14pm

I have gone through the site and used the same method on the other widget, so all good. Wordpress really has some weird foibles. Thank you @Daniel and @rod_barbee for your help