As Government employees you take great pride in all that you offer your staff and citizens and one of the easiest ways to share in that pride is in a common branding and experience.
Citizens are proud when they see the colors and logo of their local governments and most importantly they feel more comfortable when taking advantage of a service that just plain looks like their Government.
With that in mind we’ve created the ability for you to apply Global Themes to your forms so that you can more easily apply your branding and colors to your services. Instead of having to customize each form individually the Global Themes functionality will give the power to you as an admin to have more control over the look and feel of your services and your staff to stick to branding guidelines more easily.
To access your Global Themes you will log-in to your account and then click on your username in the top right and then on the drop down menu you will then click on Company. On that page you will see a series of tabs and one of those is Branding:
After you're on the Branding page you can then click on Create Form Theme and you will be taken to the page where you can add and save the Custom CSS as a theme to be applied to your forms.
From this window you can choose a custom name, copy and paste your Custom CSS and then even choose a category to save the theme under like General, Mobile and Embed styling. There is also a checkbox so that you can select to have this theme applied as the Platform Wide Default:
If you would like to apply the theme on an individual level you can go into the Editor any of your forms and then go to Settings --> Custom Form Styling and you'll be able to either apply a Custom CSS directly to that page or choose from one of the themes you've created.
For an example of two our themes out of the box, you can use this Custom CSS code in order to remove the Custom Letterhead from your form:
body { zoom: 1.05; position: absolute; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 16px !important; line-height: 20px !important; color: #333333 !important; } .item.control-group.tag-plugin-image_uploader img { zoom: 0.95 !important; } main#mainContent div, main#mainContent div p, main#mainContent div p span { color: #333 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } footer.client-footer.ng-scope { display: none; } .client-header { position: fixed; top: 0; left: 0; right: 0; background: #000; z-index: 1; height: auto; padding: 0; -webkit-box-shadow: none; box-shadow: none; } .client-header .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; width: auto; } .client-header .container:before, .client-header .container:after { display: none; } .client-header__bar { color: #fff; font-size: 14px; padding: 8px 0; width: 720px; margin: 0 auto; } .client-header__bar a, .client-header__bar strong { color: #fff; font-weight: 600; } .module_actions input[type=button].action_button:focus, .module_actions input[type=button].action_button:hover { box-shadow: none !important; -webkit-box-shadow: none !important; } /* ************** */ .l-document-masthead { display: none; } .pager.module_actions { position: initial; bottom: 0; right: 0; z-index: 150; width: auto; padding: 0px; } .l-document-content-area.public_mode.web { padding-left: 0!important; padding: 50px 30px 30px 50px!important; background-color: #f4f6f8!important; } .l-document-content-area.public_mode.web { background: white !important; } #web, body, .control-label, form.odoform fieldset.fieldset p.group_label { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 16px !important; line-height: 20px !important; color: #333333 !important; } form.odoform div.item:not(.unwrap-style), .wrapper.merged_double, .wrapper.merged_triple { box-shadow: none; padding: 0px !important; } #web input, #web select, #web textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 16px !important; line-height: 20px !important; } .inline_group_item label { font-size: 14px!important; } form.odoform { margin-bottom: 80px } #web select { background-position: calc(100% - 15px) !important; } form.odoform div.item[data-conditional=true] { overflow: visible; } #web textarea { box-shadow: 0 0 0 1px #858d94 !important; } .previous input { background-color: #fff!important; color: #212b35!important; -webkit-box-shadow: 0 0 0 1px #858d94; box-shadow: 0 0 0 1px #858d94; margin-bottom: 15px!important; } @media (max-width: 1100px) { .l-document-content-area.public_mode.web { padding: 45px 10px 25px !important; } .client-header { padding-left: 10px; padding-right: 10px; } .client-header__bar { width: auto; } .l-document-content-area.public_mode.web .fieldset .image_wrapper { margin-left: 5px !important; } } .l-document-content-area.public_mode.web { padding-left: 30px !important; padding-right: 30px !important } #embed_vimeo_iframe_div, #youtube_embed_iframe_div { position: relative; padding-bottom: 56.25%; height: 0; width: 100%!important; margin-left: 0px; margin-top: 0px; margin-bottom: -0px; } .video-responsive { width: 100%; } @media (max-width: 1100px) { #web .form_wrap_inner, #web .form_wrap_outer { max-width: 100%!important; } .client-header { padding-left: 30px; padding-right: 30px; } #embed_vimeo_iframe_div, #youtube_embed_iframe_div { position: relative; padding-bottom: 56.25%; height: 0; width: 100%!important; margin-left: 0px; margin-top: 0px; margin-bottom: -0px; } .video-responsive { width: 100%; } }
Then you can use this code to add Dark Mode to your forms:
@charset "UTF-8"; /* CSS Document */ /*Dark theme css*/ .l-document-content-area.public_mode.web { padding-left: 0 !important; padding: 50px 330px 30px 50px !important; background-color: #000000 !important; } input{ color: #FFFFFF; } .month:hover{ color:#ffffff; } .addthisevent_dropdown.active a:hover{ background-color: #313131 !important; color: #FFFFFF; } #web, body { font-family: -apple-system,BlinkMacSystemFont,San Francisco,Inter UI,sans-serif!important; padding: 0!important; font-size: 15px!important; color: #ffffff!important; text-align: center; background: #000000; } form.odoform div.item:not(.unwrap-style) { padding: 30px 30px 30px 30px; box-shadow: 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15); border-color: transparent; background-color: #474749; width: 100%!important; margin-bottom: 25px!important; border-radius: 3px; } .addon_modal__body .field [type=password], .addon_modal__body .field input[type=text], .editor_modal input[type=email], .editor_modal input[type=password], .editor_modal input[type=text], .editor_modal select, .inline_group.citystatezip select.citystatezip_state, form.odoform .uneditable-input, form.odoform input[type=color], form.odoform input[type=date], form.odoform input[type=datetime-local], form.odoform input[type=datetime], form.odoform input[type=email], form.odoform input[type=month], form.odoform input[type=number], form.odoform input[type=password], form.odoform input[type=search], form.odoform input[type=tel], form.odoform input[type=text], form.odoform input[type=time], form.odoform input[type=url], form.odoform input[type=week], form.odoform select { -webkit-box-shadow: 0 0 0 1px #858d94; box-shadow: 0 0 0 0px #858d94; } .l-document-content-area.public_mode.web { padding-left: 0!important; padding: 50px 330px 30px 50px!important; background-color: #000; } h1, h2, h3, h4, h5, h6 { font-weight: 700!important; letter-spacing: 0; margin: 0; margin-top: 0!important; padding: 0!important; border: 0!important; color: #ffffff!important; } .control-label { color: #ffffff!important; font-size: 15px!important; font-weight: 700!important; margin: 0 0 20px 0!important; float: none!important; line-height: 28px!important; } .control-label span{ color: #ffffff!important; } .file_stack_click, .file_stack_clear { border: none; color: #ffffff; text-decoration: underline; background-color: #474749; } .dynamic_fields .control-group { background-color: #474749 !important; } .addon_modal__body .field [type=password], .addon_modal__body .field input[type=text], .editor_modal input[type=email], .editor_modal input[type=text], .editor_modal input[type=password], .editor_modal select, .inline_group.citystatezip select.citystatezip_state, form.odoform .uneditable-input, form.odoform input[type=time], form.odoform input[type=week], form.odoform input[type=number], form.odoform input[type=email], form.odoform input[type=url], form.odoform input[type=search], form.odoform input[type=tel], form.odoform input[type=color], form.odoform input[type=text], form.odoform input[type=password], form.odoform input[type=datetime], form.odoform input[type=datetime-local], form.odoform input[type=date], form.odoform input[type=month], form.odoform select { display: inline-block; height: 50px!important; width: 100%; color: #FFFFFF; font-size: 15px; -webkit-box-shadow: 0 0 0 1px #222; box-shadow: 0 0 0 0px #222; border: 0!important; border-radius: 3px!important; background-color: #222; appearance: none!important; -webkit-appearance: none!important; -moz-appearance: none!important; -o-appearance: none!important; } #web textarea { font-family: -apple-system,BlinkMacSystemFont,San Francisco,Inter UI,sans-serif!important; width: 100%; padding-top: 15px!important; color: #FFFFFF; font-size: 15px!important; -webkit-box-shadow: 0 0 0 1px #c4cdd5!important; box-shadow: 0 0 0 0px #c4cdd5!important; border: 0; border-radius: 3px!important; background-color: #222; } .inline_group_item label { color: #ffffff!important; font-size: 12px!important; font-weight: 500!important; margin: 0 0 12px 0!important; line-height: 20px!important; text-align: left!important; } table#matrix_table th { color: none!important; text-align: left; font-size: 12px; padding-left: 0!important; font-weight: 700; } .canvas_sketch [id*=clear_btn], .goog-te-gadget-simple, .item.control-group.tag-input-file label, a.dynamicFields__createNewInput, input.btn.btn-primary.clear-signature { -webkit-appearance: none; display: block!important; position: static!important; -webkit-appearance: none!important; appearance: none!important; background-color: transparent!important; height: 55px!important; max-height: 55px!important; font-weight: 700!important; text-shadow: none!important; box-shadow: none!important; color: #fff!important; font-size: 15px!important; border: 1px solid #c4cdd5!important; width: 208px!important; -webkit-transition: all .4s ease!important; transition: all .1s ease!important; font-family: inherit!important; text-align: center; border-radius: 3px!important; text-decoration: none; float: left; text-align: center!important; cursor: pointer; margin-bottom: 0!important; } table#matrix_table th { color: #fff!important; text-align: left; font-size: 12px; padding-left: 0!important; font-weight: 700; } .l-document-content-area.public_mode.web { padding-left: 0!important; padding: 50px 330px 30px 50px!important; /* background-color: #f4f6f8!important; */ } .form-actions { padding: 19px 20px 20px; margin-top: 20px; margin-bottom: 20px; background-color: #f5f5f5; border-top: none; } .video-responsive { width: calc(110%); } input.btn.btn-primary.clear-signature { float: right; } .inline_group.citystatezip select.citystatezip_state:hover, form.odoform .uneditable-input:hover, form.odoform input[type="time"]:hover, form.odoform input[type="week"]:hover, form.odoform input[type="number"]:hover, form.odoform input[type="email"]:hover, form.odoform input[type="url"]:hover, form.odoform input[type="search"]:hover, form.odoform input[type="tel"]:hover, form.odoform input[type="color"]:hover, form.odoform input[type="text"]:hover, form.odoform input[type="password"]:hover, form.odoform input[type="datetime"]:hover, form.odoform input[type="datetime-local"]:hover, form.odoform input[type="date"]:hover, form.odoform input[type="month"]:hover, form.odoform select:hover { background: rgba(000,000,000,.14); } #web input::placeholder { color: #E9EBEC !important; } #web input::placeholder:hover { background-color: #CFCDCD; color: #E9EBEC !important; } .l-document-masthead { background-color: #474749; } form.odoform .switch{ background-color:#474749; } form.odoform .switch .switch-input:checked ~ .switch-label { background: #6d7a85; } form.odoform .switch .switch-label::after, form.odoform .switch .switch-label::before { color: #FFFFFF; text-shadow: none; font-size: 13px; text-transform: none; font-weight: 600; padding-left: 15px;background-color:none; } a { color: #fff; } .addthis_counter .addthis_button_expanded { display: block; background-repeat: no-repeat; background-position: 0 -40px; width: 50px; height: 33px; line-height: 33px; padding-bottom: 4px; margin-bottom: 3px; text-align: center; text-decoration: none; font-size: 1pc; font-weight: 700; color: #333; } input.action_button.primary:hover{ background-color: #000000 !important; box-shadow: 0 9px 32px -5px rgba(199,212,221,.41) !important; -webkit-box-shadow: 0 9px 32px -5px #c7d4dd !important; } .action_button.primary { background-color: #222 !important; } .addthisevent_dropdown.active { display: block; cursor: pointer; line-height: 110%; background: #333; text-decoration: none; font-size: 14px; font-weight: 100; color: #474749; padding: 5px -1px 0px 15px; border:1px solid #000; } .document-header--company-address p { margin-bottom: 12px; color: #FFFFFF; line-height: 20px; font-weight: 400; font-size: 13px; -webkit-font-smoothing: antialiased; } .addthisevent_dropdown span { display: block; line-height: 100%; background: #333; text-decoration: none; font-size: 14px; color: #CAC9C9; padding: 9px 10px 9px 40px; } .fieldset p{ color: #fff !important; } .addthisevent_dropdown span:hover { background: #333; color: #fff; } .addthisevent_dropdown span:hover { background-color: none !important;color: #333333 !important; } span.addthisevent_dropdown.active a:hover { background-color: #ffffff !important; color: #000000 !important; } .receipt_number-field { display: none; background-color: #333333 !important; box-shadow: none !important; padding-left: 15px !important; font-weight: 600; color: #CAC9C9 !important; margin-bottom: 15px !important; } #web textarea:focus, .addon_modal__body .field [type="password"]:focus, .addon_modal__body .field input[type="text"]:focus, .editor_modal input[type="email"]:focus, .editor_modal input[type="password"]:focus, .editor_modal input[type="text"]:focus, .editor_modal select:focus, .editor_modal textarea:focus, .inline_group.citystatezip select.citystatezip_state:focus, form.odoform .uneditable-input:focus, form.odoform input[type="color"]:focus, form.odoform input[type="date"]:focus, form.odoform input[type="datetime-local"]:focus, form.odoform input[type="datetime"]:focus, form.odoform input[type="email"]:focus, form.odoform input[type="month"]:focus, form.odoform input[type="number"]:focus, form.odoform input[type="password"]:focus, form.odoform input[type="search"]:focus, form.odoform input[type="tel"]:focus, form.odoform input[type="text"]:focus, form.odoform input[type="time"]:focus, form.odoform input[type="url"]:focus, form.odoform input[type="week"]:focus, form.odoform select:focus { border: none !important; box-shadow: none !important; outline: auto 5px -webkit-focus-ring-color; color: #CAC9C9; background-color: #333333 } .addthisevent_dropdown span{ background-color: #333333!important; } .addthisevent_dropdown span:hover { background-color: #333333 !important; color: #CAC9C9 !important; } .datepicker_jqui .days .week .day:hover { background: #ffffff; color: #000000; border: 1px solid #000000; } .datepicker_jqui { background-color: #333333; } .g-recaptcha + a { color: #ffffff; } .g-recaptcha + a:hover { opacity: .8; } .dynamic_fields .control-group input:hover { background-color: #333333 !important; color: #ffffff; opacity: .8; } .file_stack_click, .file_stack_clear { border: none; color: #ffffff; text-decoration: underline; } .autocomplete-select-list { position: absolute; background: #333333; box-shadow: #ccc 1px 1px 4px; padding: 5px; margin: 0; border: 1px solid #ccc; width: 80%; display: none; z-index: 999; color: #ffffff; }