Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 13, 2017 at 8:34 am #863781
    Luke1712

    Hi, im using the Datepicker for a kind of hotel reservation. Its for a german site an the translation of the buttons to get to the next or the month before are not very good. The client asked, if we can chance the Text to simple arrows. Is this possible?

    • This topic was modified 7 years, 1 month ago by Luke1712.
    October 16, 2017 at 6:19 am #864660
    Ismael

    Hey Luke1712,

    Thank you for using Enfold.

    That should be possible. Please provide a link to the page so that we can inspect it.

    Best regards,
    Ismael

    October 16, 2017 at 8:35 am #864701
    Luke1712
    This reply has been marked as private.
    October 17, 2017 at 5:32 am #865108
    Ismael

    Hi,

    Thank you for the update. Please use the following css code. You

    #top .avia-datepicker-div.ui-datepicker .ui-datepicker-prev span, #top .avia-datepicker-div.ui-datepicker .ui-datepicker-next span {
    color: transparent;
}

a.ui-datepicker-prev.ui-corner-all:before {
    content: '<<';
    display: block;
}

a.ui-datepicker-next.ui-corner-all:before {
    content: '>>';
    display: block;
}

    You can change the value of the content property with an image or a font icon.

    Best regards,
    Ismael

    December 27, 2017 at 12:18 pm #892149
    Jannis

    Great idea from Ismael to change it via CSS content. I would just slightly alter the first part from

    #top .avia-datepicker-div.ui-datepicker .ui-datepicker-prev span, #top .avia-datepicker-div.ui-datepicker .ui-datepicker-next span {
    color: transparent;
}

    to 

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

    otherwise if you click fast through the months you see the text flash a bit. With display none its definitely invisible.

    This works for me.

    December 27, 2017 at 9:57 pm #892248
    Victoria

    Hi Jannis,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    November 2, 2020 at 7:03 pm #1257673
    xxtita

    Update:
    use this

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

a.ui-datepicker-prev.ui-corner-all:before {
    content: '\003c \003c';
    display: block;
}

a.ui-datepicker-next.ui-corner-all:before {
    content: '\003e \003e';
    display: block;
}
    November 2, 2020 at 11:26 pm #1257765
    Victoria

    Hi xxtita,

    Thank you for sharing! :)

    Best regards,
    Victoria

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.