X-Pr button issue: preview display is fine. Real browser display not working

Support
#1

Hi,

Having issues with creating a simple ‘Learn More’ style button.

Main issue is that the colour and border is not displaying in browser, whilst it looks fine whilst working in dev (within X-Pro) but not when viewing in a browser.

Have done the following troubleshooting:
Cleared caches (multiple times)
Used same browser AND also chrome
Checked Global CSS
Checked Button Preferences in Theme Settings
Changed between 3D and FLAT button styles to see if it makes a difference
Checked CSS within Page
Removed/re-added button shadows,
Made border very thick
Tried with and without rounded edges
etc…

Then tried putting class on button and creating border with CSS on-page (even changed class name to ensure no conflict)
Also tried creating button on a page with its no other content (except for header and footer)

Done all this but the button shows NO BORDERS or NO COLOUR BACKGROUND when tried.

Is there an issue with X-Pro and buttons.

Please help as it has taken hours to create one learn more button and I would rather create a button like this rather than do it the long-winded way as I want to do this on several pages also.

Thanks

#2

Hello @stuartmurphy,

Thank you for the detailed information. There’s no known issue on buttons. You have a lot of sites. Would you mind sharing the specific sites with this issue? Please share the exact page URL with button issue and if it will help, please also share admin credentials inside a secure note. Thank you.

#3

Hello Stuart,

Did you added some interaction with your button? Please be advised that you have a few options of interacting the button. Like a border, shadow or even background color. Would you mind providing us the url of your site with login credentials so we can take a closer look at your button settings?

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
​
Thank you.

#4

Hi RueNel,

Yes, there’s interaction. I sent the secure note earlier. It is visible on my forum display here (see above), Just for your information, having issues with SOME borders on other pages (currently working on contact form page and having similar problems. It’s a real headache because I can see it in Pro but not after publishing which is bizarre, What did help was putting TWO buttons next to each other and that seemed to help. This is very unusual.

#5

Hello Stuart,

You did give us the URL and the access of the page URL. We need your WP credentials so that we can check out how you set up your buttons and why the styling is not applying in the live view of the page.

Thank you in advance.

#6

Reply sent in Secure Note

#7

Hi,

I have managed to get it working by simply stripping out the formatting from the button (ie border information) and simply using Class and CSS to specify border width, type and colour. All I wanted was a solid border. Please can you try to add a button to a random place on the page (NOT next to a working button because it seems to work when you place TWO buttons side by side!!!.

I wouid be interested to learn why I have had this issue and why it works when using CSS but NOT when adding the border information on the button element details. It must be a bug/conflict somewhere because this is very strange.

Thanks.

#8

Hi Stuart,

I can see the issue default border and background color is not working on frontend. Only interaction border and background is showing. First there are errors on the page.

util.js:227 Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

Please try to disable google maps from ubermenu since you’re not using it. See this guide.
There are also this error on console:

cs-body.js?ver=3.5.4:1 MEJS media error. <mediaelementwrapper id=​"mejs_662155200123413">​<video class=​"x-mejs" poster preload=​"metadata" id=​"mejs_662155200123413_from_mejs" src=​"https:​/​/​vimeo.com/​333777433">​…​</video>​</mediaelementwrapper>​
e @ cs-body.js?ver=3.5.4:1
cs-body.js?ver=3.5.4:1 MEJS media error. TypeError: t.stopPropagation is not a function
    at e (cs-body.js?ver=3.5.4:1)
    at Object.e [as error] (cs-body.js?ver=3.5.4:1)
    at e.value (mediaelement-and-player.min.js?ver=4.2.6-78496d1:12)
    at Object.error (mediaelement-and-player.min.js?ver=4.2.6-78496d1:12)
    at new e (mediaelement-and-player.min.js?ver=4.2.6-78496d1:12)
    at e.value (mediaelement-and-player.min.js?ver=4.2.6-78496d1:12)
    at e.MediaElementPlayer.init (mediaelement-migrate.min.js?ver=5.2.2:1)
    at new e (mediaelement-and-player.min.js?ver=4.2.6-78496d1:12)
    at HTMLVideoElement.<anonymous> (mediaelement-and-player.min.js?ver=4.2.6-78496d1:12)
    at Function.each (jquery.js?ver=1.12.4-wp:2)
e @ cs-body.js?ver=3.5.4:1
cs-body.js?ver=3.5.4:1 Unable to render element TypeError: t.stopPropagation is not a function
    at e (cs-body.js?ver=3.5.4:1)
    at HTMLDivElement.debounceDelay (cs-body.js?ver=3.5.4:1)
    at cs-body.js?ver=3.5.4:1
    at cs-body.js?ver=3.5.4:1
    at cs-body.js?ver=3.5.4:1
    at Array.forEach (<anonymous>)
    at cs-body.js?ver=3.5.4:1
    at Array.forEach (<anonymous>)
    at e (cs-body.js?ver=3.5.4:1)
    at e (cs-body.js?ver=3.5.4:1) <div class=​"edb61bf3f-7249-4446-be03-56565d340b4d x-video x-video-player vimeo" data-x-element=​"x_mejs" data-x-params=​"{"poster":​""}​">​…​</div>​
(anonymous) @ cs-body.js?ver=3.5.4:1
util.js:227 Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

It was related to the video element. Can you try adding a poster image on video element. Try again after and let us know how it goes.

#9

Hi Lely,

That is possibly the most impressive answer I’ve ever seen. How on earth you worked that out is a complete mystery. I will for sure disable Google Maps API as it isn’t necessary on this site. Also will take your advice to add a poster element to the video on the final site. Remarkable and comprehensive answer. Thank you Lely. Thank you Themeco!!!

#10

You’re welcome Stuart!
We’re glad @Lely were able to help you out.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.