Setting Style on a CF7 Line of Text

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; }

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).

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, 10 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;
}

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

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

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?

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>

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