This website uses cookies to personalize your experience. By using this website you agree to our cookie policy.

Form setting field Design

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #41487
    SalmanSalman
    Participant

    Hi
    Please help me to improve design and setting boxes sizes
    ==>Check the screenshort : https://prnt.sc/RBT1aWI2PIbZ

    1- How to adjust this box site edit color
    2- How to make this boxes design looking like box (1)
    (I mean Hight , and shapes also )

    #41496
    Ernest MarcinkoErnest Marcinko
    Keymaster

    Hi!

    Thank you for the details, it helps a lot!

    1. Most of it is hard coded, but you can still use custom CSS to get the colors:

    /* The Container */
    .asp_select2-selection,
    span[class*=asp_select2-selection],
    .asp_select2-search__field,
    .asp_select2-search__field::placeholder {
        background: red !important;
        color: white !important;
    }
    
    /* The selection */
    .asp_s span.asp_select2-container--flat ul li.asp_select2-selection__choice,
    .asp_sb span.asp_select2-container--flat ul li.asp_select2-selection__choice {
        color: white;
        background-color: #ff7272 !important;
        border: 1px solid #ff7272 !important;
    }
    
    /* Drop down general */
    span.asp_select2-container--open .asp_select2-dropdown--below,
    span.asp_select2-container--open .asp_select2-dropdown--above {
        background: #9c6a6a;
        color:#fff;
    }
    
    /* Drop down selected values */
    span.asp_select2-container--flat .asp_select2-results__option[aria-selected=true] {
        background: #b34949;
        color: #fff;
    }
    
    /* Drop down hovered selection */
    span.asp_select2-container--flat .asp_select2-results__option--highlighted[aria-selected] {
        background: #dc3737 !important;
        color: #fff;
    }

    2. You can change the button colors, margins, paddings etc.. under the frontend search settings panel: https://i.imgur.com/oqFbiII.png
    For a boxy design you can set the border radiuses to 0, as well as increase the paddings for bigger buttons.

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