Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Change font size and color for H1 and H2 title tag

Question

Posted · Report post

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

1 person likes this

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

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.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks! it worked..

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

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.com/wiki/Custom_CSS.

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

Share this post


Link to post
Share on other sites

Posted · Report post

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; }

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites