Docs

[jensmith3]

Hello,

My site is on the temporary url of http://103.37.8.129/~thekidsa/

I would like to set up a custom class for a button and have added the following css to my child’s theme stylesheet.

.custom-btn1 {
font-family: ‘Shadows Into Light Two’, cursive !important;
font-size: 34px;
font-color: #FFF
color: #EB7921;
border-color: #EB7921;
background-color: #EB7921;
-webkit-box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
}

.custom-btn1:hover {
color: #ffffff;
border-color: #600900;
background-color: #ef2201;
-webkit-box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
}

I am tinkering with colours but just want to get the code right. I’d also like to centre the text in the middle of the button.

Can you let me know where I’m going wrong?

With thanks and kind regards,

Jenny

[jensmith3]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! Please edit back again your page and remove the inline css min-height:160px;. If you want to make it bigger, you need to adjust the top and bottom padding. You may have a css like this:

.custom-btn1 {
   font-family: 'Shadows Into Light Two', cursive !important;
   font-size: 34px;
   font-color: #FFF;

   padding-top: 30px;
   padding-bottom: 30px;

   color: #EB7921;
   border-color: #EB7921;
   background-color: #EB7921;
   -webkit-box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
   box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
}

.custom-btn1:hover {
   color: #fff;
   border-color: #600900;
   background-color: #ef2201;
   -webkit-box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
   box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
}

http://prntscr.com/bx4aea

hope this helps.

[jensmith3]

Hello there,

Thanks so much. Can I clarify which css changes what as I have tinkered with the colours but it doesn’t change them.

color: (should change ?)
border-color: (border colour of non-hover state)
background-color: (colour of the button itself)

Many thanks again and kind regards,

Jenny

[Christopher]

Hi there,

Please update your code to :

body .custom-btn1 {
    font-family: 'Shadows Into Light Two', cursive !important;
    font-size: 34px;
    padding-top: 30px;
    padding-bottom: 30px;
    color: #4355A1;
    border-color: #EB7921;
    background-color: #4355A1;
    -webkit-box-shadow: 0 0.25em 0 0 #4355A1, 0 4px 9px rgba(0, 0, 0, 0.75);
    box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
}

Hope it helps.

[jensmith3]

Hello again,

Thanks for your reply. Can you tell me which css changes the shadow? I tried to change it to #4355A1 without success.

Also I assume I add additional css for the hover state?

Many thanks again and kind regards,

Jenny

[Christopher]

Hi there,

You should change change both #4355A1 and rgba(0, 0, 0, 0.75) in following code :

 -webkit-box-shadow: 0 0.25em 0 0 #4355A1, 0 4px 9px rgba(0, 0, 0, 0.75);
    box-shadow: 0 0.25em 0 0 #4355A1, 0 4px 9px rgba(0, 0, 0, 0.75);

For hover state, add this code :

body .custom-btn1:hover {
   color: #fff;
   border-color: #600900;
   background-color: #ef2201;
   -webkit-box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
   box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
}

Hope it helps.

[jensmith3]

Hello again,

Thank you. I’ve done that but still showing as red.

Really appreciate your help and patience.

Kind regards,

Jenny

[Christopher]

Hi,

Please update your code to :

body .custom-btn1 {
    font-family: 'Shadows Into Light Two', cursive !important;
    font-size: 34px;
    padding-top: 30px;
    padding-bottom: 30px;
    color: #fff;
    border-color: #4355A1;
    background-color: #C0D554;
    -webkit-box-shadow: 0 0.25em 0 0 #4355A1, 0 4px 9px rgba(67, 85, 161, 0.75) !important;
    box-shadow: 0 0.25em 0 0 #4355A1, 0 4px 9px rgba(67, 85, 161, 0.75) !important;
}

Thanks.

[Thai]

Hi Jenny,

Please update your custom CSS to this:

body .x-btn.x-btn-real.custom-btn1 {
    font-family: 'Shadows Into Light Two', cursive !important;
    font-size: 34px;
    padding-top: 30px;
    padding-bottom: 30px;
    color: #fff;
    border-color: #4355A1;
    background-color: #C0D554;
    -webkit-box-shadow: 0 0.25em 0 0 #4355A1, 0 4px 9px rgba(67, 85, 161, 0.75);
    box-shadow: 0 0.25em 0 0 #4355A1, 0 4px 9px rgba(67, 85, 161, 0.75);
}

Hope it helps 🙂

[jensmith3]

Thank you once again. That seems to have done the trick. I’ll now just add the hover css and tinker around with the colours.

Can I ask how do I reduce the shadow?

Many thanks and kind regards,

Jenny

[Nico]

Hi There,

You could try changing the values of your CSS above. For example.

-webkit-box-shadow: 0 1px 0 0 #4355A1, 0 1px 3px rgba(67, 85, 161, 0.75);
    box-shadow: 0 1px 0 0 #4355A1, 0 1px 3px rgba(67, 85, 161, 0.75);

Hope it helps.

let us know how it goes.

THanks.

[Author]

Posts