Changing Metro Theme Title – H1

Community Forums Forums Design Tips and Tricks Changing Metro Theme Title – H1

This topic is: resolved

This topic contains 12 replies, has 5 voices, and was last updated by  Pinky 1 year, 1 month ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #22430

    gh5649
    Participant
    Post count: 13

    Working with most StudioPress themes, I can change the font size of the post title – by affecting the size of H1 by editing:
    font-size: 48px;

     

    For some reason – when I work with the METRO theme – this does not work.  And I must change the size of H1 by editing:
    font-size: 3rem;

     

    Why is this?  What is REM?  Call me curious, I guess.  But it took me forever to figure this out by trial or error – and I am suspicious that I may be causing changes to other things other than the Post Title (H1)

    Thanks in advance for answering this for me…..

    Gary.

     

    #22503

    braddalton
    Participant
    Post count: 7473

    Post a link to your site please.

    You’ll need to change both the Pixel and REM values to match the new size.

    /*
    02 Typography
    -------------------------------------------------------------------------------------------------------
    
    	This section covers font colors, families, size, styles and weight.
    
    	This style sheet uses rem values with a pixel fallback.
    	The rem values are calculated per the examples below:
    
    	10 / 16 =		0.625rem
    	12 / 16 =		0.75rem
    	14 / 16 =		0.875rem
    	15 / 16 =		0.9375rem
    	16 / 16 =		1rem	
    	18 / 16 =		1.125rem
    	20 / 16 =		1.25rem
    	24 / 16 =		1.5rem
    	30 / 16 =		1.875rem
    	36 / 16 =		2.25rem
    	42 / 16 =		2.625rem
    	48 / 16 =		3rem
    	
    	Further reading on the use and compatibility of rems:
    
    <a href="http://caniuse.com/rem" rel="nofollow">http://caniuse.com/rem</a>
    
    
    <a href="http://snook.ca/archives/html_and_css/font-size-with-rem" rel="nofollow">http://snook.ca/archives/html_and_css/font-size-with-rem</a>
    
    	

    WordPress Developer & Consultant
    Brad Dalton400+ StudioPress Tutorials & 1200+ Code snippets

    #22693

    triggers
    Participant
    Post count: 35

    I had a question as well in regards to Font sizes and H1 tags in the Metro theme. After reading Gary’s post I want to verify something.

    The H1 tag is automatically the Title right? (want to be sure for SEO purposes)

    If I wanted to change the H1 font size I have to edit both pixel & rem values.

    For the subtitles/subheads I would select H2, etc..

    Just want to make sure H1 is the title. If I select H1 for the subtitles the font size is the same as the title.

    Thanks,

    Deb

    #22710

    braddalton
    Participant
    Post count: 7473
    h1, .entry-title, .entry-title a, #title {
        font-family: 'Oswald',sans-serif;
        font-size: 2.25rem;
    }
    

    On the single posts & pages yes. The archives can be different.

    .metro-custom h2 a, .metro-custom h2 a:visited {
        color: #464646;
    }
    

    I use h3 for sub headings.


    WordPress Developer & Consultant
    Brad Dalton400+ StudioPress Tutorials & 1200+ Code snippets

    #22743

    gh5649
    Participant
    Post count: 13

    I have edited both the pixel size and the rem size of H1 to fit the title size I like.  I like H1 being my title re: SEO.

    I think I selected 42 pixels and 2 rems.

    It is a bit trial and error you know – I think the pixels is more for the IE users.  I think the rem size change gets reflected with other browsers such as IOS, Safari, Firefox, etc.

    Looking back – at my past StudioPress themes even the new ones (Eleven40) do not indicate a value at all for REM – so this must be a new value going forward for CSS and font sizes.

    Thanks for the feedback.

    gh

     

    #22749

    braddalton
    Participant
    Post count: 7473

    42 / 16 = 2.625rem

    Read this:http://wpsites.net/web-design/font-rem-pixel-sizes/

    I think you have the rem wrong.

    It depends on the base.


    WordPress Developer & Consultant
    Brad Dalton400+ StudioPress Tutorials & 1200+ Code snippets

    #22831

    triggers
    Participant
    Post count: 35

    Thanks Brad,

    Any particular reason you use H3 for subheads?

    Deb

    #22851

    braddalton
    Participant
    Post count: 7473

    Because thats the way its supposed to be. You don’t use h1 or h2 in the body of the content. They are used for the title on the archives pages and single posts and single pages.


    WordPress Developer & Consultant
    Brad Dalton400+ StudioPress Tutorials & 1200+ Code snippets

    #22958

    gh5649
    Participant
    Post count: 13

    “…I think you have the rem wrong.  It depends on the base….”

    So Brad – If I wanted to decrease the title font – I should edit the pixel value to multiples of 16 (where the base is 16 in this example of METRO)

    OR -

    Are you saying – Given the values in the CSS table (see below) – I should choose a pixel value that appears in the chart.  Such as

    (not 32 pixels – but) 30 pixels
    1.875rem

    This is confusing.  Can I not pick a rem value that does not appear in the chart?  (i.e. 32 pixels and 2rem)

    10 / 16 =       0.625rem
        12 / 16 =       0.75rem
        14 / 16 =       0.875rem
        15 / 16 =       0.9375rem
        16 / 16 =       1rem
        18 / 16 =       1.125rem
        20 / 16 =       1.25rem
        24 / 16 =       1.5rem
        30 / 16 =       1.875rem
        36 / 16 =       2.25rem
        42 / 16 =       2.625rem
        48 / 16 =       3rem
    

    *edited to format code in line with the forum guidelines

    #22960

    braddalton
    Participant
    Post count: 7473

    Firstly gh5649. Please show a little bit of respect and read this http://www.studiopress.com/forums/faq/

    Specifically about how to display code.

    Thanks

    Brad Dalton


    WordPress Developer & Consultant
    Brad Dalton400+ StudioPress Tutorials & 1200+ Code snippets

    #23013

    gh5649
    Participant
    Post count: 13

    Oopss.  Sorry ’bout that.

    gh

     

    #28997

    Tracy
    Participant
    Post count: 76

    Hi, I’m new to WordPress but not so new to web design and have been using Dreamweaver / html/css. So when editing my wordpress sites I know where to add the css div id and classes but not sure where to add the html part because I don’t know much php. What I want to do at this time is add some text/maybe address and phone number in the uppper right of my header section like this page I found.. http://spectrumlandscapingmn.com/ and my logo in the left of the header. I’ve tried putting some html in the widget area but It didn’t do anything.

    #29012

    Pinky
    Participant
    Post count: 93

    Tracy can you please start a new thread with your question/s and a link to your site


    cheers

    Pinky

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.