Make labels light

  • Resolved davidzapp

    (@davidzapp)


    6 years, 6 months ago

    Hey guys,

    I am a css newbie and I put together some css codes, to create the form I want (see link above). There is just one issue, that I could not solve: How do I get my labels lighter? I succeeded with the submit button, which is already light, but the labels do not show any reaction. Maybe someone of you can help me to modify my code. Thanks a lot!

    Kind regards,
    David

    Here is my code:

    /* Contact Form 7 Submit Button
    —————————-*/
    .wpcf7 input[type=”submit”] {
    color: #999999;
    font-family: “Raleway”, sans-serif;
    font-size: 13px;
    background: transparent;
    border: 1px solid #999999;
    }

    /* Contact Form 7 Submit Button Hover
    —————————-*/
    input.wpcf7-form-control.wpcf7-submit:hover {
    background-color: #5FB404 !important;
    color: white
    !important;
    border: 1px solid #5FB404;
    }

    /* Contact Form 7 Font Labels
    —————————-*/
    .wpcf7-form label {
    font-size: 13px !important;
    color: #999999;
    }

    /* Contact Form 7 Fields
    —————————*/
    .wpcf7 input[type=”text”],
    .wpcf7 input[type=”email”],
    .wpcf7 input[type=”tel”],
    textarea {
    font-size: 16px;
    background-color: transparent !important;
    border: none;
    width: 95%;
    }

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Neil Murray

    (@buzztone)

    6 years, 6 months ago

    See Styling Contact Form.

    Abbreviated Version

    1. You need basic HTML & CSS skills
    2. You need to know how to use Chrome Dev Tools or equivalent
    3. Use Dev Tools to examine the CSS styling applied to your form in detail
    4. Determine what CSS changes you need to make
    5. Add custom CSS via WP Customizer > Custom CSS, custom CSS plugin or child theme.
    Thread Starter davidzapp

    (@davidzapp)

    6 years, 6 months ago

    Hey Neil,

    Thank you, but unfortunately this did not help me out much. I was hoping for a concrete hint and I think my code does not look like I did not try a lot of things before asking around here.

    Anyway… I just figured it out. So if anyone is interested in the code for light labels, here it is:

    .wpcf7-form label {
font-family: "Raleway", sans-serif;
	font-size: 13px !important;
	font-weight: 400 !important;
 color: #999999;
}

    Font-family, font-size and colour can be replaced if needed.

    I have tried something very similar before but I obviously made something wrong all the time. Now everything works fine.

    Kind regards,
    David

    Neil Murray

    (@buzztone)

    6 years, 6 months ago

    Glad you worked it out.

    Note: It helps if you change the topic status to Resolved.
    2018-12-14_02.png

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Make labels light’ is closed to new replies.