Guide to Customizing your cB Profile. VERSION 2, Version 2 with a DIV tutorial. |
For a list of all requirements and guidelines pertaining to posting a new Help topic, please click here.
This Month's Contests | Hosts Looking for Hostees | Hostees looking for Hosts | BigBookofResources
Submission Guidelines
Guide to Customizing your cB Profile. VERSION 2, Version 2 with a DIV tutorial. |
Oct 16 2007, 04:06 PM
Post
#1
|
|
t-t-t-toyaaa Group: Official Member Posts: 19,821 Joined: Apr 2004 Member No: 11,270 |
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:
- 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
|
|
|
Oct 16 2007, 10:48 PM
Post
#2
|
|
t-t-t-toyaaa Group: Official Member Posts: 19,821 Joined: Apr 2004 Member No: 11,270 |
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:
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. QUOTE 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. QUOTE 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. QUOTE - 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.
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 QUOTE 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 ======================================
|
|
|
Oct 17 2007, 08:51 PM
Post
#3
|
|
sang loves hayden. Group: Staff Alumni Posts: 3,373 Joined: Feb 2004 Member No: 5,687 |
Great Tut Toya!
|
|
|
Oct 17 2007, 09:19 PM
Post
#4
|
|
Cornflakes :D Group: Staff Alumni Posts: 4,541 Joined: Dec 2005 Member No: 322,923 |
holy aslkdjfasjfks; uhmazing Toya, a million kudos to you XD
|
|
|
Oct 17 2007, 10:16 PM
Post
#5
|
|
DDR \\ I'm Dee :) Group: Mentor Posts: 8,662 Joined: Mar 2006 Member No: 384,020 |
Toya's freakin' amazing! I think I might try to make a div overlay tomorrow, or Friday.
|
|
|
Oct 17 2007, 10:30 PM
Post
#6
|
|
Padfoot Group: Staff Alumni Posts: 1,084 Joined: Sep 2004 Member No: 50,413 |
I'm making another one for autmnn and this'll come in handy. Thanks so much for writing it! :)
|
|
|
Oct 17 2007, 11:03 PM
Post
#7
|
|
Adobe Addict Group: Staff Alumni Posts: 1,237 Joined: Mar 2005 Member No: 113,043 |
I think I'm gonna use the DIV tutorials :)
TOYA IS QUEEN |
|
|
Oct 17 2007, 11:55 PM
Post
#8
|
|
yan lin♥ Group: Staff Alumni Posts: 14,129 Joined: Apr 2004 Member No: 13,627 |
toya you are amazing.
|
|
|
Oct 18 2007, 12:45 PM
Post
#9
|
|
Two can keep a secret if one of them is dead. Group: Staff Alumni Posts: 2,682 Joined: Jun 2005 Member No: 156,187 |
made a DIV, and the div tutorial helped much woot thanks
|
|
|
Oct 18 2007, 05:57 PM
Post
#10
|
|
:) Group: Staff Alumni Posts: 1,636 Joined: Jul 2004 Member No: 34,459 |
I may end up making a div because of this! hahaha Amazing job, Toya!
|
|
|
Oct 18 2007, 06:20 PM
Post
#11
|
|
yan lin♥ Group: Staff Alumni Posts: 14,129 Joined: Apr 2004 Member No: 13,627 |
i want to make a DIV, but i'm completely uninspired nor do i really have the time.
|
|
|
Oct 20 2007, 05:41 AM
Post
#12
|
|
<3 Group: Official Member Posts: 1,369 Joined: Jun 2007 Member No: 539,187 |
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"? |
|
|
Oct 20 2007, 09:35 AM
Post
#13
|
|
t-t-t-toyaaa Group: Official Member Posts: 19,821 Joined: Apr 2004 Member No: 11,270 |
I think those headers are h2 and h3 h2, h3{idisplay:none;}
|
|
|
Oct 20 2007, 07:02 PM
Post
#14
|
|
<3 Group: Official Member Posts: 1,369 Joined: Jun 2007 Member No: 539,187 |
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 |
|
|
Oct 20 2007, 07:40 PM
Post
#15
|
|
t-t-t-toyaaa Group: Official Member Posts: 19,821 Joined: Apr 2004 Member No: 11,270 |
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. |
|
|
Oct 20 2007, 08:50 PM
Post
#16
|
|
na-nancy Group: Member Posts: 212 Joined: Jun 2007 Member No: 538,179 |
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!!!..^ ^ |
|
|
Oct 20 2007, 09:01 PM
Post
#17
|
|
t-t-t-toyaaa Group: Official Member Posts: 19,821 Joined: Apr 2004 Member No: 11,270 |
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.
|
|
|
Oct 20 2007, 11:03 PM
Post
#18
|
|
Live long and prosper. Group: Staff Alumni Posts: 5,525 Joined: Nov 2006 Member No: 478,024 |
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.. |
|
|
Oct 24 2007, 06:32 PM
Post
#19
|
|
Member Group: Member Posts: 10 Joined: Sep 2007 Member No: 577,080 |
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? |
|
|
Oct 25 2007, 11:54 PM
Post
#20
|
|
t-t-t-toyaaa Group: Official Member Posts: 19,821 Joined: Apr 2004 Member No: 11,270 |
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. |
|
|
Oct 27 2007, 02:31 AM
Post
#21
|
|
Member Group: Member Posts: 10 Joined: Sep 2007 Member No: 577,080 |
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.
|
|
|
Oct 29 2007, 06:22 PM
Post
#22
|
|
Tick tock, Bill Group: Administrator Posts: 8,764 Joined: Dec 2005 Member No: 333,948 |
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. |
|
|
Oct 31 2007, 09:03 AM
Post
#23
|
|
Tick tock, Bill Group: Administrator Posts: 8,764 Joined: Dec 2005 Member No: 333,948 |
^ Thanks for responding! =)
|
|
|
Oct 31 2007, 03:16 PM
Post
#24
|
|
Newbie Group: Member Posts: 5 Joined: Oct 2007 Member No: 585,012 |
thanxs for this
|
|
|
Oct 31 2007, 03:51 PM
Post
#25
|
|
Newbie Group: Member Posts: 5 Joined: Oct 2007 Member No: 585,012 |
it didn't work for me at all
|
|
|