[Marty SParticipant]

What code and where to place it

To change font size (as % ) in a short coded text area

The text I want to change is in the middle of the page, and do not want to change text styling of any other part of the page

Would i place the code in the “ROW” shortcode or the “TEXT shortcode?

See screenshots at link https://app.sugarsync.com/iris/wf/D6184542_90119684_6526727

Thanks!

Marty

[ChristopherModerator]

Hi there,

Switch your editor from visual to text and put your text inside this <div> tag
<div style="font-size:200%;>your text here </div>

Hope it helps.

[Marty SParticipant]

It worked but I had to use PX instead of %

It set the font size in px code PER LINE, is there a way to add a body code or something so I just have to change it one place for that particular paragraph?

What can I add to change the line spacing to the paragraph?

How can I add this to my child theme if it will be on one page, can I specify a page the code applies to?

I copied below how the code looks so far (THANKS FOR HELPING 🙂 )

<p style=”font-size: 30px; text-align: left;”><span style=”color: #ffffff;”>This site is live as of October 31, 2014 !</span></p>
<p style=”font-size: 30px; text-align: left;”><span style=”color: #ffffff;”>I am adding pictures and designs daily to all the</span></p>
<p style=”font-size: 30px; text-align: left;”><span style=”color: #ffffff;”>pages……..contact me and let me know exactly what</span></p>
<p style=”font-size: 30px; text-align: left;”><span style=”color: #ffffff;”>you want in a metal cutout…..I will send examples</span></p>
<p style=”font-size: 30px; text-align: left;”><span style=”color: #ffffff;”>by email to you ASAP !</span></p>

[RadModerator]

Hi Marty,

You can wrap them with div and add class name. Then just re-use the same class name for your other content.

Example, for customizer’s custom css :

.text-style-1 {
font-size: 30px;
text-align: left;
color: #ffffff;
}

Then,

<div class="text-style-1">
<p>This site is live as of October 31, 2014 !</p>
<p>I am adding pictures and designs daily to all the</p>
<p>pages……..contact me and let me know exactly what</p>
<p>you want in a metal cutout…..I will send examples</p>
<p>by email to you ASAP !</p>
</div>

Cheers!

[ChristianModerator]

Hey Marty,

You can apply a class to your paragraphs like p-design and add the CSS below in your child theme’s CSS.

.p-design {
font-size: 30px;
text-align: left;
line-height: 20px;
color: white;
}

So, your paragraph would look like

<p class="p-design">Your paragraph</p>

Hope that helps. 🙂

[Marty SParticipant]

Thank You Thank You Thank You…I used the second method …much easier….
.p-design {
font-size: 30px;
text-align: left;
line-height: 20px;
color: white;
}

Question One > Okay, this new paragraph style is called “.p-design” Can I create additional paragraph styles and name them uniquely and what would the syntax be?

Question Two > Within a given “.p-design” , can I assign a font and what would the syntax be?

Thanks
Marty

[ChristopherModerator]

Hi there,

Yes you can just like this
<p class="new-design">Your paragraph</p>
And CSS would be

.new-design {
font-size: 30px;
text-align: left;
line-height: 20px;
color: white;
}

You can assign font family and font color like font-family:cursive;color:red and add these to your CSS.

Hope it helps.

[Marty SParticipant]

Wow this is all working so nicely….thank you!

But next I would like to be able to add a RADIUSED box around the paragraph of text using something like this

<P STYLE=”border-style: solid; border-width: 3px; border-color: white”;> but adding in a specified redius border using
something like this>>>>>>> border-radius: 25px;

HERE IS THE CURRENT PARAGRAPH TEXT AND CODE FROM THE TEXT SHORTCODE EDITOR ON A SITE PAGE, IN THE TEXT TAB

<p class=”p-design”>This site is live as of October 31, 2014 !
I am adding new pictures and designs daily….in between designing
and cutting metal in the shop :)….there are hundreds of new designs and pictures
I am gradually  bringing to the new site…some from the old site, some images of my newer work, and catalogs of most everything in my extensive design collections….Ignition Metal Art Design has experienced major growth this year, and it is time for a new site! I am very excited!  Please contact me for a quote or any other information, just let me know what you are looking for, I will respond ASAP !
Thank You………</p>

HERE IS THE CODE FROM MY CHILD THEME CSS FILE

.p-design {
font-size: 30px;
text-align: left;
line-height: 40px;
color: white;
}

******What code would placed where to enable a radiused box around the paragraph text?
*******Would the added code for a radiused box be added in BOTH the text editor AND the child theme css?

Thanks!!

Marty

[Paul RModerator]

Hi Marty,

You can try the code below.

You can add this in your child theme style.css

.p-design {
    font-size: 30px;
    text-align: left;
    line-height: 40px;
    color: white;
     -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    -khtml-border-radius: 25px;
    border-radius: 25px;
    padding:10px;
    background:red;
}

Please change red with the color that you like as background
and change 25px to adjust border radius.

If you only want a border and not a background you can modify the code to be

.p-design {
    font-size: 30px;
    text-align: left;
    line-height: 40px;
    color: white;
     -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    -khtml-border-radius: 25px;
    border-radius: 25px;
    padding:10px;
    border:2px solid red;
}

Please change red with the color that you like for the border.

[Author]

Posts