Okay
  Public Ticket #3837495
css customization
Closed

Comments

  •  7
    Francesco started the conversation

    Hi,

    I would like to make some CSS modifications to the attached registration form. Specifically, I would like to customize the styles of the form fields (e.g., borders and height) and adjust the styling of the paragraphs.

    Could you please provide the appropriate CSS classes or selectors I need to target in order to make these changes? Any guidance on customizing the form layout or specific elements would be greatly appreciated.

    Thank you in advance for your assistance.

    Best regards,

    Francesco

    Attached files:  Immagine WhatsApp 2025-03-13 ore 11.52.28_9de6fe3e.jpg

  •  2,361
    WebWizards replied

    Hello Francesco,

    Thank you for purchasing our plugin,

     

    Certainly, I'd be happy to try write some CSS to make that form display better and more in tune with the rest of the theme.

    I looked into it now on your site at https://www.kitchenselite.com/mio-account/ 

    In my opinion the current input fields such as the ones for login also need a border because the grey is very similar to the background (at least they appear very similar on my monitor).

    9705953226.png

     

    I wrote the following CSS:

    .b2bking_logged_out.woocommerce-account input.input-text, .b2bking_logged_out.woocommerce-account select {
        border: 1px solid #d6d6d6 !important;
    }
    .b2bking_custom_registration_field {
        height: 46px !important;
        background: #f8f8f8 !important;
        font-size: 15px !important;
        border: 1px solid #d6d6d6 !important;
        padding: 0px 11px;
        margin-bottom: 17px !important;
    }
    .b2bking_custom_registration_container label {
        margin-bottom: 1px !important;
    }
    .b2bking_logged_out.woocommerce-account select#b2bking_custom_field_78 {
        border: 0px !important;
    }
    .b2bking_logged_out.woocommerce-account select#billing_state {
        border: 0px !important;
    }

     

    When adding it to my local browser, I see:

    4368025615.png

    2054999604.png

     

    This can be added to any area that supports CSS, usually to Appearance -> Customize -> Additional CSS / Extra CSS.

     

    Kind regards,

    Stefan

     

  •  7
    Francesco replied

    hi Stefan

    excellent. thank you.
    i just started this new site...i think i will bother you sometime :)

    regards