Docs

[renutrition]

Hey there!

I’m working on triggering a SumoMe click trigger with a button in X. I have gotten in touch with their support team and they directed me back to you guys because when I input the class into cornerstone, it adds “x-btn-x-large” to the end of the sumome class.

So. I need to figure out how to navigate this – they said that the form won’t work unless the class is on its own.

Here is the code for the button upon inspection in Chrome:

<a class="x-btn sumome-listbuilder-id-ec76e31b-245f-4172-bd95-8e14daaf6724 x-btn-x-large" href="#" data-options="thumbnail: ''" data-sumome-listbuilder-id="ec76e31b-245f-4172-bd95-8e14daaf6724 x-btn-x-large" data-sumome-trigger="true">JOIN THE WAIT LIST</a>

And the class code from sumome is: sumome-listbuilder-id-ec76e31b-245f-4172-bd95-8e14daaf6724

Any help with this would be much appreciated! I have been working on figuring this out for weeks argh!

My URL is renutrition.com

Thank you in advance!

Stephen

[Darshana]

Hi there,

Thanks for writing in! You may try using this 3rd party plugin for Cornerstone (http://cornerstonelibrary.com/elements/modal/).

Thanks!

[renutrition]

Hey Darshana,

So I downloaded and tried using the modal plugin (which is pretty cool in it’s own right, and I will for sure use for other things!) but unfortunately it is not going to fix the issue.

Let me ask you a different question to see if we can figure it out this way.

If I have this code:

<a data-sumome-listbuilder-id="ec76e31b-245f-4172-bd95-8e14daaf6724">JOIN THE WAIT LIST</a>

(which, when I plug it into a Raw Content element in cornerstone gives me a link that works, yay) can I format that link to look like a button on my site?! If so, how would I go about doing that? I would like it to look like the button right above it on the page renutrition.com/gettested

Thanks!

[renutrition]

or this code:

<button data-sumome-listbuilder-id="ec76e31b-245f-4172-bd95-8e14daaf6724">JOIN THE WAIT LIST</button>

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.x-raw-content button:hover {
    color: #8dc863;
    background-color: #fff;
    border: 1px solid #8dc863 !IMPORTANT;
}
.x-raw-content button {
    color: hsl(0,0%,100%);
    border: 1px solid #8dc863 !IMPORTANT;
    background-color: #8dc863;
    text-shadow: none;
    border-radius: 0.25em;
    padding: 0.563em 1.125em 0.813em;
    border: none;
    font-size: 21px;
font-weight: bold;
    -webkit-transition: color 0.3s ease,background-color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease;
    transition: color 0.3s ease,background-color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease;
}

Hope that helps.

[renutrition]

Awesome, that looks great!! Thanks Christopher!

Last question. Is there a way to change the styling of individual raw-content buttons? Or is it going to be a global raw-content button style?

[Joao]

Hi There,

You can add a different class to your buttons, for example : myclass and use the folowing code:

.x-raw-content button.myclass {

/* your customizations go here */
}

Hope that helps

Joao

[renutrition]

Beautiful. Thanks Joao!

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[crushday]

I have the same issue. What will this custom code do to other buttons?

[Christopher]

Hi there,

It affects on button with the class my-class. If you need further assist, kindly open a new tread, provide us with URL and let us know what you’re trying to achieve.

Hope it helps.

[Author]

Posts