Change Specific Label Colors with Class

  • Resolved usat009

    (@usat009)


    6 years, 2 months ago

    I have a staging site, and these are the credentials.

    USER demo
    PASS 3c2bd7631efc

    I want to add a class to “Your Information” ” Device Information” and “Return Shipping Address*” that let’s me make the fonts bold.

    And i want to be able to apply a class to my labels that don’t have any options associated with them that i use as explainers and page breaks that changes the font color – specifically i want add italic, change font size, and font color of the “Have two or more devices?” and “To expedite the repair process of WWAN Routers/Gateways we ask that you provide the symptomatic device’s modem log.” text.

    I submitted a separate support request regarding file upload button colors.

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter usat009

    (@usat009)

    6 years, 2 months ago

    I figured out how to do this by using standard CF7 classes as CF7MD doesn’t have any options that I can see for adding text in between form fields. If there is a way, and a way to style them, please let me know. I don’t know if the MD-RAW tags can contain text without options that can be styled using the MD-RAW class, if possible, then that would be better than my less than great work around that combines MD and standard CF7 coding.

    Plugin Author GusRuss89

    (@gusruss89)

    6 years, 2 months ago

    Hi @usat009

    Adding classes using the CF7 tags is the intended method – it’s perfectly fine to do that.

    Regarding md-raw, the purpose of that tag is to wrap arbitrary html. To add your labels with bold text, you could do something like this:

    [md-raw]
<h3>Your Information</h3>
[/md-raw]

    Note that headings would be more appropriate than labels here – a label us meant to be associated with a single form element.

    The other thing you could do – because you have the pro version – is to use the [md-card] feature to separate your field groups. E.g. 

    [md-card title="Your Information"]
... subject, name etc
[/md-card]
[md-card title="Device Information"]
... device, serial, etc
[/md-card]

    Here’s an example of what that might look like, including source code – https://cf7materialdesign.com/demos/field-groups/

    Thanks,
    Angus

    Thread Starter usat009

    (@usat009)

    6 years, 2 months ago

    Thanks!

    Thread Starter usat009

    (@usat009)

    6 years, 2 months ago

    Is there a different CSS for styling card titles?

    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    6 years, 2 months ago

    Yes, use this:

    #cf7md-form .cf7md-card-title {
  /* Your styles here */
}
Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Change Specific Label Colors with Class’ is closed to new replies.