• Resolved imapappy

    (@imapappy)


    I would like to change the Font Type, Font Size, and be able to center or right-justify text on a CF7 form.

    To be clear, I am not referring to the fields themselves, but rather the random text that you would put between fields.

    Can I do this?

    Thank You.

    Alan

Viewing 12 replies - 1 through 12 (of 12 total)
  • You can style it like any other text. For example:

    <span class="special-text">Some special text</span>

    And then, in your stylesheet:

    .special-text { font-family: Georgia; font-weight: bold; }

    Thread Starter imapappy

    (@imapappy)

    Thank you Gal .. I will try it.

    Pardon my ignorance but I really am a noob in CSS coding… Do I put the <span… right in the CF7 coding or does it go somewhere else. I usually write the text right in the CF7 code without anything around it.

    What about Centering or Right justification? Is that possible?

    Tnx for taking the time to answer.

    Keep Safe ..

    Alan

    Yes, you can add the span inside the form content, like you would the normal text.

    For centering, use div (block) instead of span (inline element).

    Thread Starter imapappy

    (@imapappy)

    Thanks Again Gal …

    I understand the first part and got it working .. ie changing font and size etc but still confused on changing justification .. ie. using div(block) instead of span.

    Could I trouble you to give me an example of centering the text on the form while also changing the font size.

    Here is my actual code (Thanks to you)

    <span class=”Mask-Price”> Masks are $10.00 each Unless Otherwise Specified in Fabric Choice </span>

    .Mask-Price {
    font-weight:bold;
    font-family: Arial;
    font-size: 18px;
    }

    Seeing it visually as an example as you did the first part is the best learning tool for me.

    Alan

    • This reply was modified 4 years, 9 months ago by imapappy.
    
    /* In contact form */
    <div class="Mask-Price"> Masks are $10.00 each Unless Otherwise Specified in Fabric Choice </div>
    
    /* In stylesheet */
    .Mask-Price {
    text-align: center;
    font-weight:bold;
    font-family: Arial;
    font-size: 18px;
    }
    
    Thread Starter imapappy

    (@imapappy)

    tnx again Gal .. but text-align: center; didn’t work for me.

    What was the HTML code you actually got on the page?

    Thread Starter imapappy

    (@imapappy)

    Gal,

    In the CF7 Form:
    <span class=”Mask-Price”> Masks are $10.00 each – Embroidery Additional </span>

    My CSS Code::

    .Mask-Price {
    text-align: center;
    font-weight: bold;
    font-family: Arial;
    font-size: 26px;
    Color: HoneyDew;
    }

    All but Text-align work as expected .. however the line is NOT centered.

    Alan

    What’s the page URL?

    Thread Starter imapappy

    (@imapappy)

    The site is https://www.embroiderforyou.biz …. on the menu select ORDER FORM and MASK ORDERS ONLY … that will get you to the order form.

    The line of text is right below Tele No.

    Tnx

    Alan

    In the form, you need to use

    <div class="Mask-Price"> Masks are $10.00 each – Embroidery Additional</div>

    Thread Starter imapappy

    (@imapappy)

    Good Morning Gal,

    Yes .. you are correct .. I missed that subtle change for the contact form. My Bad .. I have corrected this and centering now works fine.

    As a CSS “noob” and trying to learn, could you provide a brief explanation of the difference between /div and /span?

    Thank You.

    Alan

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Setting Style on a CF7 Line of Text’ is closed to new replies.