-
lasciarrinoAsked on February 10, 2025 at 10:24 AM
On my form https://form.jotform.com/250366599041158 I'm trying to update the font color of the Time Properties AM and PM and all the text for the Short Scrollable Terms Widget to #005875. What would be the correct code for this and were to insert it? Thank you.
Page URL: https://form.jotform.com/250366599041158 -
Jefferson JotForm SupportReplied on February 10, 2025 at 3:30 PM
Hi Lindsey,
Thanks for reaching out to Jotform Support. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.
In the meantime, reach out again if you have any other questions.
-
Jefferson JotForm SupportReplied on February 11, 2025 at 4:38 AM
Hi Lindsey,
You can update the font color of the Time Properties AM and PM and the text for the Short Scrollable Terms Widget using custom CSS. Here's how to do it:
1. First, copy this code:
.form-all {
border-radius : 6px;
box-shadow : 0 0 32px rgba(42, 42, 42, 0.1);
}
.form-header-group.header-small {
background-color : #FA8239;
padding : 0 !important;
border-radius : 6px 6px 0 0;
}
.form-header-group.header-small h3 {
text-transform : uppercase;
font-size : 30px;
font-weight : 300;
text-align : left;
padding-left : 48px;
color : #fff;
}
.form-header-group.header-small .form-subHeader {
color : #fff;
text-align : left;
font-weight : 600;
padding-left : 48px;
font-size : 20px;
opacity : 0.6;
}
.form-header-group.hasImage.header-small {
flex-direction : row !important;
}
.header-logo img {
vertical-align : bottom;
}
@media screen and (max-width: 560px){
.form-header-group.header-small h3 {
font-size : 24px;
line-height : 28px;
padding-left : 20px;
}
.form-header-group.header-small .form-subHeader {
font-size : 14px;
padding-left : 20px;
}
}
@media screen and (max-width: 380px){
.form-header-group.header-small h3 {
font-size : 16px;
line-height : 20px;
padding-right : 6px;
}
.form-header-group.header-small .form-subHeader {
font-size : 11px;
}
}
.form-header-group.header-small {
overflow : hidden;
border-radius : 4px 4px 0 0;
margin : 0 -38px;
}
.form-dropdown{
color: #005875 !important;
}
#input_58 {
color: #005875 !important;
}
#input_55_timeInput,
#input_55_ampm {
color: #005875 !important;
}
#input_55_ampm option {
color: #005875 !important;
}
2. In Form Builder, click on the Paint Roller icon on the right side of the page.
3. Click on the Styles tab on the right side of the page.
4. Scroll down and look for the Inject Custom CSS text area and replace the code.
Next, we need to change the CSS code of the Short Scrollable Terms widget. Here's how to do it:
1. First, copy this code:
body {
color: #005875 !important;
}
p, span, div, a {
color: #005875 !important;
}
2. In Form Builder, click on the wand icon on the right side of the Short Scrollable Terms widget.
3. Click on the Custom CSS tab on the right side of the Widget Settings window.
4. Paste the code in the text area and click on the Update button.
Here's the sample output:
We also have a guide about How to Inject Custom CSS Codes that you can check out.
Give it a try and reach out again if you have any other questions.
