Jump to content


Photo
Resolved

Change font size and color for H1 and H2 title tag



  • Please log in to reply
7 replies to this topic

#1 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 24 September 2012 - 04:35 PM

I tried changing the font size and other characteristics but unable to do so...I would appreciae if you can tell me how can I do it. The font size however was good in earlier version of the theme I bought..
  • orerrygipse likes this

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 September 2012 - 04:57 PM

You’ll need to use Custom CSS (in Site Options > Custom Code > Custom CSS). CSS that changes the size of text consists of two parts: the selector and the font-size attribute.

Selector: Used to select the kind of text you want to adjust (whether it’s post content or headings).

To find the selector for your text, you'll need to use Firebug (or Chrome Development tools). To learn how to use Firebug for CSS customizations, please read and follow these instructions: http://www.pagelines...iki/Custom_CSS.

For help with the font-size attribute, please see these instructions: http://www.w3schools.com/cssref/pr_font_font-size.asp


#3 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 24 September 2012 - 05:10 PM

I tried the following, but doesn't change the fonts

body { font-size: 14px; }
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 September 2012 - 05:31 PM

Your CSS needs to be more specific. For example, for h1, are you looking to change ALL h1 tags or a specific h1 tag?

#5 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 24 September 2012 - 06:01 PM

You can visit the site, the H1 and H2 tags on homepage and single posts are too big..even the pages with tag listings or the results pulled out after putting certain keyword in search box.. all are too big. I want to make them appear tidy..

#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 September 2012 - 12:24 AM

Here's an example of why Catrina's saying you need more specific tags or selections for your font size.
This is the default code for titles:
 
h1, h2, h3, h4, h5, h6, .entry-title, .entry-title a {
    color: #222222;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

You can see that all the H levels are there in one tag.

So, if you did:
 
h1, h2, h3, h4, h5, h6, .entry-title, .entry-title a {
    color: #222222;
    font-size: 24px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}
Every single title would be 24px, including those that are now 14px.

So, you have to break it down to something like:

 
h2, .entry-title, .entry-title a {


	color: #222222;
	font-size: 24px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

And have one set of code for each size you want.

As for the body, WP doesn't really use a body font since it applies text to sections, Again, you need to find those and apply the size individually, allowing the CSS to affect just that type of section.
  • manojgupta26 likes this

#7 manojgupta26

manojgupta26

    Super Member

  • Members
  • 144 posts
  • Country: Country Flag

Posted 25 September 2012 - 07:27 AM

Thanks! it worked..

#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 25 September 2012 - 08:00 AM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved