The following section may look complicated, but read it through, and
notice what the comments I have inserted actually apply to. Copy and paste any
sections of this code you wish to use.
Use a simple text editor like Notepad
to paste your code snippets together then save it as "<filename.css>"
Be extremely careful with your spelling and references to other code or
URL's.
I suggest you alter a section of code, save it, and test it out before moving
on to another section. This way, you can verify that each part of the code works
and it is also a lot easier to correct and trouble-shoot.
body {background-color:COLOR;
background-image:url(URL GOES HERE);
background-attachment:fixed;}
This is your
main background. You can search for an image through google, through wallpapers,
or other background sites. I would suggest www.grsites.com for some good textures for simple layouts. You would then
upload whichever image you so choose to a site such as www.photobucket.com .. Photobucket gives you the URL of
the image which you copy and paste into the code.
#mainLogo {visibility:hidden;}This hides the bolt logo. You can also upload your own bolt logo
image (which will be explained later)
#mainPageContainer { background-color:transparent;
}You dont have to do anything to this code,
it just makes sure that you can see your background and that there is no white
spots in it.
#mainSearchContainer {background-color:COLOR; background-image:
url(URL GOES HERE);}
a.peopleOnlineNumLink:link
{color:COLOR;}
a.peopleOnlineNumLink:hover
{color:COLOR;}
a.peopleOnlineNumLink:active
{color:COLOR;}
a.peopleOnlineNumLink:visited
{color:COLOR;}
#mainPeopleOnline {color:COLOR;}
input, option, select
{background-color:COLOR; color:COLOR; border: 1px solid
COLOR;}
This part is at the very top of your profile where it
tells you how many people are online, and the little search box. If you want it
a color, just change the part where it says COLOR. If you want an image, just
upload one and copy and paste the URL.
As far as the links. I usually
make all mine the same color, and use either white, or a lighter color for the
hover.
The the part, input, option, select, is the search button (keep in
mind, this button never works). You can change the colors to make it fit your
font and other layout colors.
#mainLoginContainer
{background-color:#COLOR; background-image: url(URL GOES
HERE);}
#mainLoginHello {color:COLOR; font-family: Tahoma;
font-size:10px;}
#mainLoginMemberLink:link {color:COLOR; font-family: Tahoma;
font-size:10px;}
#mainLoginMemberLink:active {color:COLOR; font-family:
Tahoma; font-size:10px;}
#mainLoginMemberLink:hover {color:COLOR;
font-family: Tahoma; font-size:10px;}
#mainLoginMemberLink:visited
{color:COLOR; font-family: Tahoma; font-size:10px;}
#mainLoginLogoutLink:link
{color:COLOR; font-family: Tahoma;
font-size:10px;}
#mainLoginLogoutLink:active {color:COLOR; font-family:
Tahoma; font-size:10px;}
#mainLoginLogoutLink:visited {color:COLOR;
font-family: Tahoma; font-size:10px;}
#mainLoginLogoutLink:hover
{color:COLOR; font-family: Tahoma; font-size:10px;}
#mainLoginInviteLink:link
{color:COLOR; font-family: Tahoma;
font-size:10px;}
#mainLoginInviteLink:active {color:COLOR; font-family:
Tahoma; font-size:10px;}
#mainLoginInviteLink:visited {color:COLOR;
font-family: Tahoma; font-size:10px;}
#mainLoginInviteLink:hover
{color:COLOR; font-family: Tahoma; font-size:10px;}
#mainLoginHelp:link
{color:COLOR; font-family: Tahoma; font-size:10px;}
#mainLoginHelp:active
{color:COLOR; font-family: Tahoma; font-size:10px;}
#mainLoginHelp:visited
{color:COLOR; font-family: Tahoma; font-size:10px;}
#mainLoginHelp:hover
{color:COLOR; font-family: Tahoma; font-size:10px;}
#mainLoginMyLink:link
{color:COLOR; font-family: Tahoma; font-size:10px;}
#mainLoginMyLink:active
{color:COLOR; font-family: Tahoma; font-size:10px;}
#mainLoginMyLink:visited
{color:COLOR; font-family: Tahoma; font-size:10px;}
#mainLoginMyLink:hover
{color:COLOR; font-family: Tahoma; font-size:10px;}
#mainLoginNotifier:link
{color:COLOR; font-family: Tahoma; font-size:10px;}
#mainLoginNotifier:active
{color:COLOR; font-family: Tahoma;
font-size:10px;}
#mainLoginNotifier:visited {color:COLOR; font-family:
Tahoma; font-size:10px;}
#mainLoginNotifier:hover {color:COLOR; font-family:
Tahoma; font-size:10px;}
#mainLoginMemberThumbnail {border:1px solid COLOR;
margin-left:20px;}
This part looks complicated and scary, but it
really isnt. This is the box for your greeting and where you would upload your
new bolt logo (if you have one made). You can make it a solid color if you wish,
or upload your logo and copy and paste it where it says URL GOES HERE. (still
later, I will key you in on how to make bolt logos.)
The rest of this
code is for your links and font that are in your header. Just pick a color where
it says color, and pick a font (usually fonts are tahoma and arial. bolt only
allows certain fonts. (soon i will have a list of all the fonts that bolt
allows). Then pick the size that you want all the links. 10px is standard bolt
size, you can make them bigger or smaller.
The last part of this code is
the border that goes around all your boxes. You can pick a color that matches
your layout, or you can make it the same color as your layout so that you dont
have any lines or borders.
#mainMenuContainer
{background-color: COLOR; background-image:url (URL GOES
HERE);}
#mainMenuLink:link {color:COLOR; font-size:10px; font-family:
Tahoma;}
#mainMenuLink:active {color:COLOR; font-size:10px; font-family:
Tahoma;}
#mainMenuLink:hover {color:COLOR; background-color:COLOR;
font-size:10px; font-family: Tahoma;}
#mainMenuLink:visited {color:COLOR;
font-size:10px; font-family: Tahoma;}
#mainMenuLinkSpacer {color:COLOR;
font-size:10px; font-family: Tahoma;}
This is the main navigation
bar.(where it says people | boards | clubs | etc...) You can choose a background
color or image in the first line.
The rest of it changes the link colors
and font family and size. Choose a color, choose a size, choose a font. The last
line is to change the appearance of the vertical lines in the menu. Just choose
a color.
#profileModule_badges
{background-color:COLOR; background-image: url(URL GOES
HERE);}
.badgesMemberName {color:COLOR; font-family:Tahoma; font-weight:bold;
font-size: 10px;}
This is the part where your badges normally
scroll.
The first part is for the background that you would like to have
in your badge scroll. You can make it part of your background, or choose a color
to fit in. If you put an image behind here.. it really doesnt get seen too well
because the badges scroll across and can looks messy. It is best to use a solid
color. Again, you can change the font, colors, and etc.
#contentHeader{border:1px solid COLOR; background-color:COLOR;
background-image: url(URL GOES HERE);}
#contentHeader #title
{font-family:Tahoma; font-size:10px; font-weight:bold;
color:COLOR;}
#contentHeader a {color:COLOR;}
This is the
headers of your profile. The top box of your About Me, Snapshot, Quick Stats,
etc.. It is not the whole box, just the top part. You can choose a color, or an
image if you wish.
The rest is the font size and color that you
wish.
#profileModule_mysnapshot
{background-color:COLOR; background-image: url(URL GOES
HERE);}
This is for the background of your snapshot. You can
choose a color, or an image, or you can choose nothing at all.
#profileModule_profileMenu {background-color:COLOR;
background-image: url(URL GOES HERE);}
.menuLight {color:COLOR;
font-family:Tahoma; font-size:10px; font-weight:bold;}
.menuLightOver
{cursor: hand; color:COLOR; background-color:COLOR; font-family:Tahoma;
font-size:10px;}
.dotted_line{width:100%; height:1px; background:COLOR;
bottom right repeat;}
This is your profile menu. (the area right
under your snapshot). This can be replaced with a color, an image, or it can be
transparent by putting no code at all.
Menu light changes the font that
is inside the box, the link and the colors.
Menu Light Over is for the
hovering effect.
The dotted line is the lines separate each area in this
box. You can choose a color, or chance the height to where there is no line at
all.
#profileModule_quickStats
{background-color:COLOR; background-image: url(URL GOES
HERE);}
a.memberLink:link {color:COLOR;}
a.memberLink:hover
{color:COLOR;}
a.memberLink:active {color:COLOR;}
a.memberLink:visited
{color:COLOR;}
a:link {color:COLOR;}
a:hover {color:COLOR;}
a:active
{color:COLOR;}
a:visited {color:COLOR;}
This is for your quick
stats. The first line is for changing the background. You should know the drill
by now.
The rest is for your links and and font and colors of this
area.
#listingRecord, #listingRecordAlt
{background-color:COLOR; background-image: url(URL GOES HERE);}
table,td,tr,p
{font-family: Tahoma; color: COLOR; font-weight: bold; font-size: 10px;}
b
{font-family: Tahoma; color: COLOR; font-weight: bold; font-size:
10px;}
FINALLY!! This is your about me section. The first code is
for your background of the about me, also called a foreground. You can make this
the same color or image as your background or choose a whole new
image.
The next line is for bolt's questions, and the last line is for
your responses. You can change the color, font, and size as in previous
steps.
#mainSiteMapContainer
{background-color:COLOR;}
#siteMapListHeading {color:COLOR; font-size:10px;
font-family: Tahoma; background-color:COLOR; text-align:
left;}
#siteMapListLink:link {color:COLOR; font-size:10px; font-family:
Tahoma;}
#siteMapListLink:active {color:COLOR; font-size:10px; font-family:
Tahoma;}
#siteMapListLink:visited {color:COLOR; font-size:10px; font-family:
Tahoma;}
#siteMapListLink:hover {color:COLOR; font-size:10px; font-family:
Tahoma; background-color: COLOR;}
This is for the box all the way
at the bottom of your profile. (Where is has all the links such as explore,
express, channels, etc.)
The first line is for a background. Choose a
color and replace it where it says color.
The next line is for the
headings (Explore, Express, Channels, Network) you can make the background the
same color as the main background or choose a different one to highlight the
links. Also choose the font and the color.
The rest is for the other
links under the headers. Again, choose link colors, font, size and
etc.
a.pBlueLink:link
{color:COLOR;}
a.pBlueLink:hover {color:COLOR;}
a.pBlueLink:active
{color:COLOR;}
a.pBlueLink:visited {color:COLOR;}
a.pCaptionLink:link
{color:COLOR;}
a.pCaptionLink:hover {color:COLOR;}
a.pCaptionLink:active
{color:COLOR;}
a.pCaptionLink:visited {color:COLOR;}
This is
for your photo album.
The pBlueLink is for you links that say "add photo,
send invite, edit album, etc.. etc..)
The pCationlink is for all your
captions.
Just pick a color.
#contentBlock
{background-color:COLOR; background-image: url(URL GOES HERE);
color:COLOR;}
This is for your badges page. the first color is for
the background, or you can choose an image. the second color is for all the
writing and the links.
a.memberLink:link
{color:COLOR;}
a.memberLink:hover {color:COLOR;}
a.memberLink:active
{color:COLOR;}
a.memberLink:visited {color:COLOR;}
This is for
the club's page. Just choose a color for the links.
textarea {background-color:COLOR; background-image: url(URL GOES
HERE); color:COLOR; font-family:Tahoma; font-size:10px; border: 1px solid
COLOR;}
this is for the area inside your tagbook. Choose a
background, or an image an place it in the appropriate blanks. Then go to choose
a font color, family and size. Then you can pick the border that goes around
your questions. Or you can choose not to have a border by making the border size
0px.
#ad728x90Container {background-color:
COLOR;}
Finally! This is the last piece of information that you
need for completing your layout. This is just for a background behind all the
adds for that are in your profile.. You can choose a color, or leave it like it
is to have no background.
Now you are done! With creating your layout.
You need to save it.
First. Click file, Save as.
-Where it says
filename, type in the name you wish .css (ex: whateverprofile.css)
--Then
where it says save as file type, make sure the all files option is
selected.
Once your profile is saved, you must upload it. If you have a
geocities account, that works perfectly.. If you dont, I suggest that you sign
up.
Once you are in geocities. On the right side there is a box that
says, Advanced Toolbox. Under there is a link that says file manger and one that
says easy upload. Click on Easy Upload.
Then click the browse button and
find where you saved your layout. It will upload the code for you.
Now
you have to link your style sheet in your tagline.
Log in to bolt, and
click on your profile. Click on edit tagline.
Copy and paste this code in
your tagline
<link rel="stylesheet" type="text/css"
href="URL OF STYLE SHEET">
All you have to do is add the link
to your style sheet. Ex: < link rel="stylesheet" type="text/css" href=
"http://www.geocities.com/your_folder/my_style.css"
>
Also..
make sure there are no spaces
after the first
< and before the last
>Now save your tagline, and refresh you page.
Your layout should have been replaced by the one you just
made.
Congratulations, you have now finished your first stylesheet. Go
and have a quick rest and admire your results.
If you have any questions.
Feel free to contact me a bolt note anytime!
In the above script the word COLOR will be a reference number
which is translated by the HTML code to a specific colour and is entered by
using a # symbol and six hexadecimal numbers between 0-9 and A-F. Here are a few
examples