Built by owners, for owners.
(206) 651-4090
Join Log In
OwnerRez
Forums  »  General Help and Questions  »  Wix and Widgets -transparent background

Wix and Widgets -transparent background

Reply To This Topic
Replies: 4 - Pages: 1 - Last Reply: May 13, 2020 6:29 PM by: Chris Hynes
Autumn J
Registered: 4/20/20
Wix and Widgets -transparent background May 13, 2020 12:31 PM

Hi all and especially to the magic person who might be able to help me.

I'm using WIX for my web page and adding widgets. Wix does not have the functionality to open or expand the page for a widget so the space has to be provided on the page for the full widget. When using the Availability search this leave a large blank space on the page until the guests chooses to search for availability.

Right now I can over lay the widget bringing it to the front so it opens on top of other features. The widgets all seem to have a transparent back ground.

Does anyone know if there is a way to select for the widgets to have a white background rather than transparent. Is this a feature I would need to request? It seems to be my best option for a seamless integration on WIX. IF anyone is a coder and would like to charge me to customize the code I'd be happy to pay!!

Any suggestions welcome.

Thanks
Autumn
Park City Adventure Lodging
Chris Hynes
Registered: 10/19/12
Re: Wix and Widgets -transparent background May 13, 2020 3:40 PM

Yes, the widgets are transparent by default when you embed them because usually you want them to blend into the site. If you've got a busy background, though, it can bleed through.

To set a background behind the widget, you can put a style attribute on the <div> in the embed code. So if you've got:

<div class="ownerrez-widget" data-propertyId="somethingsomething" data-widget-type="Rates" data-widgetId="othersomething"></div>
<script src="https://secure.ownerreservations.com/widget.js"></script>

Add a style attribute with background-color:#fff (which is white) in that <div> after the last attribute, but before the >. Like:

<div class="ownerrez-widget" data-propertyId="123512351235" data-widget-type="Rates" data-widgetId="123451235" style="background-color:#fff"></div>
<script src="https://secure.ownerreservations.com/widget.js"></script>
Autumn J
Registered: 4/20/20
Re: Wix and Widgets -transparent background May 13, 2020 5:44 PM

Thanks so much for you help, I tried that and got mixed results.

Here is my code

<!-- Test Availability -->
<!-- OwnerRez Availability/Property Search widget -->
<div class="ownerrez-widget" data-widget-type="Test Availability - Availability/Property Search" data-widgetId="2f27ff2d04604f47aa49975bafdf5574 "style="background-color:#fff"></div>
<script src="https://secure.ownerreservations.com/widget.js"></script>


Now on my page preview the widget shows the narrow box with the dates to select Availability but the calendar drop down is cut in half and the result fill into that same small box rather than filling the space designated for the widget? Not sure you understand my explanation and not sure if there is a way to attach a screen shot.
Chris Hynes
Registered: 10/19/12
Re: Wix and Widgets -transparent background May 13, 2020 6:29 PM

You can't post screenshots on the forums yet (we're working on it).

It looks like the HTML is close but not quite..

Next to the style attribute it should be:

5574" style=

i.e. the " needs to be next to the 4 with a space between it and the s, not next to the s.

If that doesn't fix it, shoot us an email with a screenshot to help@ownerreservations.com
Forums » General Help and Questions » Wix and Widgets -transparent background
Pages: 1