Header Fonts (style and size)

[gundog]

Rather than creating a Banner I would like to use text (left margin) using my choice of font (size and style). In using the code below I have no options for style and only a coule options for size.

What would you recommend including control over the color of the font?

Thanks - Al

<div align="left">
<h2>My amazing photos</h2>
</div>

[denisegoldberg]

Why not use CSS for your header characteristics? That way you have all of the options that you could possibly want, different font, sizes, etc.

My banner is text only, but I still use CSS to style it.

For example
#my_banner {
display: block;
margin: 0px 0px 10px 10px; /* top right bottom left */
text-decoration: none;
font-family: verdana, arial;
font-size: 100%;
font-weight: bold;
}
Then in the header:
<div id="my_banner">my site name here</div>
--- Denise

[gundog]

Denise - I'd love to but the only CSS options I have dug through indicate the use of an image to accomplish that?

width: 200px !important;
height: 25px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://www.smugmug.com/photos/94264798-O.png') !important;
}
.smuglogo[class] {
background-image: url(http://www.smugmug.com/photos/94264798-O.png) !important;
}
/* this part hides the your photos/home, login and help links */
#toolbar a.nav {display: none;}

[denisegoldberg]

Denise - I'd love to but the only CSS options I have dug through indicate the use of an image to accomplish that?
Sorry - I updated my previous post to include an example at the same time that you posted this. Take a look at the example in my last post.

Also - in case you haven't seen it yet, I highly recommend taking a look at the document linked in the CSS (Customizing SmugMug Simplified) sticky at the head of this forum - http://www.dgrin.com/showthread.php?t=54833. It's a great document, very readable, and I still keep going back to it when I have questions.

--- Denise

[denisegoldberg]

Oh, and you can also add color to the CSS. You could add the following line in the CSS I posted above to change the text color to blue:
color: #36C;
My favorite spot for coming up with color codes is http://www.december.com/html/spec/color.html.

--- Denise

[gundog]

I just pasted the code you provided and got the same results I would have gotten using:

<div align="left">
<h2>My amazing photos</h2>
</div>

A left margin, simple font.

www.gundogphotos.com (http://www.gundogphotos.com)

[gundog]

Oh, and you can also add color to the CSS. You could add the following line in the CSS I posted above to change the text color to blue:
color: #36C;
My favorite spot for coming up with color codes is http://www.december.com/html/spec/color.html.

--- Denise

You just add it anywhere in the CSS box you want?

[denisegoldberg]

I just pasted the code you provided and got the same results I would have gotten using:

<div align="left">
<h2>My amazing photos</h2>
</div>

A left margin, simple font.

www.gundogphotos.com (http://www.gundogphotos.com)
The question is, is that what you want? Do you want a larger font, or a different font? Do you want a different color?

Do you want someone to be able to return to your home page by clicking on your banner/site name? If you do, change the reference in your header to look like this:
<div id="my_banner"><a href="/home">gundogphotos.com</a></div>

You can change the placement, or the color, or...

--- Denise

[denisegoldberg]

You just add it anywhere in the CSS box you want?
Color is part of the definition for your banner. Try replacing what you have with this:

#my_banner {
display: block;
margin: 20px 10px 10px 30px; /* top right bottom left */
text-decoration: none;
font-family: verdana, arial;
font-size: 140%;
font-weight: bold;
color: yellow;
}

--- Denise

[gundog]

Denise - I REALLY appreciate your taking the time to help but we are on different planets here in tems of knowledge for HTML, CSS and what it all does and what it all means. The 50 page document you pointed me to looks extremely well written and very helpful - if you understand any of it.

I can train a dog to a very high level but I can't train a newbie to train a dog question by question. What I could do is have a detailed, step by step program for the newbie and then fill in the question/answer along the way.

That is my issue with Smugmug. Lots of great tools but no roadmap. You DO need to be a quasi programmer - this is not fun-n-easy.

Denise thanks a million for stepping up and trying to help but if I continue with questions trying to understand the basics without a roadmap to lean on (instead of the nice people here) I'll have everyone pulling their hair out. :rolleyes

[denisegoldberg]

Denise - I REALLY appreciate your taking the time to help but we are on different planets here in tems of knowledge for HTML, CSS and what it all does and what it all means. The 50 page document you pointed me to looks extremely well written and very helpful - if you understand any of it.

I can train a dog to a very high level but I can't train a newbie to train a dog question by question. What I could do is have a detailed, step by step program for the newbie and then fill in the question/answer along the way.

That is my issue with Smugmug. Lots of great tools but no roadmap. You DO need to be a quasi programmer - this is not fun-n-easy.

Denise thanks a million for stepping up and trying to help but if I continue with questions trying to understand the basics without a roadmap to lean on (instead of the nice people here) I'll have everyone pulling their hair out. :rolleyes
Have you tried the tutorials linked to from this page - http://www.dgrin.com/showthread.php?t=52812? Might be a better place the start...

--- Denise

[gundog]

Have you tried the tutorials linked to from this page - http://www.dgrin.com/showthread.php?t=52812? Might be a better place the start...

--- Denise

Many, many times.

[G.Walling]

Color is part of the definition for your banner. Try replacing what you have with this:

#my_banner {
display: block;
margin: 20px 10px 10px 30px; /* top right bottom left */
text-decoration: none;
font-family: verdana, arial;
font-size: 140%;
font-weight: bold;
color: yellow;
}
--- Denise

Can you please explain how to change the font style. I tried replacing verdana, arial with something else but it didn't change.

Thanks

[denisegoldberg]

Can you please explain how to change the font style. I tried replacing verdana, arial with something else but it didn't change.

Thanks
Unfortunately you replaced it with a font that isn't installed on many computers. And if the font specified isn't loaded on the computer then a default font is used. Your current CSS has:

#my_banner {
display: block;
margin: 0px 0px 10px 20px; /* top right bottom left */
text-decoration: none;
font-family: zephyr;
font-size: 200%;
font-weight: bold;
color: #996633;
}
Zephyr is not on the list of safe fonts. Try something that is. For example, I just tried font-family: impact; and font-family: comic sans ms; on your site, and they both work.

For a list of safe fonts, see http://typetester.maratz.com/.

--- Denise