Community Forums › Forums › Archived Forums › Design Tips and Tricks › Changing Metro Theme Title – H1
Tagged: font size, h1, Metro, post title
- This topic has 12 replies, 5 voices, and was last updated 10 years, 6 months ago by
Pinky.
-
AuthorPosts
-
February 23, 2013 at 1:25 pm #22430
gh5649
MemberWorking 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 #22503Brad Dalton
ParticipantPost 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
February 25, 2013 at 9:04 am #22693triggers
MemberI 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 #22710Brad Dalton
Participanth1, .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.
February 25, 2013 at 1:09 pm #22743gh5649
MemberI 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 #22749Brad Dalton
Participant42 / 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.
February 25, 2013 at 9:44 pm #22831triggers
MemberThanks Brad,
Any particular reason you use H3 for subheads?
Deb
February 26, 2013 at 3:23 am #22851Brad Dalton
ParticipantBecause 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.
February 26, 2013 at 2:16 pm #22958gh5649
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.875remThis 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 #22960Brad Dalton
ParticipantFirstly 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
February 26, 2013 at 6:09 pm #23013gh5649
MemberOopss. Sorry 'bout that.
gh
March 18, 2013 at 9:11 am #28997Tracy
MemberHi, 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 #29012Pinky
MemberTracy can you please start a new thread with your question/s and a link to your site
cheers
Pinky
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.