Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #863781

    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 3 years, 8 months ago by  Luke1712.
    #864660

    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

    #864701
    This reply has been marked as private.
    #865108

    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

    #892149

    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.

    #892248

    Hi Jannis,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1257673

    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;
    }
    #1257765

    Hi xxtita,

    Thank you for sharing! :)

    Best regards,
    Victoria

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.