• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Changing Metro Theme Title – H1

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: resolved

Tagged: font size, h1, Metro, post title

  • This topic has 12 replies, 5 voices, and was last updated 10 years ago by Pinky.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • February 23, 2013 at 1:25 pm #22430
    gh5649
    Member

    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.

     

    February 23, 2013 at 8:43 pm #22503
    Brad Dalton
    Participant

    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:
    	
    	http://caniuse.com/rem
    	http://snook.ca/archives/html_and_css/font-size-with-rem
    	

    Tutorials for StudioPress Themes.

    February 25, 2013 at 9:04 am #22693
    triggers
    Member

    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

    February 25, 2013 at 9:52 am #22710
    Brad Dalton
    Participant
    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.


    Tutorials for StudioPress Themes.

    February 25, 2013 at 1:09 pm #22743
    gh5649
    Member

    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

     

    February 25, 2013 at 1:42 pm #22749
    Brad Dalton
    Participant

    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.


    Tutorials for StudioPress Themes.

    February 25, 2013 at 9:44 pm #22831
    triggers
    Member

    Thanks Brad,

    Any particular reason you use H3 for subheads?

    Deb

    February 26, 2013 at 3:23 am #22851
    Brad Dalton
    Participant

    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.


    Tutorials for StudioPress Themes.

    February 26, 2013 at 2:16 pm #22958
    gh5649
    Member

    "...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

    February 26, 2013 at 2:26 pm #22960
    Brad Dalton
    Participant

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

    Specifically about how to display code.

    Thanks

    Brad Dalton


    Tutorials for StudioPress Themes.

    February 26, 2013 at 6:09 pm #23013
    gh5649
    Member

    Oopss.  Sorry 'bout that.

    gh

     

    March 18, 2013 at 9:11 am #28997
    Tracy
    Member

    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.

    March 18, 2013 at 9:38 am #29012
    Pinky
    Member

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


    cheers

    Pinky

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble