THE BOLT STYLESHEET
 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.

 

Here is the blank stylesheet, the user code is in this colour .

 

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

" #ff0000 " will produce RED
" #77bb00 " will produce OLIVE
" #aa95cc " will produce Light Purple

If you check out the freebies section you will find links to either an online colour generator or some software you can use to produce your colours.
I also have a Forum where you can seek further advice or leave messages and tips.
Follow the link from HERE and sign up now.

 

© Joculator - 2005

Hosted by www.Geocities.ws

1