Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 14, 2020 at 11:31 am #1203529
    YourChoice Informatik GmbH

    Hi
    We implement a new website with Enfold.
    We also use your forms with date (calendar) fields.
    Unfortunately the styling is not so nice, the button “Vorangegangen” (previous) comes over the month dropdown.
    Is there a possibility to style the calendar, change the button texts etc.?
    Another question is if it is possible to change the icon of the blog posts list.
    See more information in the private content section.
    Thanks very much.
    Best regards
    Mike

    April 16, 2020 at 6:46 am #1204264
    Rikard

    Hey Michael,

    Sorry for the problem. Please try the following in Quick CSS under Enfold->General Styling:

    #top .avia-datepicker-div.ui-datepicker {
    width: 500px;
}

#top .avia-datepicker-div.ui-datepicker select.ui-datepicker-month {
    width: 30%;
}

select.ui-datepicker-month {
    margin-left: 60px;
}

select.ui-datepicker-year {
    margin-right: 60px;
}

    Best regards,
    Rikard

    April 16, 2020 at 3:07 pm #1204445
    YourChoice Informatik GmbH

    HI Rikard
    Thanks for your code.
    Now the datepicker is wider, but it is still not ok. See screenshot in the private content section.
    Best regards
    Mike

    April 16, 2020 at 3:08 pm #1204446
    YourChoice Informatik GmbH

    Hi Rikard
    And have you a solution for my second question, if it is possible to change the icon of the blog posts list?
    Thanks very much
    Best regards
    Mike

    April 24, 2020 at 9:42 am #1206756
    YourChoice Informatik GmbH

    Hi
    Already an idea how we have to style the calendar for that it looks fine?
    Thanks very much.
    Best regards
    Mike

    April 29, 2020 at 6:35 pm #1208246
    YourChoice Informatik GmbH

    Hi
    Any news here? With the code here, the calendar still does not look nice, see screenshot in the private content section.
    Do you have CSS code, which also fixes this problem top left?
    Thanks very much.
    Best regards
    Mike

    May 2, 2020 at 12:19 pm #1209087
    Mike

    Hi,
    Sorry for the late reply, this css fixes the left button and dropdown field of the calendar, please see the screenshot in Private Content area.
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    div.ui-datepicker .ui-datepicker-title select.ui-datepicker-month {
    margin-left: 40px !important; 
}
#top .avia-datepicker-div.ui-datepicker .ui-datepicker-prev {
	width: 90px !important; 
}

    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    May 2, 2020 at 6:31 pm #1209129
    YourChoice Informatik GmbH

    Hi Mike
    No problem. It works thanks.
    Is it also possible to have the month and the year field with the same size? I think now it looks a little bit strange,that the year field is smaller than the month field. See screenshot in the private content section.
    And is it possible to change the words in the calendar, i.e. “Vorangegangen”?
    Thanks very much.
    Best regards
    Mike

    May 2, 2020 at 10:31 pm #1209157
    Mike

    Hi,
    Please try this css instead:

    div.ui-datepicker .ui-datepicker-title select.ui-datepicker-month {
    margin-left: 40px !important; 
}
#top .avia-datepicker-div.ui-datepicker .ui-datepicker-prev,#top .avia-datepicker-div.ui-datepicker .ui-datepicker-next {
	width: 90px !important; 
}
#top .avia-datepicker-div.ui-datepicker select.ui-datepicker-year {
    width: 30% !important; 
    margin-right: 40px;
}

    To change the text “Vorangegangen” to “Previous” try this css:

    #top .avia-datepicker-div.ui-datepicker .ui-datepicker-prev span {
display: none !important;
}

#top .avia-datepicker-div.ui-datepicker .ui-datepicker-prev::before {
content: 'Previous' !important;
}

    Best regards,
    Mike

    May 3, 2020 at 9:59 am #1209245
    YourChoice Informatik GmbH

    Hi Mike
    It works. Thanks very much.
    You can close this issue.
    Best regards
    Mike

    May 3, 2020 at 12:54 pm #1209269
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Styling Form Calendar’ is closed to new replies.