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]

Creating a DIV profile

==================================
This second half of the tutorial focusses on creating a DIV overlay on a cB profile. It is not as hard as it seems but I'd really like that if you plan on doing this part that you either:
A) Understand DIVS already.
B) Completely understand the first half of the tutorial.
C) Have common HTML knowledge and understand how to position DIVS.
With this tutorial I don't plan on going into great detail because some prior knowledge should be known. You can learn the basics at W3Schools. (Link above) Also feel free to ask questions in this thread or feel free to PM me. That way I can answer it personally while keeping the thread clean.

Here are some DIV examples:

By: Mona (Davinci)

By: Toya (Freeflow)

By: Mark (TheMarkster)

Hiding your Profile

==================================
Step 1: Your DIV Idea
Prior to even starting your DIV you need to decide what you wish to show and what you do not want to show, what is going to go where, are you going to include any of the current cB profile? or are you not? All in All I'm asking that you guys kind of create a map of what you want to do. What I've noticed is people just jump into these things and this is why you don't do too well when it comes to actually getting it. Seriously I suggest opening notepad and making either a list of what you want to keep from the cB profile or what you want to hide. For example here is a list of what I want to keep:

• Comments

Short and sweet. That way I know that I want to hide everything besides the comments and position my DIV accordingly. Also you can keep things from other pages like your photo pages. It will be more work and you will have more positioning to do etc. If you plan on doing this make sure you list what you want to keep from those pages too. You'll understand more when we get to the ID section.


Step 2: Display: None
To hide certain areas in your profile we are going to do it by setting their properties to display:none. To do so we need to know the ID. I'll get to the IDs later I just want to make it clear that when you set anything to display:none; its going to be hidden. You will also use visibility: visible in your code as well. This setting makes things visible. Pretty self explanitory.

Before we continue if you get lost at a step don't give up just go back and re-read to see what you might've done wrong.

Step 3: ID's
Our lovely creator Jusun (Micron) created IDs for all the sections of the cB profiles. This allows for us to simply hide parts of the profile while keeping the parts we want. You can find the entire list of ID's here. Pretty much you will read me saying "Find the ID" which means refer to that page or the quote I make of it to find the ID you need. The ID names are pretty self explanitory. Before you continue please read this post so you understand how to write them out in your codes and so you understand the three types of IDs (profile, blog, photo) as well.

For profile page: #splash, #bestfriends, #aboutme, #contactme, #comments, #links, #stats, #recententries, #recentphotos, #favorites, #submissions, #skills

For blog pages: #splash, #entries (this encompasses all the entries), #links, #subprofile, #stats, #cats

For photos pages: #splash, #photos, #links, #subprofile, #stats, #cats

For friends page: #splash, #links, #friends

Since there are duplicate identifiers between your pages, to avoid inadvertently styling for across all your pages, I would recommend using the page identifier. For example, if I want to style #splash on my profile page, the code would be:

#profile div#splash { /*css code here*/ }

If I want to style #splash on ALL my pages, the code would be:

#splash { /*css code here*/ }

Step 4: Hiding your Main profile
The first thing we're going to do is hide parts of our profile. As you guys read above I stated in my list that I wanted to only keep my comments. So as you guys read above that the comment section has its own specific ID. So what I have to do is set that too visibiity: visible; later while setting everything else too display:none. You guys will do the same. Set anything that you want hidden to display:none; and anything you what visibile to visibility:visible;

Now you are probably wondering how do I do that? What you're going to do is first you're going to make a style tag.

CODE

<style>

Then you will type out #profile div# because that's what we're starting with. Decide what you want to hide first. I'll start with splash. Then you type splash after the # . So your tag should look like this:

CODE

<style>
#profile div#splash

Simplly add brackets like you would for any other css code { } . Inside of the brackets type in display:none; to hide the section.

CODE

<style>
#profile div#splash{ display:none;}

So lets recap what I did to hide the splash section of the profile
1) First created a style tag ( you do not do this everytime just for the first one).
2) I decided I wanted to hide it on the main profile so I typed #profile div#
3) I decided I wanted to hide the splash . Which gave me #profile div#splash
4) Since I wanted to hide it I set it to display:none; #profile div#splash.

Its also good to add !important; to make sure that it goes through. So I'm now going to change the code too:

CODE

<style>
#profile div#splash{display:none !important;}

There we hid the first thing on the profile. Rather than being Redudant I will let you guys go through and hide the rest of the info on your profile. It will go like this:

#profile div#idhere{display:none !important;}

Do that for everything you want to hide so we stay on the same page. Once your done you should have a long list under your style tag. Here is mine.

CODE

<style type="text/css">
#profile div#stats{display:none !important;}
#profile div#splash{display:none !important;}
#profile div#bestfriends {display:none!important;}
#profile div#aboutme {display:none !important;}
#profile div#contactme {display:none!important;}
#profile div#links{display:none!important;}
#profile div#recententries {display:none!important;}
#profile div#favorites {display:none !important;}
#profile div#submissions {display:none !important;}
#profile div#skills {display:none !important;}
#profile div#recentphotos{display:none !important;}
#profile div#footer{display:none !important;}</style>

I understand this part is really confusing so you really should re-read it a few times rather than striaght out copying my code because you should undertand how you hide your profile. That way when you make your second you won't have as many problems. Also you will choose what you want to hide and what you don't. For example in Mona's example she kept her stats and comments rather than just comments. Its really up to you.

Step 5: Hiding on other Pages
Before reading this step make sure that you read step four. This is the same thing. Instead of writing
#profile div#IDhere

You will write either

#photos div#IDhere {display:none !important;}
#friends div#IDhere {display:none !important;}
#blog div#IDhere {display:none !important;}

Its up to you what you want to do. If you feel that you use your blog a lot it would be useful to do this. For me I don't so I didn't want to incoporate the blog pages in my layout much. Once again its up to you. Also make sure that you only hide what you want to hide. Make sure the codes goes between style tags. Anything that you want visible you should not make a code for it just yet. Thats the next step.

Why didn't you hide the other page info? Because I wasn't linking them on my profile and I didn't plan on showing them. If you don't plan on showing your photo, blog or picture page you don't need to go through and hide everything. Its up to you if you want too though.

Step 6: Keeping things visible
Once you got everything hidden the next step is to set whatever you want to keep viewable to visibility:visible. Why do we do this? To make sure that no other part of the profile hides it. You should be ok if you skip this step but just incase.

So in my example above I stated I only wanted my comments to show from the original cB profile. So to my code abaove I'm going to add:

#profile div#comments{visibilty: visible;}

My final code looks like this:

CODE

<style type="text/css">
#profile div#stats{display:none !important;}
#profile div#splash{display:none !important;}
#profile div#bestfriends {display:none!important;}
#profile div#aboutme {display:none !important;}
#profile div#contactme {display:none!important;}
#profile div#links{display:none!important;}
#profile div#recententries {display:none!important;}
#profile div#favorites {display:none !important;}
#profile div#submissions {display:none !important;}
#profile div#skills {display:none !important;}
#profile div#recentphotos{display:none !important;}
#profile div#footer{display:none !important;}
#profile div#comments{visibilty: visible;}</style>

If you plan on making more than one page visible from your profile you must go through and set the other options as well. You may be ok if you don't but I think its a good idea to set it to visible for precautions.

Step 7: Positioning your Image
If you plan on using a main image for your DIV go ahead and start positioning it now. I think its easier to position in your CSS. To do so you will use the following code:

CODE

#DIVNAME{position: absolute; left: 50%; margin-left: #px; top: 0%; margin-top: #px; width: ###px; height: ###px;}

- DIVNAME - Is the name of the DIV. Make sure its something different and not just header because that is what you might of hid in your coding already.
- Position: absolute- is the style of positioning we will be using.
- Left: 50% - Sets the image to be centered wherever you position it.
- Margin left - Allows you to move your image to the left and write. Make the number higher to move more to the right and lower to move more towards the left. You may use negative numbers.
- Top: 0% - Keeps the image from being in the midle of the page.
- Margin Top - Sets where the image will be. Make the number smaller to go higher up and bigger to go lower.
- Width - The width of the div goes here. With images you can use the width of the image.
- Height - The height of the div goes here. If you are using an image DIV go ahead and set it to the image height + 2px.

Once you've got that code now its time to add this code. Place it in your header.html spot for now. But make sure you close the style tag first

CODE

<div id="DIVNAME"><img src="urltoimage" alt="text" border="0"></div>

- DIVNAME - Is the same name you put in the previous code.
- URLTOIMAGE - Is the image url you wish to use.
- Alt - The text that is seen when the image is hovered.
- Border - Creates a border around the image.

You can also use this code provide by the lovely Amanda. Editing it is the same.

CODE

<div style="top:0%; margin-top: -45px !important;height: 250px; left: 0%; margin-left: -3px !important; align=center; position absolute;"><img src="IMG URL GOES HERE"></div>

Having trouble positioning?
Here is part of a positioning tutorial from the myspace DIV tutorial but I'm not going to get into depth on how to position. You should have some current knowledge. You can always PM me for more help.

Quick lesson on "position: absolute"
top: 0% = moves to top of page
top: 50% = moves to middle of page
top: 100% = moves to bottem of page
left: 0% = moves to left of page
left: 50% = moves to center of page
left: 100% = moves to right of page
margin-left: -15px = moves left 15px
margin-left: 15px = moves right 15px
margin-top: 45px = moves down 45px
margin-top: -45px = moves up 45px

Once you have everything set your code should look something but not exactly like this. Depending on your DIV and how you decided to make it above our codes will look similiar but not exactly the same.

CODE

<style type="text/css">
#profile div#stats{display:none !important;}
#profile div#splash{display:none !important;}
#profile div#bestfriends {display:none!important;}
#profile div#aboutme {display:none !important;}
#profile div#contactme {display:none!important;}
#profile div#links{display:none!important;}
#profile div#recententries {display:none!important;}
#profile div#favorites {display:none !important;}
#profile div#submissions {display:none !important;}
#profile div#skills {display:none !important;}
#profile div#recentphotos{display:none !important;}
#profile div#footer{display:none !important;}
#profile div#comments{visibilty: visible;}
#headhoncho{position: absolute; left: 50%; margin-left: -30px; top: 0%; margin-top: 10px; width: 300px; height: 500px;}
</style>
<div id="headhoncho"><img src="http://cbrocks.com" alt="Go Toya!" border="0"></div>

As you guys can see from the code I edited it with random positions so you can get an idea of what the code looks like edited:

CODE

#headhoncho{position: absolute; left: 50%; margin-left: -30px; top: 0%; margin-top: 10px; width: 300px; height: 500px;}
</style>
<div id="headhoncho"><img src="http://cbrocks.com" alt="Go Toya!" border="0"></div>

Once your profile is hidden and your image is set you can now position the things you wanted included in your profile. If you have more images to position this is the time to to do it before you move on to the next step.

*Note: Any image maps you do go in that DIV. If you create an image map just replace the image code with that one and add in the urls etc. Same goes for an image slice.

Step 8: Positioning parts of the cB profile.
Now that you've got your image/images up and running you can position whatever you left open. I am only going to show you guys how to position the comments. All the other aspects are done the same way. So don't worry. I also suggest you understand how to position things before you try doing this. Also make sure your image looks ok in more than one browser. That way you don't have more problems to deal with in the end.

This part of the code you will add inbetween your style tags. Since I'm going to show you how to position the comments you will go ahead and use the following code:
#profile div#IDhere
Except I am going to replace IDhere with the word comments. So I now have
#profile div#comments
To position them I will use this code inbetween the brackets {position: absolute; left: 50%; margin-left: ###px; top: 0%; margin-top; ###px; width: ###px; height: ###px;}

Sso the code that goes inbetween my style tags is:

CODE

#profile div#comments{position: absolute; left: 50%; margin-left: ###px;  top: 0%; margin-top; ###px; width: ###px; height: ###px;}

Instead of re-explaining everything I will just quote what I said before incase you forgot what a certain thing means.

- DIVNAME - Is the name of the DIV. Make sure its something different and not just header because that is what you might of hid in your coding already.
- Position: absolute- is the style of positioning we will be using.
- Left: 50% - Sets the image to be centered wherever you position it.
- Margin left - Allows you to move your image to the left and write. Make the number higher to move more to the right and lower to move more towards the left. You may use negative numbers.
- Top: 0% - Keeps the image from being in the midle of the page.
- Margin Top - Sets where the image will be. Make the number smaller to go higher up and bigger to go lower.
- Width - The width of the div goes here. With images you can use the width of the image.
- Height - The height of the div goes here. If you are using an image DIV go ahead and set it to the image height + 2px.

Keep saving and checking your page to make sure that your positioning is correct. Once you got it done. Congrats! you successfully positioned things on your page.


To position other things on the main profile you will do the same.

CODE

#profile div#IDHERE{position: absolute; left: 50%; margin-left: ###px;  top: 0%; margin-top; ###px; width: ###px; height: ###px;}

Where it says IDhere replace that with the ID you plan on editing.

Same goes for other pages. Of course you will change the word profile to the page you are editing. (EX: Blog, photos, friends). And then add in the ID (Go back to the beginning of the post if you forgot the ID) and position it.

Save and then check where it is. Keep playing around with it till its in the spot you wish for it to be in.

These steps are not supposed to happen fast. At least not when you're first starting. Take your time and keep trying. Sometimes it takes a while to get something positioned properly.

The code so far!

CODE

<style type="text/css">
#profile div#stats{display:none !important;}
#profile div#splash{display:none !important;}
#profile div#bestfriends {display:none!important;}
#profile div#aboutme {display:none !important;}
#profile div#contactme {display:none!important;}
#profile div#links{display:none!important;}
#profile div#recententries {display:none!important;}
#profile div#favorites {display:none !important;}
#profile div#submissions {display:none !important;}
#profile div#skills {display:none !important;}
#profile div#recentphotos{display:none !important;}
#profile div#footer{display:none !important;}
#profile div#comments{visibilty: visible;}
#headhoncho{position: absolute; left: 50%; margin-left: -30px; top: 0%; margin-top: 10px; width: 300px; height: 500px;}
#profile div#comments{position: absolute; left: 50%; margin-left: 150px;  top: 0%; margin-top; 0px; width: 400px; height: 600px;
</style>
<div id="headhoncho"><img src="http://cbrocks.com" alt="Go Toya!" border="0"></div>

Remember your code is not going to look exactly like mine. Yours will have different parts and it may also contain more or less considering what you plan on doing.

Step 8: Finishing Off
To finish off your DIV go ahead and do some of these things incase you haven't already done so.

• Add z-indexes to your DIVS. How do you do that? Before the closing bracket ( } ) add z-index: #; give each div a different number. Image div can be 0, the following can be 1 , 2, 3 , 4 etc.
• Make sure that all your tags are closed.
• Make sure everything is positioned in other browsers.
• Add your CSS. If you don't know what I mean read the main post on how to add CSS to edit your profile. Of course you will not need to use a lot of the codes posted there.
• Check with some friends to make sure they can comment, etc.
• Make sure everything is how you like it.

DIV Extras

==================================
More HTML help:
http://pixelfx.org
http://w3schools.com/
http://createblog.com/forums/index.php?showforum=48
http://createblog.com/tutorials/

Brushes, Images, background etc resources
Visit the BBOR

Need a layout made for you?
Request here

Links you may want to know

Home - http://createblog.com
My Account - http://www.createblog.com/home/
Layouts - http://username.createblog.com/layouts/
Graphics - http://username.createblog.com/graphics/
Blogs - http://username.createblog.com/blogs/
Photos - http://username.createblog.com/photos/
Friends - http://username.createblog.com/friends/
Winks - http://username.createblog.com/winks.php?h...ache=1192662809
Add - http://USERNAME.createblog.com/friends/add...ache=1192663004
Edit Profile - http://www.createblog.com/profile/edit_basic.php

Change username to your username. Make sure you click the link then copy . Because copying that link it has dots.

FAQ

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

• How do I make a Div scroll?
  Add overflow:auto; to part of the code. If the code is in your CSS you should add it before the closing bracket. ( } )
• Where can I get premade cB layouts?
  We do not have a section for it, but many times in the tutorial I linked a request page. That is where you can find people who are willing to make you a cB profile layout. Or just the banner or just the graphic.
• Can I use cB graphics?
  Yes you can. Try not to edit out anything and credit the owner when your do so. Also please don't take pics off of layouts that is stealing. Same from deviantart. Don't take whats not yours unless its out for everyone to use.

[Relentless]

Great Tut Toya!

[Insurmountable]

holy aslkdjfasjfks; uhmazing Toya, a million kudos to you XD

[karmakiller]

Toya's freakin' amazing! I think I might try to make a div overlay tomorrow, or Friday.

[shadowfax]

I'm making another one for autmnn and this'll come in handy. Thanks so much for writing it! :)

[digitalfragrance]

I think I'm gonna use the DIV tutorials :)
TOYA IS QUEEN

[misoshiru]

toya you are amazing.

[Blaqheartedstar]

made a DIV, and the div tutorial helped much woot thanks

[arcanum]

I may end up making a div because of this! hahaha Amazing job, Toya!

[misoshiru]

i want to make a DIV, but i'm completely uninspired nor do i really have the time.

[Jennifer]

Wow this is a great tutorial, I'm (trying) to make a DIV now.

I'm just wondering though, is there a ID or code to hide the header "Comments" but leave all the rest of the comments? As well as hide the header "Statistics"?

[freeflow]

I think those headers are h2 and h3 h2, h3{idisplay:none;}

[Jennifer]

Thanks, it worked!
And my (probably temporary) DIV is done

EDIT: Arhh another question, is there a way to get the drop down menu to drop down over my background? 'Cause right now when I hover over the navigation the drop down only shows a little, the rest drops down behind my bg

[freeflow]

The way you have it set up . No. Wha you would have to do is instead of positioning your background image in a DIV you would have to set the body background of the page to that background. Then you set it to center. Only thing is you can't move it anywhere you want it to be. Its just going to go to the center of the page. You may have to do some repositioning as well.

Glad it worked :]


Edit . Go back and give all your DIVS a different z-index because your page is misaligned. Give each div a differrent one.

For example:
Background - z-index: 0;
comments - z-index:1;
stats - z-index: 2;
about you - z-index: 3;
contact - z-index:4;

Also the top percent should be 0. or 50. I think it can be 100 as well but I suggest 0.

[na-nancy]

OMFG!
SOOOOOOOOOOOOOOOOOOO HARD!
EVEN WITH SOME HTML KNOWLEDGE!!!!
> <.................................
EDITING CREATEBLOG PAGES ARE HARDD...

BUT, OH!
ALOT OF THIS HELPS ALOT!
ITS JUST ME WHO DOESN'T GET IT...
THANKS!!!..^ ^

[freeflow]

cB pages are one of the easiest things to change. Focus on reading the first post only. Don't go to the second. Just read the first till you get it. Don't try to skim through, go fast, or just copy codes, you really won't get it.

[hypnotique]

cB pages are one of the easiest things to change. Focus on reading the first post only. Don't go to the second. Just read the first till you get it. Don't try to skim through, go fast, or just copy codes, you really won't get it.

Yeah i know i learned the hardway.

It would have been easier if toya had warned me in the first post that there was no # before the the hex codes =[

then i saw the F.A.Q's..

[NICKAWHAT]

How do I move the right side boxes up on my profile? Because for some reason, they are at the bottom of my page. Please help and if you dont know waht im talking about please go to my page and see.

Also heres another thing I want to ask. How do I hide my comments (on CreateBlog) without hiding my comment box?

[freeflow]

You have to hide them then readd the commentbox somewhere else. You can get your comment box code in your source but I don't know if the comment box code will work elsewhere unless you make a DIV.
http://micron.createblog.com/blog/entry.php?id=327

That pages shows you how to hide certain aspects of your page.


Regarding your first question your tables look fine for me.

[NICKAWHAT]

I know in FireFox it looks good, but in IE it is messed up and I remember in the first version of the tutorial on how to edit your page, it said how to fix it, but the first version is gone for some reason and I need help.

[superstitious]

Really quick -

I'm not all that coding talented, but wanted to know if imagemaps would work in cB Layouts and where abouts would the imagemap url go. (Would it go where the background image url would go? Where the banner image url would go? Somewhere else? XD)

Sorry if this is a dumb question.

PS, thanks for redoing/reposting this. I actually think that this tutorial is cleaner than the first one.

[superstitious]

^ Thanks for responding! =)

[grrprincess]

thanxs for this

[grrprincess]

it didn't work for me at all