Text Resizer widget: Change button color and button size.

Must be via CSS somehow

Yes, that is correct. Since there is no option in the widget's properties to set the button color and the size of the button, we can only do it with the help of CSS codes.

In the Form Designer, under CSS tab's Inject Custom CSS, please add the following CSS codes.

/*set button color and button size*/

#decfont, #incfont {

    background: green !important;

    width: 60px !important;

    height: 60px !important;

}

/*distance between decrement and increment buttons*/

#incfont {

    left: 68px !important;

}

I hope this helps. Please feel free to let us know if you need any further assistance and we will be glad to help you.

Thank you.

Thanks...Did 30 x 20...Font?...A- unchanged

??

Please try this CSS codes instead.

#decfont, #incfont {

    padding: 26px 0px !important;

    margin-left: 4px !important;

    width: 60px !important;

    height: 60px !important;

  background: green !important;

}

#decfont {

    left: -12px !important;

}

Example output:

You can adjust the numbers in px as needed.

This is what it looks like now

with...

#decfont, #incfont {

    padding: 26px 0px !important;

    margin-left: 4px !important;

    width: 30px !important;

    height: 20px !important;

  background: green !important;

}

#decfont {

    left: -12px !important;

}

##############################

##############################

I still need smaller ..

   now  w=30 h=20 ??? 

https://form.jotform.us/70435198618160

I've modified the CSS, just play around with the padding until you get your desired output.

#decfont, #incfont {

    padding: 10px 30px 10px 15px !important;

    background: green !important;

    font-size: 13px !important;

}

Now got this... But... How to resize the bottons

also cant'align CENTER ?

#decfont, #incfont {

    padding: 5px 15px  5px 8px !important;

    background: #aaaacc !important;

    font-size: 13px !important;

}

You can resize the buttons with the following code:

#incfont {

    margin-left: 50px !important;

}

#decfont, #incfont {

    width: 80px !important;

    height: 80px !important;

}

#id_11 {

    left: 36% !important;

    width: 200px !important;

}

Result:

Let us know if you need more help.

Thanyou all............Bob