-
Posts
-
Hi
I’m implementing a site for a restaurant client of mine. We need to add a reservation widget from OpenTable, one of the major suppliers of this booking systems. I’m having problems getting it to display right with Enfold.
What it should look like
What it actually looks likeIt’s inheriting custom fonts for the site via CSS I’ve defined for elsewhere in the site, which is good, but there’s obviously a CSS conflict. So there are no visible icons or rules/borders, and the drop-downs are not working. My client will not accept this as it makes for a less good user experience
I found this previous topic in which another user has hit pretty much the same issue with the same 3rd party widget. The code suggestions in that thread did not help me, and the user’s client’s site still seems to have issues with displaying the OpenTable widget.
Is there a way to implement this OpenTable widget ‘as is’, so it can call the external CSS required for it to look like it’s supposed to do? I ahve inspected the code and I can see various variables. Following the advice frm the other topic, I have been able to change some parameters eg width (see below) but not get icons, borders or drop-down menus to work as they need to.
.OT_submit, .OT_submit > * { width: 160px !important; }I have placed the OpenTable code inside a WP widget so I can use it in a footer socket, as well as embedded into an advanced layout. Thanks in advance for your advice on how to get this 3rd party code to display the functionality I require.
Hi antilimited!
You will need to style the widget, to look like that.
If you do not have enough knowledge, I would suggest to go ahead and try hire someone from codeable.io, who will be able to help you out with the processCheers!
BasilisHi. Ok, that’s not a big help.
It is a pretty small snippet of code for this widget: if you can tell me if there’s a function or method to work around this, then I can either investigate more myself, or brief it in another developer. But to just say I have to style the widget myself isn’t really helping me.
Is there a way to override or redefine CSS for some 3rd party code like this when using Enfold? Thanks in advance.
Hi!
you don’t have to style it yourself, but it just seems that your 3rd party plugin/widget is not compatible with Enfold. Therefore you would need to hire a freelance developer for this job.
Cheers!
AndyNo Monica, like Andy said, it really doesn’t play well with Enfold… lots of very weird CSS display issues.
Luckily there is a very good third party widget which allowed me to style it as I needed. This solved my issue!
antilimited
in the beginning of the post you said the theme was enfold and now you say Enfuse. I tried it on Enfol and is not working well.Andy
codeable (as you suggested to contact) are not able to help with opentable, they said since Enfold theme is a bootstrap one Opentable is not going to work on it and they cannot customize it.Ooops, I shouldn’t type when I’m tired… I am using Enfold. I have edited my earlier post.
Yes, the Opentable widget sucks. It sucks so much it even displays their old logo, not the rebranded one. Makes you wonder where the priorities of a web-based reservations company lie!
Use the 3rd party widget, it works properly, and is much more customisable!
Yes, but that’s because I’m in the UK and only the US is served with the free version. The free version worked, just not with correct date formatting.
And you will need to delete any instances of the original OpenTable widget code you may’ve used… I found they conflicted.
antilimited,
thanks, but FYI their free version conflicts with the Enfold CSS. I tried it. Thanks for your input.
MonicaHi!
@mmcc can you please provide us the task number published to codeable?
Thanks a lotRegards,
BasilisHi!
seems you need to search for another widget/plugin with the functions you need.
Please let us know in a new ticket if you have some theme related questions only and we are happy to assist you.
Best regards,
AndyI have OpenTable in a few sites.
To use the default OpenTable styling you need to make sure you are using their supplied code with an iFrame.
With the iFrame you may have to use this code to change the container background coloriframe, object, embed { background-color: #ffffff; }If you turn off the iFrame then the widget will inherit the styling for the Main Content, Footer, ect you place it into.
By right clicking and selecting inspect you can see the element you can customize via CSS
As am example if you want to change the color of the text and button background while using the Button code from OpenTable you can use#ot-reservation-button { color: #ffffff!important; background-color: #000000!important; }Alternatively you can use 3rd party plugins as mentioned above to integrate. The one you linked to for $37 doesn’t seem like it does much you can’t do yourself, as it is very limited, that money can almost buy another Enfold license :)
At the end of the day, open table doesn’t really book on your website anything and always opens their site in a new tab so if you can’t get the date select option styled how you like, then revert to the button.
Hope that helps
- You must be logged in to reply to this topic.