View Full Version : Font & Font Color
Tom Potter
Jun-22-2008, 04:50 PM
Hey Folks,
How would I change the font and color of the font, for my Header, for example?
How would I change the font color of the text in my Bio?
Thx a lot!
Tom
Allen
Jun-22-2008, 09:23 PM
Hey Folks,
How would I change the font and color of the font, for my Header, for example?
How would I change the font color of the text in my Bio?
Thx a lot!
Tom First change this in your header. Notice you have an extra h3, see red, with no closing </h3>.
<h3><div id="myHeader">TOM POTTER PHOTOGRAPHY</div></h3><h3>
<div id="navcontainer">
...
...
</li></ul>
</div>
Change all that to this. Removes the h3's around the my_header div, the
CSS will control the size. Leave the one above the nav and add the closing
one a the end.
<div id="myHeader">TOM POTTER PHOTOGRAPHY</div>
<h3>
<div id="navcontainer">
...
...
</li></ul>
</div>
</h3>
Now in your CSS we'll format your my_header. You now have this in your
CSS. The h3's weren't needed because you're stating 300% for size here.
Add the color line to it. The font is already in there.
#myHeader {
margin: 10px auto 20px;
text-align:center;
font-family: Comic Sans MS, verdana;
font-size: 300%;
color: #699864;
}
Remove all the h2's from your "about me" gallery description. The CSS will
control size and other formating.
<html>
<p>Born and raised in Bronx, NY, I moved to Colorado in 1996. The majestic Rocky Mountains make Colorado an outdoor photographer's dream. My family and I do a lot of camping throughout Colorado and her neighboring states. This
site will feature photographs mainly from those areas.</p>
<p>My hope is that you find as much peace & joy looking at my photographs as I do when I'm out on my photographic adventures.</p>
<p>Enjoy The Outdoors!</p>
<p>Tom Potter</p>
</html>
Add this to your CSS to format the description.
.gallery_4315886 #albumDescription {
margin: 20px;
text-align: left;
font-family: Comic Sans MS, verdana;
font-size: 150%;
color: #699864;
}
Also change the gallery style to journal under customize gallery so it won't
be so wide.
Tom Potter
Jun-23-2008, 07:15 PM
First change this in your header. Notice you have an extra h3, see red, with no closing </h3>.
<h3><div id="myHeader">TOM POTTER PHOTOGRAPHY</div></h3><h3>
<div id="navcontainer">
...
...
</li></ul>
</div>
Change all that to this. Removes the h3's around the my_header div, the
CSS will control the size. Leave the one above the nav and add the closing
one a the end.
<div id="myHeader">TOM POTTER PHOTOGRAPHY</div>
<h3>
<div id="navcontainer">
...
...
</li></ul>
</div>
</h3>
Now in your CSS we'll format your my_header. You now have this in your
CSS. The h3's weren't needed because you're stating 300% for size here.
Add the color line to it. The font is already in there.
#myHeader {
margin: 10px auto 20px;
text-align:center;
font-family: Comic Sans MS, verdana;
font-size: 300%;
color: #699864;
}
Remove all the h2's from your "about me" gallery description. The CSS will
control size and other formating.
<html>
<p>Born and raised in Bronx, NY, I moved to Colorado in 1996. The majestic Rocky Mountains make Colorado an outdoor photographer's dream. My family and I do a lot of camping throughout Colorado and her neighboring states. This
site will feature photographs mainly from those areas.</p>
<p>My hope is that you find as much peace & joy looking at my photographs as I do when I'm out on my photographic adventures.</p>
<p>Enjoy The Outdoors!</p>
<p>Tom Potter</p>
</html>
Add this to your CSS to format the description.
.gallery_4315886 #albumDescription {
margin: 20px;
text-align: left;
font-family: Comic Sans MS, verdana;
font-size: 150%;
color: #699864;
}
Also change the gallery style to journal under customize gallery so it won't
be so wide.
If you go to my Home page now, you will see my Nav buttons are gone. Also, above the word "Home", I have ... ... (or, what look like 6 tiny square dots)
Allen
Jun-23-2008, 07:30 PM
If you go to my Home page now, you will see my Nav buttons are gone. Also, above the word "Home", I have ... ... (or, what look like 6 tiny square dots)
Oops you lost your nav html. Did you save it in a text file for backup? If not
we can regenerate the html. Here's a start, more links can be added later
when needed.
Replace this in your header
<h3>
<div id="navcontainer">
...
...
</div>
</h3>
with this, more links can be added.
<h3>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
</ul>
</div>
</h3>
All the customize code boxes in your control panel should be copied and
saved in text files for backup. Good habit to get into.
Tom Potter
Jun-23-2008, 07:32 PM
Oops you lost your nav html. Did you save it in a text file for backup? If not
we can regenerate the html. Here's a start, more links can be added later
when needed.
Replace this in your header
<h3>
<div id="navcontainer">
...
...
</div>
</h3>
with this, more links can be added.
<h3>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
</ul>
</div>
</h3>
All the customize code boxes in your control panel should be copied and
saved in text files for backup. Good habit to get into.
Oh, fear no! I saved everything prior to changing it. :O)
Thanks Allen! :O)
Tom Potter
Jun-23-2008, 07:49 PM
Oh, fear no! I saved everything prior to changing it. :O)
Thanks Allen! :O)
OK - I DO need some clarification. This is what was in my Header originally:
<h3><div id="myHeader">TOM POTTER PHOTOGRAPHY</div><h3>
<div id="navcontainer">
<ul>
<li><a href="<A href="http://tompotterphotography.smugmug.com">Home</a></li">http://tompotterphotography.smugmug.com">Home</a></li>
<li><a href="<A href="http://tompotterphotography.smugmug.com/galleries">Galleries</a></li">http://tompotterphotography.smugmug.com/galleries">Galleries</a></li>
<li><a href="<A href="http://tompotterphotography.smugmug.com/gallery/4315886_hj2aq">About">http://tompotterphotography.smugmug.com/gallery/4315886_hj2aq">About Me</a></li>
<li><a href="<A href="mailto:tompotterphotography@q.com/">Email</a">mailto:tompotterphotography@q.com/">Email</a>
<form name="searchBox" id="searchBox" method="get" action="/search/index.mg" onsubmit="checkInput('search','searchWords',' ')">
<a href="http://tompotterphotography.smugmug.com/ id=" mysearch="">
<input onclick="checkInput('search','searchWords','')" onblur="checkInput('','searchWords','search')"
id="searchWords" name="searchWords" value="search" type="text"><input name="searchType"
value="InUser" type="hidden"><input name="NickName" value="TomPotterPhotography" type="hidden">
<input src="http://www.tompotterphotography.com/img/spacer.gif" alt="Submit Search"
title="Submit Search" class="searchglass" onclick="if(document.searchBox.searchWords.value == 'search')
{ document.searchBox.searchWords.value = ' '; }" type="image">
</a></form>
</ul>
</div>
Can you indicate the total of what should be in the header instead of the above? Thx
Allen
Jun-23-2008, 08:21 PM
OK - I DO need some clarification. This is what was in my Header originally:
...
Can you indicate the total of what should be in the header instead of the above? Thx This looks like it. Replace the whole header with this.
<div id="myHeader">TOM POTTER PHOTOGRAPHY</div>
<h3>
<div id="navcontainer">
<ul>
<li><a href="http://tompotterphotography.smugmug.com">Home</a></li>
<li><a href="http://tompotterphotography.smugmug.com/galleries">Galleries</a></li>
<li><a href="http://tompotterphotography.smugmug.com/gallery/4315886_hj2aq">About Me</a></li>
<li><a href="mailto:tompotterphotography@q.com/">Email</a></li>
<form name="searchBox" id="searchBox" method="get" action="/search/index.mg" onsubmit="checkInput('search','searchWords',' ')">
<a href="http://tompotterphotography.smugmug.com/ id=" mysearch="">
<input onclick="checkInput('search','searchWords','')" onblur="checkInput('','searchWords','search')"
id="searchWords" name="searchWords" value="search" type="text"><input name="searchType"
value="InUser" type="hidden"><input name="NickName" value="TomPotterPhotography" type="hidden">
<input src="http://www.tompotterphotography.com/img/spacer.gif" alt="Submit Search"
title="Submit Search" class="searchglass" onclick="if(document.searchBox.searchWords.value == 'search')
{ document.searchBox.searchWords.value = ' '; }" type="image">
</a></form>
</ul>
</div>
</h3>
Tom Potter
Jun-23-2008, 08:31 PM
This looks like it. Replace the whole header with this.
<div id="myHeader">TOM POTTER PHOTOGRAPHY</div>
<h3>
<div id="navcontainer">
<ul>
<li><a href="http://tompotterphotography.smugmug.com">Home</a></li>
<li><a href="http://tompotterphotography.smugmug.com/galleries">Galleries</a></li>
<li><a href="http://tompotterphotography.smugmug.com/gallery/4315886_hj2aq">About Me</a></li>
<li><a href="mailto:tompotterphotography@q.com/">Email</a></li>
<form name="searchBox" id="searchBox" method="get" action="/search/index.mg" onsubmit="checkInput('search','searchWords',' ')">
<a href="http://tompotterphotography.smugmug.com/ id=" mysearch="">
<input onclick="checkInput('search','searchWords','')" onblur="checkInput('','searchWords','search')"
id="searchWords" name="searchWords" value="search" type="text"><input name="searchType"
value="InUser" type="hidden"><input name="NickName" value="TomPotterPhotography" type="hidden">
<input src="http://www.tompotterphotography.com/img/spacer.gif" alt="Submit Search"
title="Submit Search" class="searchglass" onclick="if(document.searchBox.searchWords.value == 'search')
{ document.searchBox.searchWords.value = ' '; }" type="image">
</a></form>
</ul>
</div>
</h3>
Excellent - I'm back in business, thanks! One final thing. Is there some place that will list various codes for various font types?
Allen
Jun-23-2008, 08:35 PM
Excellent - I'm back in business, thanks! One final thing. Is there some place that will list various codes for various font types?
Look here for safe fonts.
http://typetester.maratz.com/
vBulletin® v3.8.5, Copyright ©2000-2012, Jelsoft Enterprises Ltd.