Multiple buttons

Support
#1

Hi,
How can I create multiple button types in cornerstone to choose from?
Thanks!

#2

Hey,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

#3

Thanks! I’ve added a secure note above. I want a black button and a white button (black and white being the background colors). The URL is https://www.mobileod.s6.fcomet.com/wpmobile/wp-admin/post.php?post=40&action=edit and I’ve added the login in the secure note above.
Thanks!

#4

Hi There,

On Cornerstone add a button.

On the bottom of the buttom element you have a Style Box.

Please add the following CSS on each button

background: black; border-color: black; color: white

on the other

background: white; border-color: white; color black;

Hope it helps

#5

Thanks! To be more specific:

  1. On this page:http://www.mobileod.s6.fcomet.com/wpmobile/
    I want the buttons to have a border color: rgb(0, 168, 157) and background color white; with and interaction to have background color: rgb(0, 168, 157).

  2. On this page: http://www.mobileod.s6.fcomet.com/wpmobile/eva-for-colposcopy-2/
    I want the buttons to have a border-color: rgb(133, 57, 128) and background color white; with an interaction to have background-color: rgb(133, 57, 128).

  3. On the bottom of both pages I have a lead-to-salesforce form (different form for each page), that inherits the button styling from the main button of the website format. I would like that button to look the same as the above, correspondingly.

Could you please assist?

#6

Hi There,

In that case you need to declare a class for each button style that you need, you can write it on Theme Options > CSS. Say you want to have a class my-btn1 for your first button styling. Then you write that as:

.my-btn1 {
	/*some custom CSS property here*/
}

The properties that you need are the following:

color:
border-color:
background-color:

Just do the same for the hover state, but add a :hover pseudo-class to your selector.

e.g.

.my-btn1:hover {
	/*some custom CSS property here*/
}

Lastly apply the class that you just created to your button.

screenshot

Hope it helps,
Cheers!

#7

Thanks! I did that in the Theme Options-CSS, however when going to the buttons on the page they didn’t respond.

This is the CSS I put in:
.btn-sane1 {
color: white;
border-color: rgb(133, 57, 128);
background-color: rgb(133, 57, 128);
}

.btn-sane1:hover {
color: rgb(133, 57, 128);
border-color: rgb(133, 57, 128);
background-color: white;
}

Am I correct to assume that color is text color?

Thanks!

#8

Hi,

Yes, color is text color.

I checked and it seems to work on my end.

Hover state

Try to clear your browser cache and check again

Thanks

#9

Thanks! Indeed it works. However now I have another issue:
the style applies to all of the form I have embedded in the bottom, instead of just to the button in the form. Could you please assist?

Thanks!

#10

Hi,

Please provide a screenshot to clarify.

Thanks

#11

This is from the element on the bottom of the page (it is a shortcode referncing a lead-to-Salesforce form.
Thanks!

#12

Hi there,

The problem is originated from the Text Element which you add the form inside. On that element you added the btn-sane1 class which tries to apply whatever you intended for a button to the whole form:

Please kindly remove the class from there.

Thank you.

#13

Yeah, but if I do that then the button in the shortcode still shows in the original color, and I want it to be in the color of the btn-sane1 css.

#14

Hi,

You need to target the button only.

Please change your css code to this.

.btn-sane1 .w2linput.submit {
    color: white;
    border-color: rgb(133, 57, 128);
    background-color: rgb(133, 57, 128);
}

Hope that helps.

#15

Perfect, that did the trick!

#16

Glad it works now, cheers!