How to change styling

  • Resolved divingdoug

    (@divingdoug)


    3 years, 8 months ago

    Great plugin. I have integrated it into my simple contact form and want to change the styling to align with my overall site. I have successfully changed the background color but also am wanting to change a few other aspects of the styling, specifically the border and the color of the last word in the phrase from red to a color that better contrasts with my color scheme.

    I am using this css code in the custom css section of my theme (Themify Basic)

    .captcha-image {
    background-color: #ab8e17;
    border-style: solid;
    border-color: #000000;
    border-width: 3px;
    }

    If you can point me in the right direction, it would be much appreciated. I am not proficient in web programming and am just bumbling my way through it with a lot of trial and error.

    Thanks !!

    Doug

    • This topic was modified 3 years, 8 months ago by divingdoug.

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

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

  • Hello,
    The following lines of CSS will change the last word from red to black and the checked svg border from red to black.

    
.captcha-image .cf7ic_instructions span {
    color: #000000;
}
.captcha-image label > input:checked + svg, .captcha-image label > input:focus + svg {
    border-color: #000000;
}
    Thread Starter divingdoug

    (@divingdoug)

    Thank you for the prompt reply. It took me a while to get in and try this.

    The snippet for the text color worked when I initially put it in on the style preview page but subsequent reloads did not reflect the change and it did not show up on other browsers / devices.

    The code for the border color did not have an effect. It looks like this code is for the border of the selected svg image and while that would be beneficial, I was actually wanting to change the border style for the entire block to match the other fields on my form.

    I made a brief attempt to edit the styles.css file under your addon but it did not appear to have an effect so I restored the unedited backup.

    If you have an alternate approach I can try, it would be very much appreciated but I know that support for the free version is normally not expected.

    Thanks…… Doug

    Thread Starter divingdoug

    (@divingdoug)

    I got it worked out. Had to prefix the snippets with the outer class ( .wpcf-7 )

    Thx……

    Glad to hear it, have a great day!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to change styling’ is closed to new replies.