HTML Block and changing Text Color and Font Size

PhilCorleyPhotoPhilCorleyPhoto Registered Users Posts: 107 Major grins

After getting very frustrated with the Text Block - not being very format-your-text friendly - I am trying to revert to the HTML Block so I can change the text color and font size.

So I put an HTML block on a page and entered the following...


Should be red and 200% size !

And nothing changes!

Can someone tell me what I am doing wrong ?

if you want to see the page in question; http://philcorley.smugmug.com/Blog/20141014-Landscape-Photography-Is-About-Disappointment

The blog is very much under construction - I only need a simple blog, but it is proving difficult to do in SM :-(

Thanks

Phil

Comments

  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited February 3, 2017

    In order to use an HTML block to change color and size you would need to add CSS as well. And you would need to reference that CSS in the HTML.

    What CSS did you enter to change the color and size?

    I have included two screen shots below using a test page on my site to test your desired changes. The first screen shot shows the content of both the HTML tab and the CSS in an HTML content element.

    @PhilCorleyPhoto said:
    The blog is very much under construction - I only need a simple blog, but it is proving difficult to do in SM :-(

    There is an article on using smug to make a photo blog at https://school.smugmug.com/SmugMug-Tips/How-to-Make-a-Photo-Blog. I don't know if it will help at all but I find that sometimes seeing other examples can be helpful.

    I just took a quick look at your blog entries. I was surprised not to find any photos. For example, your "8 images shortlisted" post is text only. I would think your viewers would like to see photos too. It's entirely possible that you were planning on adding photos, perhaps you just haven't made it that far in building your new site.

    I find it more straightforward to use a blogging platform for my blog. I use Blogger, and I have matched the look of my blog to my smugmug site. Another example can be seen on @Hikin' Mike 's site at http://www.imagesinthebackcountry.com/. He uses SmugMug for his photo galleries and Wordpress for the rest of his site.

  • PhilCorleyPhotoPhilCorleyPhoto Registered Users Posts: 107 Major grins

    Ah, CSS - didn't think I would need to do that; makes sense now :smile:

    Yes blog is very much under construction and not got to adding images yet - just trying to get the words sorted. I currently use WordPress for site and Blog, but really just want to get everything in one place - and also allow the look and feel to remain consistent. One reason to move to SM is to simplify everything into one site (hopefully).

    Thanks

    Phil

  • PhilCorleyPhotoPhilCorleyPhoto Registered Users Posts: 107 Major grins

    One question, can I define the CSS in the site wide CSS, so it can be available to any HTML blocks, or does it have to be specified for each block ?

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @PhilCorleyPhoto said:
    One question, can I define the CSS in the site wide CSS, so it can be available to any HTML blocks, or does it have to be specified for each block ?

    I put 90% of my custom CSS goes into my theme's CSS. So in the example that Denise posted, you just put that CSS into your theme's CSS instead of the HTML/CSS block. This way when you create a new HTML Block, you just need to wrap your text around the <div> like this:

    <div id="changeColorSize1">
    
        <p>Text here.</p>
    
    </div>  
    
  • PhilCorleyPhotoPhilCorleyPhoto Registered Users Posts: 107 Major grins

    Of course :smile: Slowly getting the hang of this.

    Many thanks

    Phil

  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited February 4, 2017

    I would suggest using class names instead of ID's for formatting.
    A class name will apply everywhere on your site.

    <div class="changeColorSize1"> <p>Text here.</p> </div>

    A div with an ID name only applies to a single element on the page it's on.
    Every div on a page has to have a different ID name.

    I'd use "span" instead which also can be used inline in the middle of a block of text.
    .... some text <span class="changeColorSize1">ColorSizeText</span> more text ....

    Or around a bunch of text.
    <span class="changeColorSize1">
    ColorSizeText text text ...
    </span>

    Also for whole paragraphs.
    <p class="changeColorSize1">ColorSizeText</p>

    You can use both ID and class.
    <div id="thisUniqueElement" class="changeColorSize1">

    Al - Just a volunteer here having fun
    My Website index | My Blog
Sign In or Register to comment.