Editing Text on a Page

picturetaker607picturetaker607 Registered Users Posts: 7 Big grins
edited January 23, 2016 in SmugMug Customization
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

Comments

  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited 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

    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.
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited 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?
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • picturetaker607picturetaker607 Registered Users Posts: 7 Big grins
    edited 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!
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited January 22, 2016
    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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • picturetaker607picturetaker607 Registered Users Posts: 7 Big grins
    edited 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
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited 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
    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>
    ....
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
Sign In or Register to comment.