Guide to Customizing your cB Profile. VERSION 2, Version 2 with a DIV tutorial. Options

[freeflow]

Hey Guys!
As a result of some downtime at cB the tutorial to create a cB profile was lost. This tutorial is a breakdown of how you can create your own customized version of your cB profile. Along with a list of resources to help you out in the end. This and the previous tutorial were composed by Toya (freeflow) and Rachael (digitalfragrance). Feel free to PM either of us if you feel that you need help. Also feel free to post in this thread as well. We will try our best to have it cleaned out as soon as possible.

Basics: It would be helpful if you had some basic CSS and HTML knowledge. This tutorial does not go in debt on what somethings are so if you don't know the basics take a minute to check out the following site. (W3 SCHOOLS)

General Customization
---------------------------------------------

To begin the customizing of your profile click My Account . After that click the word "customization". After you will have two sections. One is a header and the other is footer. All the style codes placed in this tutorial will go in the header section unless stated otherwise.

Make sure to place the following codes in style tags if they do not already have them.

CODE

<style type="text/css"> code here </style>

=================================

Step 1: The Body & Scrollbar Colors
The following code allows for you to edit the color and style on the page. This code also sets the scrollbar colors of your page. To edit the code change ##### to the hex code or color that you wish. If you have a background image you'd like to use upload it and place the url where it says "URLTOBACKGROUNDIMAGE" (Make sure the quotations are still there.

CODE

body{
background-color: #####;
background-image: url("URLTOBACKGROUNDIMAGE");
background-repeat: repeat;
scrollbar-arrow-color:######;
scrollbar-track-color:#####;
scrollbar-shadow-color:#####;
scrollbar-face-color:#####;
scrollbar-highlight-color:#####;
color: #####;
}

- Background Color - Edits the color of the background.
- Background Image - If you wish to add a background image. Upload the image. Example sites would be (Photobucket & ImageShack). Place the url inbetween the quotations aka where it says URLTOBACKGROUNDIMAGE.
- Background repeat - This is where you state the way you would like the background to repeat:

• Repeat : This allows for it to repeat in all directions.
• Repeat-y: Allows for your background to repeat vertically.
• Repeat-x: Allows for your background to repeat horizontally.
• No-repeat: Makes sure that the background does not repeat.

- Scrollbar Arrow Color - Changes the color of the arrow on the scrollbar.
- Scrollbar Track Color - Edits the background color that the scrollbar and arrows are on.
- Scrollbar Shadow Color- The color of the shadow behind the arrows and the bar.
- Scrollbar Face Color - The background color for the arrows and the bar.
- Scrollbar Highlight Color - The color of the highlighted portion of the arrows and the actual bar. Its really small I wouldn't worry about it.
- Color - This edits the color of the overall text on the page.


Step 2: Editing Table Colors
The following code shows you how to edit the table colors of your cB profile. The cB profile tables are broken up into innterbox and outerbox. The innerbox edits the color of the main box and outerbox edits the color of the box with the header inside of it.

CODE

.innerbox, .entrybox{color: #######; background-color: ###### !important;}

For this portion of the code change the color to what ever color you want the inner table fount to be. Change the background color to the color you want the tables to be. Make sure you do not delete the !important at the end.

CODE

.outerbox{background-color: #######; color: #######;}

Change the background color to the color you want behind the headings of the tables. Chance color to the color you want the headings to be.

* One easy way to see what I mean is to test it out on your profile and don't forget all of this needs style tags.


Step 3: The Footer
To edit the color of the footer toolbar. (Also known as the one that says " ©Createblog 2007" ) use the following code.

CODE

#footer{background-color: ######; color: ######;}

Background color edits the background color of the footer and color edits the color of the text.


Step 4: Link boxes
To edit the color of the link boxes you will use the following series of codes. Make sure you read carefully so you know which code edits what.

CODE

.linkbox {color: #####; background-color:###### !important;}

This code edits the font color and the background color of the box under your picture with the "Edit Profile" link inside of it.

CODE

.alertbox {color: ######; background-color:####### !important;}

The alerbox edits teh box in the top right hand corner with the links to your profile, blogs, photos, and friends. Color sets the color of the lines under the links and background color sets the color of the entire box.

Step 5 : Dropdown Link box at the top
The following code edits the color of the dropdown link box at the top as well as the inner color of the box of links in the top right hand corner.

CODE

li, li.top{color: #####; background-color:##### !important;}

Color sets the color of the font/text and background color sets the color of the background for the dropdown and the background of the links in the top right hand corner.

Step 6: Comment section
The following code edits the color of the comment font and it also edits the color of the inner box of the comments.

CODE

.comment_body smaller grey, .comment_body{font:normal 10px tahoma; color:######; background-color: ######; }

Change color to the color of your comment font. Change the background color to the color you want of the inner tables. If you want it to be transparent replace ###### with the word transparent.

Step 7: Editing the overall font style, size, etc of the page

CODE

body,table, td, li, p, div{font-size: #px; font-family: Fontname; color: #######;}

- Font size Edits the size of the font. Change # to the size.
- Font Family Edits the font so change fontname to the font you want.
- Color - Edits the color of the basic font on the page.

Step 8 Editing the Link Style
The following series of codes tells you how to edit a particular link or style of the link.

CODE

a, a:link{font:normal #px  fontname; color: ###### !important;}

This edits the color of the normal links. To edit this you change #px (only change#) to the font size you want for the links. Where it says "fontname" that is where you enter the font name you want. Change ###### to the color you want. Make sure you keep the !important there. If you wish for the font weight to be different for example bold change normal to bold.

CODE

a:active{font:normal #px fontname; color: ###### !important;}

This changes the color of all links after they are clicked. Change the font-weight to bold or any other if you wish. Normal means it will be a normal non-bolded link. Change the font name to the font you want. Change color to the color of the color you want.

CODE

a:visited{font:normal #px fontname; color: ###### !important;}

This edits the colors of links that you o r your visitor has already cicked. Change # to the font size. Replace font name with the font you want. Then change ###### to the color of the font you wish.

CODE

a:hover{font:normal #px fontname; color:###### !important;}

A Hover edits the style of the link when its hovered. Change normal only if you wish for your font to have a different weight such as bold, etc. Change # to the size of the font you want. Change fontname to the font and change color to the color you want.

Step 9: Bold and Italic text
This pretty much explains how to edit bold style or italic style text on your createblog profile. Rather than being redundant I will simply post the code. B means bold and I means italic. But keep in mind you can not use them in all parts of your cB profile. (By the way I added in underline that is edited by the U).

CODE

b{ color: ######; font-family: fontname; font-size: #px; }
i{ color: ######; font-family: fontname; font-size: #px; }
u{ color: ######; font-family: fontname; font-size: #px; }

Thats all you need to know to create a simple layout for your cB Profile! Congrats guys . The rest of this tutorial goes onto the basics, adding on additional modules, and resouces.

Additional Add-ons to your profile.
---------------------------------------------

How to Change the comment box color

CODE

textarea, input{background-image: url(""); color: #######; border-width: #px; border-color: #####; font-weight:normal; color: #####;}
select{background-image: url(""); color: #######; border-width: #px; border-color: #####; font-weight:normal; color: #####;}

First change the colors to your liking and make sure you add style tags. It edits the button color as well.

How to Add a custom Module
(Contributed by Jusun codes taken from his cB Profile. Micron.createblog.com)

To add a module to the side right under web skills. Use the following code. Place in Footer.html

CODE

<div class='outerbox col4'>
<h3>TITLE</h3>
<div class='innerbox'>
TEXT
</div>
</div>

Change the word "TITLE" to what you want the title of your box to be. Change TEXT to whatever you want to add there. You can have as many as you want but make sure you don't erase any of the closing tags by accident.


- To add a main module place the following in header HTML

CODE

<div class='outerbox col3'>
<h2>TITLE</h2>
<div class='innerbox'>
TEXT
</div>
</div>

Change the word "TITLE" to what you want the title of your box to be. Change TEXT to whatever you want to add there. You can have as many as you want but make sure you don't erase any of the closing tags by accident.

How to Add a Music Player

To add a music player or a slideshow you should first create a music player or a slideshow. If you don't know where for slideshows you can go to Slide.com . If you wish to create a music player you can try Imeem or My Flash Fetish.

Once you have your music player created, depending on where you want it to go thats where you place the code. If you wish for it to be at the top of your page place the code in Header HTML. If you wish for it to be at the bottom place it in the Footer section. If you lastly for it to be in a module on either side of the tables please read the above section.

How to Add a Banner at the top of the page

The first thing you need to do is create your banner . The usual width is around 773 or 775 px. Its up to you which width you want because you CAN change the width of the tables. Once you have your banner made you need to make space for the banner at the top. To do so add this code to your profile codes or add it inbetween style tags.

CODE

body{
margin-top: ###px;
}

Change the ### to the height of your banner + a few px. For example if your banner height is 300 px maybe make it 305 to give some space from your banner to your profile.

Secondly, you need to position your banner. So take the following code:

CODE

<div class="head" style="position: absolute; left: 0px; top: 0px;">
<img src="URLTOBANNER"></div>

Change the URLTOBANNER to your banner URL first. That way you can see how it will look. Make the top number higher if you want the banner lower. If you wish to move the banner more to the right make the left number higher. Right now both are set to 0. So go ahead and edit to your liking.

How to Add a Banner at the top of the page (Under the navigation)

To add a banner under the navigation simply add the following code in header HTML . Where it says URLTOBANNER replace that with your banner url.

CODE

<img src="URLTOBANNER">

How to Add a Banner at the bottom of the page.

To add a banner at the bottom of the page simply add the following code to Footer HTML. Where it says URLTOBANNER change that to your banner URL.

CODE

<img src="URLTOBANNER">

Need a Banner? Well check out our premade section here

How to Hide the Footer

CODE

<style type="text/css">#footer{display:none;}</style>

How to Hide the Navigation at the top

CODE

<style type="text/css">#header{display:none;}</style>

How to Add more color to the top navigation

(Contributed by Amanda)

CODE

#nav li, #nav li#search, #nav li.submit { background-color:#000000;}
#nav li ul li { background-color:#0000FF;}
#nav li {border-right:1px solid #00FF00;}
#nav li ul li.top { border-top:1px solid #FFFF00; }
#nav li ul li { border-bottom:1px solid #FF00FF; }

Line 1 - black background
Line 2 ]- blue drop down background
Line 3 - green borders
Line 4 - yellow border
Line 5 - pink borders

How to Change the color of your friend pics

(Contributed by Amanda)

CODE

.standardbox{background-color:#000000;font:normal 9px verdana; color:#ffffff;}  
.profile {background-color:#FF0000;font:normal 9px verdana; color:#000000;}

How to Change the color of Winks, alerts, etc

(Contributed by Amanda)

CODE

#TB_window {background-image:url(''); background-repeat: repeat; background-attachment:fixed; background-color:#ffffff;}

FAQ

• How come when I typed in the color it didn't come out?
  Make sure that you have the # sign before the color code. If you are straight out type the color name you don't need it but if you plan on using a hex color code you do need that sign.
• Can I add other properties besides the ones you listed?
  Yes because of the way some of use our codes we do not add font-family, font-size, etc for every single aspect of the code. If you wish to do so for your own preferences go ahead and do so.
• Where can I find the color codes I need?
  - http://html-color-codes.com/
  - http://www.webmonkey.com/reference/color_codes/
• Can you use myspace layouts or website or xanga layouts on cB profiles?
  Its not a good idea because it will screw up many aspects of your profile. Especially myspace layouts. Plus you can not edit the code with out the permission of the creator. It will also be a lot of editing. Just start fresh.
• Where can I get premade cB profile layouts?
  As of now we do not have any premade layouts yet. It may come in the future that you can actually find them on cB with the other layouts but its still being considered. If you want one made for you , you can post in this
  thread.
• I don't get it. Where can I get extra help?
  Feel free to PM me (Toya) or Rachael if you have any questions or need extra help. You can also post in the webmaster's corner for more help.
• How do I change the width of the tables?
  Read the following post on IDs. Then in the brackets you make in your CSS set a width and height there. Click here for the list of IDs

[freeflow]

Haha Thanks :)