[SchwinkParticipant]

Hi there,

I was wondering if its possible to create buttons in Cornerstone that have a gradient rather than a single solid color. I don’t mean a 3D button. Would this be something I would have to create with custom css? If so.. any clues?

Thanks in advance!

[JoaoModerator]

Hi There,

Yes that is possible.

You need to assign a class to your button on Cornerstone for example: my-class.

Than after add the following code to Appereance Customizer Custom CSS and adjust the values according to your wishes.

a.x-btn.my-class {
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#4878af’, endColorstr=’#0f0f47′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#4878af), to(#0f0f47)); /* for webkit browsers */
background: -moz-linear-gradient(top, #4878af, #0f0f47); /* for firefox 3.6+ */
background: linear-gradient(to bottom, #4878af 0%,#0f0f47 100%);
border: 0;
box-shadow: none;
}
a.x-btn.my-class:hover {
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’red’, endColorstr=’#0f0f47′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(red), to(#0f0f47)); /* for webkit browsers */
background: -moz-linear-gradient(top, red, #0f0f47); /* for firefox 3.6+ */
background: linear-gradient(to bottom, red 0%,#0f0f47 100%);
border: 0;
box-shadow: none;
}

if you assign a different class from my-class you also need to change that on the CSS code.

Hope it helps

Joao

[SchwinkParticipant]

Wow! Thanks heaps! that’s amazing.
appreciate the help.

So with the above custom code in mind, if I wanted to implement a drop shadow on any box element, I would follow the same procedure as above.. Create a class with box-shadow:2px 2px 25px rgba (0, 0, 0, 0, 0.1333) for e.g?

[FriechModerator]

Yes, that is correct and that is how the class supposed to work. Should you require any further assistance with X|THEME and Cornerstone, please feel free to get in touch with us.

Cheers!

[Author]

Posts