Asi9ine
April 5th '06, 12:01 AM
Okay ladies and gents, here's how to create a custom CSS code for your own personal profile. This is very simple, as I will break it down for all of the people who don't have a clue. That's okay, we all have to start somewhere :)
Right, I will begin with the resources. Firstly you will need a hex code guide, which you can find here:
http://www.december.com/html/spec/color.html
You will really need this to find the colour references. They are all six-digited, with a hash key in front for the sake of the page loading them. Find the colour you want on that webpage, and copy and paste it in over the existing colour.
That goes without saying, so we will go onto the next part. You will likely need some sort of image editing program. You can use:
- Paint (Comes as standard with all Microsoft Windows computers. Find it by clicking the 'Start' button at the bottom left hand corner of your screen.
- Macromedia Fireworks (Recommended. It has precision, options and isn't a huge download like Photoshop or something more high-ended. If you don't know where to 'borrow' it online, I would suggest downloading a trial copy at the following link - http://www.soft32.com/download_351.html. It is only around 30MB, nowhere near the size of Photoshop but with identical features basically.)
- Adobe Photoshop (My favourite program, for some bizarre reason. It's slow loading, long interface littered with features I will never use, basically a corporate program. If you are on dial-up Internet, DO NOT DOWNLOAD THIS. It will end up at around 330MB in size, somewhere in the region of 12-14 hours to download. My favourite program, but Fireworks is recommended. Trial version of Photoshop is here - http://www.adobe.com/products/tryadobe/download.jsp?ftpID=2730)
Now you have the program in question, you can use any of the three to get what you need. You have to have an image to put as your background or foreground in order to make it work. You must make the image first, which we shall work on now.
Open up a new document in your chosen program, and make the dimensions of this image to be 800 (width) by around 20 height (if you want the colour to be continuous) or around 1000 in height if you want to create a gradient (a colour at the top fusing into another colour at the bottom). For now, I recommend a continuous colour, so make sure the image is 800x20.
Fill this bar with any colour you want. This can be done in any of the programs by using the Paint Bucket tool, found on the left hand tool bar in all three. Select the colour you want (generally by clicking on the TOP colour box) and hovering over the colour box until you find the right shade. By all means mess around with it to find the right colour you want. Once you have the colour, click OK then go back and click the Paint Bucket icon, and click inside the image you created. It should now fill with colour. Save this as a GIF file (File > Save As, not Save) but keep the image editing program open. You may wish to save a default file of this too, should you wish to go back to it (a Fireworks document for Fireworks, or a PSD for Photoshop.)
Now that is saved, you must host it. I recommend http://www.imageshack.us for this operation, as there is nothing you can 'accidentally' do, its only function being the one you are supposed to use. Click "Upload Image" near the top of the page, and in the page that comes up, select the GIF file you just made. Click "Upload" and wait for it to upload to the system. If you are using dial-up, it could take a while, so be patient. Once it is hosted, it will throw up a lot of links. Go to the bottom one (which is the pure link with no tags around it), and click inside the box that the link is in. That should highlight the link. Copy that link to a Notepad page and save it. You will need that link later.
Now, opening the CSS. I am attaching the CSS file that Shane put up for use, because it is quicker. Open it, and you will just see a page of random code. Do not be intimidated by this like a lot of people are, see it for what it is. It's all relative, everything there is needed to make the page work. Perhaps reading a quick CSS tutorial (Google it) will save you a little time.
Now, to open the text file. The first part will be the page properties. These will be as such:
.outerbg {
background-color: transparent;
width: 750px;
padding: 0px;
border: none;
}
If you want to change the colour of the background of the page, change the word 'transparent' with the '#' key and then the six-digit key of the Hex code on the webpage I linked you to before. The link is below again. Should you wish to instead make an image as a background, leave that value, but instead make a new line below it, and enter this:
background-image: url(Enter the URL of the background image you want here);
background-repeat: repeat-y;
background-position: center;
Okay, that aside, now onto the main page frame.
The next part is the Hex properties section, which lasts for around 20 lines. You will now need the Hex codes page, which is here - http://www.december.com/html/spec/color.html. Each line is self-explanatory: 'titlefont' is the font that displays the page title, which is always "[username]'s Profile". Find a colour you want that to be, visualise it, and find the Hex code that matches it on the page above. The links are very simple. 'hover' is the colour of the link when you just hover your mouse cursor over it. The interesting bit is if you want a block around it. You will see after each option something like this:
{ color: #000000; background-color: #FFFFFF; }
The colour is the actual LINK text, the background colour being the BLOCK with which the link is within. Mess around with that to have some fun. If you just want the link to change colour, nothing else, then remove the 6-digit Hex code and the hash (#) key before it and just put the word transparent in its place. You can do this for anything if you wish to make the text the same colour as your original page background. It's a handy shortcut.
Now you should have no problems from there. The section of code at the bottom is explained very well by the title at the top of each smaller section, such as '.picturecontactdiv'. What colour do you want your "Contact Me" panel to be? Find the Hex code using the webpage I linked you to, and add it in!
Now, all you have to do to add the CSS Profile is to go into your UserCP (at the top of the Navigation bar below the main header image), and click "Edit Profile Appearance". Copy and paste the whole CSS code that you have created into the blank box that now comes up. Tweak it to your needs, but remember to save the text file regularly. To edit features, you have to edit the text file and copy it back into the box. Now click Save.
Should you have any more problems, reply in this thread or drop me a PM. I will be glad to help. In the event you actually can't get any of the programs, or you want to make a more complicated background image with gradients and images of real people, drop me a PM with your specifications and I will do it for you. Don't abuse that right though; I want you to have actually tried first.
Thanks for reading! Let me know if there's anything wrong with the tutorial and I will edit it accordingly. The text file you will need is attached.
Right, I will begin with the resources. Firstly you will need a hex code guide, which you can find here:
http://www.december.com/html/spec/color.html
You will really need this to find the colour references. They are all six-digited, with a hash key in front for the sake of the page loading them. Find the colour you want on that webpage, and copy and paste it in over the existing colour.
That goes without saying, so we will go onto the next part. You will likely need some sort of image editing program. You can use:
- Paint (Comes as standard with all Microsoft Windows computers. Find it by clicking the 'Start' button at the bottom left hand corner of your screen.
- Macromedia Fireworks (Recommended. It has precision, options and isn't a huge download like Photoshop or something more high-ended. If you don't know where to 'borrow' it online, I would suggest downloading a trial copy at the following link - http://www.soft32.com/download_351.html. It is only around 30MB, nowhere near the size of Photoshop but with identical features basically.)
- Adobe Photoshop (My favourite program, for some bizarre reason. It's slow loading, long interface littered with features I will never use, basically a corporate program. If you are on dial-up Internet, DO NOT DOWNLOAD THIS. It will end up at around 330MB in size, somewhere in the region of 12-14 hours to download. My favourite program, but Fireworks is recommended. Trial version of Photoshop is here - http://www.adobe.com/products/tryadobe/download.jsp?ftpID=2730)
Now you have the program in question, you can use any of the three to get what you need. You have to have an image to put as your background or foreground in order to make it work. You must make the image first, which we shall work on now.
Open up a new document in your chosen program, and make the dimensions of this image to be 800 (width) by around 20 height (if you want the colour to be continuous) or around 1000 in height if you want to create a gradient (a colour at the top fusing into another colour at the bottom). For now, I recommend a continuous colour, so make sure the image is 800x20.
Fill this bar with any colour you want. This can be done in any of the programs by using the Paint Bucket tool, found on the left hand tool bar in all three. Select the colour you want (generally by clicking on the TOP colour box) and hovering over the colour box until you find the right shade. By all means mess around with it to find the right colour you want. Once you have the colour, click OK then go back and click the Paint Bucket icon, and click inside the image you created. It should now fill with colour. Save this as a GIF file (File > Save As, not Save) but keep the image editing program open. You may wish to save a default file of this too, should you wish to go back to it (a Fireworks document for Fireworks, or a PSD for Photoshop.)
Now that is saved, you must host it. I recommend http://www.imageshack.us for this operation, as there is nothing you can 'accidentally' do, its only function being the one you are supposed to use. Click "Upload Image" near the top of the page, and in the page that comes up, select the GIF file you just made. Click "Upload" and wait for it to upload to the system. If you are using dial-up, it could take a while, so be patient. Once it is hosted, it will throw up a lot of links. Go to the bottom one (which is the pure link with no tags around it), and click inside the box that the link is in. That should highlight the link. Copy that link to a Notepad page and save it. You will need that link later.
Now, opening the CSS. I am attaching the CSS file that Shane put up for use, because it is quicker. Open it, and you will just see a page of random code. Do not be intimidated by this like a lot of people are, see it for what it is. It's all relative, everything there is needed to make the page work. Perhaps reading a quick CSS tutorial (Google it) will save you a little time.
Now, to open the text file. The first part will be the page properties. These will be as such:
.outerbg {
background-color: transparent;
width: 750px;
padding: 0px;
border: none;
}
If you want to change the colour of the background of the page, change the word 'transparent' with the '#' key and then the six-digit key of the Hex code on the webpage I linked you to before. The link is below again. Should you wish to instead make an image as a background, leave that value, but instead make a new line below it, and enter this:
background-image: url(Enter the URL of the background image you want here);
background-repeat: repeat-y;
background-position: center;
Okay, that aside, now onto the main page frame.
The next part is the Hex properties section, which lasts for around 20 lines. You will now need the Hex codes page, which is here - http://www.december.com/html/spec/color.html. Each line is self-explanatory: 'titlefont' is the font that displays the page title, which is always "[username]'s Profile". Find a colour you want that to be, visualise it, and find the Hex code that matches it on the page above. The links are very simple. 'hover' is the colour of the link when you just hover your mouse cursor over it. The interesting bit is if you want a block around it. You will see after each option something like this:
{ color: #000000; background-color: #FFFFFF; }
The colour is the actual LINK text, the background colour being the BLOCK with which the link is within. Mess around with that to have some fun. If you just want the link to change colour, nothing else, then remove the 6-digit Hex code and the hash (#) key before it and just put the word transparent in its place. You can do this for anything if you wish to make the text the same colour as your original page background. It's a handy shortcut.
Now you should have no problems from there. The section of code at the bottom is explained very well by the title at the top of each smaller section, such as '.picturecontactdiv'. What colour do you want your "Contact Me" panel to be? Find the Hex code using the webpage I linked you to, and add it in!
Now, all you have to do to add the CSS Profile is to go into your UserCP (at the top of the Navigation bar below the main header image), and click "Edit Profile Appearance". Copy and paste the whole CSS code that you have created into the blank box that now comes up. Tweak it to your needs, but remember to save the text file regularly. To edit features, you have to edit the text file and copy it back into the box. Now click Save.
Should you have any more problems, reply in this thread or drop me a PM. I will be glad to help. In the event you actually can't get any of the programs, or you want to make a more complicated background image with gradients and images of real people, drop me a PM with your specifications and I will do it for you. Don't abuse that right though; I want you to have actually tried first.
Thanks for reading! Let me know if there's anything wrong with the tutorial and I will edit it accordingly. The text file you will need is attached.