Just Ask Matt - Answers

Changing the Font & Style of Your H1 Tags

QUESTION: (Rhonda) I am having problems changing the font size of my H1text. Is this very important? If so, how do I go about changing it?

Changing the text and/or style of an H1 tag is simple in CSS.  It does not affect anything other than how the visitor sees it though (i.e., if you use a large font, it means nothing more than a smaller font, in SEO terms or how Google sees it).

You can change the H1 tag locally or in the CSS definition file.

If you want to change all of the H1 tag settings in your entire website, you would do this in the CSS file:

h1 {
font-size: 24px;
}

You would use the h1 tag as you normally would:
<h1>This is my H1 tag</h1>

You can define a class in the CSS file which allows you to define your new style whenever you wish anywhere on the site:

.h1style {
font-size: 24px;
}

You would add this class to your h1 tag, when you wish it:

<h1 class=”h1style”>This is my H1 Tag</h1>

* Remember to add the “.” when defining it in the CSS to classify it as a class.

Finally, you can do it locally using a style attribute (without the CSS file):

<h1 style=”font-size:24px;”>This is my H1 Tag</h1>

All of the above do the exact same thing.  Their use is based on how often you use the style and how you want it defined (whether globally or locally).

Also, remember you can add other styles to the same definition (like color):

<h1 style=”font-size:24px; color:red;”>This is my H1 Tag that is Red and 24px high</h1>

I find that being able to change the styles of my text for header and other standard tags to be quite invaluable!  Knowing a little bit of CSS can go a long way.  Give this a try!

The easiest thing to try first is the local definition using the style attribute. If this is working for you, consider creating or editing your own CSS file!

Good luck!  cheers…matt


Read Full Post >>
More Questions & Answers...
GOT A QUESTION?

Who is Behind Marketing Mind?

Matthew Bredel begin_of_the_skype_highlighting     end_of_the_skype_highlightingMy name is Matthew Bredel and as of March, 2007, I am a full-time, work-at-home internet marketer. For close to 10 years, I worked for a defense company which was an OK job, but I was so uninspired in life and frankly, I needed some more money. That is when I first discovered internet marketing! Now I admit that I didn't start making thousands in my first couple of months (in fact, I lost my shirt!), but I finally saw the "internet light"...

Read More about Matthew Bredel
GURU STUFF END -->

Adding an Image Header in Thesis

February 17th, 2010 . by Matthew Bredel . Tweet This!
Share This Post...

For as great as the Wordpress Thesis theme is, for some reason there is no plug-and-play way of adding your own image to the header. Still, with a little bit of copy-and-paste code, you can add your image file in a matter of minutes. I show you how…

For those of you who attended my disaster of a webinar last month when I was attempting to give a Wordpress Thesis demonstration, you might remember that one of the most requested questions concerned adding a image to your Thesis theme header.

For as great as Thesis is, this functionality is not straight-forward.  (Maybe in their new version 1.7 that is coming out soon?)

So for now, I want to provide you with the key to installing your image file into the header with the least amount of pain.

Yes, there are some minor technical things, but if you watch the video and keep it “simple” (i.e., copy and paste), you should be fine.

The main thing you probably need is the copy and paste code that you will place into your custom.css file (as shown in the video):

.custom #header {
border-bottom:none;
height:110px;
padding-top:0;
padding-bottom:0;
background:url(YOUR IMAGE FILE LOCATION - FULL PATH)
center left no-repeat;
}
.custom #header #logo { display:none; }
.custom #header #tagline { display:none; }

That is pretty much all your need!  Remember that you need to put in your image file location (put it in quotations, too!).  Also, you may need to change the height parameter to match your image.  That is about it.

Just copy and paste the rest and you should be set!

cheers…matt

**********************************

Don’t Know What Thesis Is?  You Should Really Check it Out! It Rocks!

Learn more about the Wordpress Thesis Theme…

**********************************

P.S. I used the code shown here from the blog post at DoubleMule.com

Don't Buy Another Money Making Product Until You Watch These FREE Videos!

First Name:
Email:

Posted in Blogging for Money, Favorite Tools, Feature, Thesis Theme, Video Blog |
Tagged With:   • • • • •

7 Responses to “Adding an Image Header in Thesis”

  1. Thank you so much. This is awesome. I tried the forums on DIY and no luck. I searched everywhere and no luck. Your post was clear enough for a css plebe like me. I will be following and recommending you from now on.

    Posted by: nancy Raskauskas
    March 3rd, 2010 at 5:41 am

  2. No worries! Tell me if you have any questions or problems! cheers…matt

    Posted by: Matthew Bredel
    March 3rd, 2010 at 8:24 am

  3. Great information - what If I just want to upload a image to the background, but keep my text?

    Thanks!!

    Posted by: Joe
    May 9th, 2010 at 4:34 am

  4. hi matt — i have been everywhere searching for answers to make my header clickable. yours, matt, is the only code that makes the header visible - THANK YOU for saving me from an early, thesis-induced end o’ my life. it’s so frustrating to have bought thesis and now be fifty steps back instead of rocketing toward completion.

    i so appreciate your code getting the header to show up, though it still is not clickable and i can’t determine why. i used your code exactly from this page and the header looks great and will be great once i get that puppy to click. i even grabbed the openhooks and tried adding html to the header section but that does not work either. all the tutorials with clickable header info make my header disappear, so yours it the best of what i have tried, though still no magical click…

    do you have a brilliant way to make the header on my site clickable?

    thanks for any wisdom you can share!

    Posted by: jd
    May 23rd, 2010 at 8:09 am

  5. It worked fine, thanks mate. However, I still have a white space at the top of my header. Can I deleted or somehow make it smaller?

    Thanks

    Samir

    Posted by: Samir Rifai
    August 17th, 2010 at 12:59 pm

  6. Hey Samir, I kind of need to see it to understand more about the white space. I’m sure it is just a CSS definition, but which one, I don’t know without seeing the past. Feel free to post the site. cheers…matt

    Posted by: Matthew Bredel
    August 18th, 2010 at 7:28 am

  7. Can i customize the header link to go to some other page ?? i mean my blog is installed in a blog directory and i want the header to link back to the main site.

    Anyone please ??

    Posted by: junaid
    August 19th, 2010 at 9:43 pm

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>