Styling Date Picker and Checkbox

  • Resolved jterryc

    (@jterryc)


    11 months ago

    I am in the process of creating a simple form to define details of a group meeting. The form is set up with the Forminator (free) Design Style set to None so that the styling can be set by my theme – a simple child theme of GeneratePress where the only other customisation is to set the site text fonts and minor formatting of the Navigation menu.

    The form has several Date Pickers but, when activated, they display the calendar with a transparent background which makes them rather difficult to read with the other form elements showing through.

    Can you provide me with the correct CSS syntax to style the Date Pickers so that the calendar has an opaque background ? Note that using the field Styling option to add CSS does not work for me, and the necessary styling is added in the style.css file of my child theme.

    I would also like to have the CSS selectors to set the size of the Date Picker input textbox, and to style an associated Checkbox (spacing and text label).

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Kris – WPMU DEV Support

    (@wpmudevsupport13)

    Hi @jterryc

    I hope you are doing well today.

    In the first place please note we have small bug in core and all fields labels uses the label tag. Bug is that label for checkboxes uses h4 tag. That is why I shared with you code for h4 as well to reset font. Of course, double check in your theme css how h4 tag is styled to reset it more. Rest of CSS is an example, like display:block; so that each checkbox could be in a separate row

    .forminator-ui .forminator-field-checkbox h4 {font-size:inherit; font-weight:normal;}
.forminator-ui .forminator-field-checkbox label.forminator-checkbox {display:block; margin:0 0 10px 0;}
.forminator-ui .forminator-field-checkbox label.forminator-checkbox span {padding:0 0 0 5px;}

    Here is the code for calendar:

    .forminator-ui .forminator-field-date label {}
.forminator-ui .forminator-field-date  .forminator-datepicker {width:250px !important; margin:0 0 0 10px;}


.ui-datepicker-header .ui-datepicker-prev {width:50%; float:left;}
.ui-datepicker-header .ui-datepicker-next {width:50%; float:right;}
.ui-datepicker-header .ui-datepicker-next span {float:right;}
.ui-datepicker-header .ui-datepicker-title {}
.ui-datepicker-header .ui-datepicker-title select {width:50%;}
.ui-datepicker-calendar {background:#f5f5f5; width:250px; border:1px solid #aaa;}
.ui-datepicker-calendar th {background:#aaa; padding:5px;text-align:center;}
.ui-datepicker-calendar td {padding:5px;text-align:center;}
.ui-datepicker-calendar td .ui-state-active {background:#f00; color:#fff; display:block; text-align:center;}

    As mentioned above, this is example code and you should modify that.

    Kind Regards,
    Kris

    Thread Starter jterryc

    (@jterryc)

    Hi Kris,

    Many thanks for the prompt response. The CSS you provided worked very well with only a couple of minor tweaks to get all of the form fields aligned as I wanted them –

    .forminator-ui .forminator-field-checkbox label.forminator-checkbox {
    display:inline-block;
    margin-left: 200px;
    text-align: right;
    }
    .forminator-ui .forminator-field-date .forminator-datepicker {
    width:120px !important;
    }

    Excellent service as usual.

    Best regards,
    Terry

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Styling Date Picker and Checkbox’ is closed to new replies.