Editing Text on a Page

picturetaker607 · January 21, 2016

Hello,

I really would like to edit the colour, font, and size of my text on only one page of my website. I have tried using CSS for the page with no effect. Does anyone know of a tutorial on how to do customise the text?

Many Thanks !

Matthew
www.matthewupsonphotography.com

ChancyRat · January 21, 2016

picturetaker607 wrote: »

Hello,

I really would like to edit the colour, font, and size of my text on only one page of my website. I have tried using CSS for the page with no effect. Does anyone know of a tutorial on how to do customise the text?

Many Thanks !

Matthew
www.matthewupsonphotography.com

You will need to use an HTML content block. That will let the CSS "stick". Don't forget to make the page "this page only", otherwise the changes will apply to all pages.

Allen · January 21, 2016

There a few different ways to do this. Target the whole page, target the center content or target each widget.
I assume in this case the text is all in widgets. Does it include the top menu and footer area ? In the text do you
want heading, titles, etc. different then other text?

What color, font, and size of text do you want to use. Is it all in one widget? Got a link to the page?

picturetaker607 · January 22, 2016

Allen wrote: »

There a few different ways to do this. Target the whole page, target the center content or target each widget.
I assume in this case the text is all in widgets. Does it include the top menu and footer area ? In the text do you
want heading, titles, etc. different then other text?

What color, font, and size of text do you want to use. Is it all in one widget? Got a link to the page?

Thanks for your response. The text is all in one 'box' Not sure what font, colour I wish to use, Once I can change the settings I will experiment. The webpage is http://www.matthewupsonphotography.com/Headshots/n-fjkLP4

Thanks for your help!

Allen · January 22, 2016

picturetaker607 wrote: »

Thanks for your response. The text is all in one 'box' Not sure what font, colour I wish to use, Once I can change the settings I will experiment. The webpage is http://www.matthewupsonphotography.com/Headshots/n-fjkLP4

Thanks for your help!

Each of your text lines can be customized individually using the <p> <h1> <h2> & <h3> tags.
Further you can single out one tag if your have multiples like h2, you have two of them,
by using h2:nth-child(1) or h2:nth-child(2)

Here's what the html looks like.
1st red is the unique page class name. 2nd red is the unique widget class name.

<body style="" class="sm-user-professional sm-page sm-page-node [COLOR=Red]sm-page-node-fjkLP4[/COLOR] 
                      sm-page-parentnode-6jBxJ sm-page-initialized">
...
...
<div id="sm-page-widget-QqsbbTSh" class="sm-page-widget sm-page-widget-text 
                                     [COLOR=Red]sm-page-widget-13662328[/COLOR]" data-typeid="13662328">
...
...
<div id="sm-page-widget-Pc4G3JZg" class="sm-page-widget-body"><div class="sm-widget-text">
...
...
<h1 style="text-align: center;"><span style="font-size: 24px;">Actors Head Shots 
              in Raynes Park</span></h1>

<p style="text-align: center;"><span>(Only ten minutes from Raynes Park train 
                   station)</span></p>

<p><br></p><h2 style="text-align: center;"><span style="font-size: 20px;">February 
             5th 2016</span></h2>

<p><br></p><h3 style="text-align: center;"><span>Get 20 Images suitable 
                 &nbsp;for printing or a website</span></h3>

<p><br></p><h2 style="text-align: center;"><span style="font-size: 20px;">45 
          Minutes, Up to three outfit changes, &nbsp;20 images,&nbsp;Studio, 
             Natural light or Outdoors</span></h2>

<p><br></p><h3 style="text-align: center;"><span>Only £45</span></h3>

Here's a sample of CSS

.sm-page-widget-13662328 {
color:red;
font-size: 120% 
}

.sm-page-widget-13662328 p {
color:orange  
}

.sm-page-widget-13662328 h1 {
color:blue  
}

.sm-page-widget-13662328 h2 {
color:pink  
}

.sm-page-widget-13662328 h2:nth-child(2) {
color:red  
}

.sm-page-widget-13662328 h3 {
color:green  
}

If the page is made custom, "Just This Page" and you put this in a "Just This Page" CSS box.
You could also put this in "entire site" CSS because it targets that unique widget number.

picturetaker607 · January 23, 2016

Many Thanks for this, I am going to try it out:)

How does one determine the name of the widget? i.e. .sm-page-widget-13662328

Allen · January 23, 2016

picturetaker607 wrote: »

Many Thanks for this, I am going to try it out:)

How does one determine the name of the widget? i.e. .sm-page-widget-13662328

I use "Inspect Element" in Firefox. IE and Chrome also have "Inspect Element" although I don't
use them. Right clicking anywhere in a widget will show the html. Whatever is clicked will be
highlighted in the yellow portion below, the widget-body div. If you look up some lines you
will find the start of the widget with its unique class name.

....
<div id="sm-page-widget-2wVkvbJJ" class="sm-page-widget sm-page-widget-html 
            [COLOR=Red]sm-page-widget-13326584[/COLOR]" data-typeid="13326584">
    <div class="sm-page-widget-content">
          <div class="sm-page-widget-header"></div>
          <div id="sm-page-widget-HnQDmHQZ" class="[COLOR=Yellow]sm-page-widget-body[/COLOR]">
[COLOR=Yellow]                <div ...>
                      <div ...>
                      ...
                      </div>
...
...
                </div>[/COLOR]
          </div>
    </div>
</div>
....

Editing Text on a Page

Comments