Editing the Blank Style
To create borders or frames on your front page,
please see this page for the code.
If you are using the blank style you can customize
just about everything (like the navigation) by using Cascading
Style Sheets (CSS).
To get started, you can copy and paste any of the
CSS code sections below in to your HTML source (
button in your editor). All of the code must be contained inside
of a style tag at the top of the page:
<style>
your code here
</style>
One thing to note- color can either be the name
of the color (IE: Blue) or the RGB value (IE: #0000FF).
You can change the items that are red.
To change the main text on each page
body, div, td, tr, p
{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: black;
}
The color and height of the lines that seperate the stories
HR {
color: black;
height: 1px;
}
This will change how a text link looks
a {
text-decoration: underline; /* To remove
the underline enter "none" */
color: grey;
}
a:hover { /* This controls the link text when the mouse is over
it */
color: red;
text-decoration: underline;
}
This controls the the navigation items: home, stories,
etc
.nav {
font-family: Impact, Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: bold;
color: #444444;
text-decoration: none;
}
a:hover.nav { /* This controls navigation items when the mouse is
over it */
color: #000000;
text-decoration: none;
}
This is the text under the pictures
.pictext {
font-size: 11px;
color: #000000;
}
The text that display's site title
.sitetitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
color: #FF0000;
}
The text that display's your baby's name
.babyname {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
color: #444444;
}
This is text that shows the birth date, etc
.top {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #444444;
font-style: bold;
}
This is the text that shows the "Last Updated"
date
.updated {
font-size: 11px;
color: #AAAAAA;
}
Using a couple of the items above, here's a sample to make
your main text big and red and the top navigation really big and
green:
<style>
body, div, td, tr, p
{
font-family: Verdana, Arial;
font-size: 20px;
color: black;
}
.nav {
font-size: 34px;
font-style: bold;
color: green;
text-decoration: none;
}
a:hover.nav { /* This controls navigation items when the mouse is
over it */
color: white;
text-decoration: none;
}
</style>
|
