Some buttons disappeared

Is it possible that you checked the option to use external CSS but then didn’t load any in there? Also, how are you getting the FooBox data attributes in there? It may be that FooBox is removing some bits of the button that need to be in there.

If FooBox is removed is the problem resolved or does it persist?

Any other details you find while troubleshooting would be helpful.

Just checked, and they’re broken in IE as well, so it must not be a browser issue.

OK, this is very strange, at least to me limited mental abilities. I just checked the code in FF, and saw a lot more than I used to see entered for the buttons. So, I swapped out the code:

• OLD CODE: OUR GIRLS & THEIR FAMILIES
• NEW CODE: <style type=”text/css”>div.maxbutton-2-container { } a.maxbutton-2 { text-decoration: none; color: #ffffff; font-family: Arial; font-size: 14px; font-style: normal; font-weight: bold; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; background-color: #ffcd05; background: linear-gradient(rgba(255, 205, 5, 1) 45%, rgba(255, 147, 5, 1)); background: -moz-linear-gradient(rgba(255, 205, 5, 1) 45%, rgba(255, 147, 5, 1)); background: -o-linear-gradient(rgba(255, 205, 5, 1) 45%, rgba(255, 147, 5, 1)); background: -webkit-gradient(linear, left top, left bottom, color-stop(.45, rgba(255, 205, 5, 1)), color-stop(1, rgba(255, 147, 5, 1))); border-style: solid; border-width: 1px; border-color: #ffcd05; box-sizing: border-box; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; text-shadow: 0px 0px 0px #8a8a8a; box-shadow: 0px 0px 0px #333333; -pie-background: linear-gradient(rgba(255, 205, 5, 1) 45%, rgba(255, 147, 5, 1)); position: relative; behavior: url(“https://starfish-impact.org/wp/wp-content/plugins/maxbuttons/pie/PIE.htc&#8221;); } a.maxbutton-2:visited { text-decoration: none; color: #ffffff; } a.maxbutton-2:hover { text-decoration: none; color: #ef4123; background-color: #ffcd05; background: linear-gradient(rgba(255, 205, 5, 1) 45%, rgba(255, 147, 5, 1)); background: -moz-linear-gradient(rgba(255, 205, 5, 1) 45%, rgba(255, 147, 5, 1)); background: -o-linear-gradient(rgba(255, 205, 5, 1) 45%, rgba(255, 147, 5, 1)); background: -webkit-gradient(linear, left top, left bottom, color-stop(.45, rgba(255, 205, 5, 1)), color-stop(1, rgba(255, 147, 5, 1))); border-color: #ffcd05; text-shadow: 0px 0px 0px #8a8a8a; box-shadow: 0px 0px 0px #333333; -pie-background: linear-gradient(rgba(255, 205, 5, 1) 45%, rgba(255, 147, 5, 1)); position: relative; behavior: url(“https://starfish-impact.org/wp/wp-content/plugins/maxbuttons/pie/PIE.htc&#8221;); }</style><div align=”center”><div class=”maxbutton-2-container”>OUR GIRLS & THEIR FAMILIES</div></div>

Suddenly, the buttons on the “Our Impact” page started working again with this full code. But, what’s weird, is I then went to edit the “Our Mission” page and correct those buttons, but checked the live version first and without changing any code, the buttons were working once more. Not sure what changed, but something worked!

Glad to be back up and running, and thanks for your help and quick reply, John!

Sorry, the code properly is here:

OLD CODE: <a class="maxbutton-2" href="#story" target="foobox" data-width="1280" data-height="900">OUR STORY</a>

NEW CODE: <style type="text/css">div.maxbutton-2-container { } a.maxbutton-2 { text-decoration: none; color: #ffffff; font-family: Arial; font-size: 14px; font-style: normal; font-weight: bold; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; background-color: #ffcd05; background: linear-gradient(rgba(255, 205, 5, 1) 45%, rgba(255, 147, 5, 1)); background: -moz-linear-gradient(rgba(255, 205, 5, 1) 45%, rgba(255, 147, 5, 1)); background: -o-linear-gradient(rgba(255, 205, 5, 1) 45%, rgba(255, 147, 5, 1)); background: -webkit-gradient(linear, left top, left bottom, color-stop(.45, rgba(255, 205, 5, 1)), color-stop(1, rgba(255, 147, 5, 1))); border-style: solid; border-width: 1px; border-color: #ffcd05; box-sizing: border-box; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; text-shadow: 0px 0px 0px #8a8a8a; box-shadow: 0px 0px 0px #333333; -pie-background: linear-gradient(rgba(255, 205, 5, 1) 45%, rgba(255, 147, 5, 1)); position: relative; behavior: url("https://starfish-impact.org/wp/wp-content/plugins/maxbuttons/pie/PIE.htc"); } a.maxbutton-2:visited { text-decoration: none; color: #ffffff; } a.maxbutton-2:hover { text-decoration: none; color: #ef4123; background-color: #ffcd05; background: linear-gradient(rgba(255, 205, 5, 1) 45%, rgba(255, 147, 5, 1)); background: -moz-linear-gradient(rgba(255, 205, 5, 1) 45%, rgba(255, 147, 5, 1)); background: -o-linear-gradient(rgba(255, 205, 5, 1) 45%, rgba(255, 147, 5, 1)); background: -webkit-gradient(linear, left top, left bottom, color-stop(.45, rgba(255, 205, 5, 1)), color-stop(1, rgba(255, 147, 5, 1))); border-color: #ffcd05; text-shadow: 0px 0px 0px #8a8a8a; box-shadow: 0px 0px 0px #333333; -pie-background: linear-gradient(rgba(255, 205, 5, 1) 45%, rgba(255, 147, 5, 1)); position: relative; behavior: url("https://starfish-impact.org/wp/wp-content/plugins/maxbuttons/pie/PIE.htc"); }</style><div align="center"><div class="maxbutton-2-container"><a class="maxbutton-2" href="#our_girls" target="foobox" data-width="1280" data-height="900">OUR GIRLS & THEIR FAMILIES</a></div></div>

So, to answer your question, John, I don’t think FooBox was the culprit.

The one thing I can think of is last night, before making any changes, I migrated the site from my host, under InMotion Hosting, to the Starfish host, GoDaddy. Then, I made those button changes this morning, and things broke. So, perhaps GoDaddy somehow changes things? Not sure, but I can see that the code for the other buttons (that did not break, and that I did not make any changes to) suddenly have the longer source code rather than the short one listed above. Strange, to my mind.

It could of been that it got stripped out in the move. Did you do a full database import on the new site or was it an XML export/import from the original WordPress installation?

No, I did a full database import, using the interconnect.it search and replace script to alter urls in the database.

What’s weird is again GoDaddy’s WP seems to alter some code when working on a page – even if I haven’t touched that code. Very strange, but all seems to be working now. I don’t think in the end it is an issue at all with MaxButtons, but rather something else squirrely going on.

From my experience, though, using the plguin, it might be good to have a brief section in the FAQ or documentation about how to add buttons without shortcode, i.e., just using CSS/html, as I had to do to make them function with foobox. But, great plugin – thank you!