Button Integration with Fare Harbor

Ok Great, so this is a good start. There is now indeed a working button. Its style is different from the buttons I currently have on the page. Is there a way to make it a centered light transparent button like the site currently has?

See the Fat Bike Section for the comparison.

Ok, so this 99% worked. It just isn’t aligning center for some reason.

And then is there a way to get the same integration with the Enfold main menu?

I tried adding the link as the URL and setting attributes to:
onclick=”FH.open({ shortname: ‘cbstadventures’, view: { item: 16545 }, fullItems: ‘yes’ }); return false;

It almost worked but doesn’t pull up the lightbox.

Ya I would stop recommending that plugin, it breaks the drop downs and hasn’t been updated for the latest versions of wordpress. It is garbage. I found a solution that doesnt achieve this but works as well.

Any reason why the avia-position-center wouldnt be working?

Hey guys, rebuilding this site and I need the same thing done but am running into CSS Class issues. I am trying to get the link to show up as a full-width button this time instead of the avia light button.

Previous Code:
<a href="https://fareharbor.com/cbstadventures/items/24543/" target="_blank">Book now!</a>

Now I am needing the CSS portion to match the blue Book Now button on the page linked in private section. I tried a few things but its not working:

Custom: avia_button_background avia-button avia-button-fullwidth avia-color-custom
Blue: avia_button_background avia-button avia-button-fullwidth avia-color-blue

Both cause super bizzare issues. Not sure what I am missing.

• This reply was modified 7 years, 11 months ago by Overhaulics.

I edited the test page to help explain. Something about putting the shortcode in that section breaks it and turns the entire column into a button. The button is also transparent to begin… Very hard to explain which is why I figured I would try showing.

Ok, so this fixed the center button in the test page. That button is now perfect and does exactly what I need it to do. I tried replicating this for another page (in private content) using this shortcode and don’t think I quite got it right since it isn’t working.

flex_column av_one_fourth.no_margin.flex_column_div.avia-builder-el-9.el_after_av_three_fourth.el_before_av_one_full .avia_button_background {
opacity: 1 !important;
height: 70px;
}

The button is right above the contact us button. Almost have this figured out and working, thanks so much for the ongoing effort.

• This reply was modified 7 years, 11 months ago by Overhaulics.

Awesome Awesome Awesome! Got the button working which is the important part.

I am using .avia_button_background avia-button avia-button-fullwidth avia-color-blue as the class on the link currently. Ideally I would want to use the darker blue #2d5c88 but I am unsure how to apply that to the class and failed through CSS.

.avia_button_background avia-button avia-button-fullwidth avia-color-blue {
background-color: #2d5c88 !important;
}

Any ideas?

Oh, I am just using the standard blue button preset color for the full-width button class but you can set custom colors on full-width buttons. How would I change the color to a custom color. Does the class change or do I use CSS?

On my test page take a look at the left button, uses different class but the color isnt defined in the class alone.

.avia_button_background avia-button avia-button-fullwidth avia-color-blue

vs

.avia_button_background avia-button avia-button-fullwidth avia-color-custom

Thank you! You guys have by far the best support of the 5 themes I have used.