Profile Style Tutorial!
02-03-2013, 04:03 PM
Here's a basic tutorial on how to change up your profile!
1. The Style Tags
1. The Style Tags
Quote:You can just use a little bit of HTML to change font face or bold some text within your profile, but if you want to change your banner, background colors, or headers, you need to use CSS!
To adjust the CSS on your profile, start by putting this into any of the big boxes on your Edit Profile Info page:
| CODE |
Quote:The rest of your code will go between these tags!
2. Choose Your Class
Quote:The next thing you'll need to do is pick which class to edit. A CSS class is a thing used to modify all elements of it's kind at once (example: all of the Content boxes filled with the light color are part of the same class, so changing that class will change all Content boxes at once). So, now let's tell the code which class to modify. Type the name for your class, followed by a curly left bracket ( { ). Here's a list of the common classes that your profile uses:
Click to hide/show
3. Change Properties
Quote:Now that you've picked your class, you can pick which of it's properties you want to change.
The correct format for this part is:
| CODE |
| property1:value; property2:value; |
Quote:etc.
Here's a list of some basic properties you can use to change your classes. You don't need to use all of these, just pick the ones you want to change and leave the rest out.
Click to hide/show
4. Close Your Class
Quote:Now that you've changed a class's properties around, you need to close it with a curly right bracket ( } )!
I would suggest double-checking your code for format now. You should have something that looks like this (as an example, here's changing your banner and main background color):
| CODE |
Quote:If it all looks right, time to move on to the next class!
5. And Repeat
Quote:Now, just repeat steps 2 through 4 until you've changed all of the classes that you want to change, and look over your script again.
You should put each class on a separate line, for organizational purposes at least.
Your finished product should look a little bit like this:
| CODE |
Quote:Check for formatting errors, and once you're done, just put this bit of code into any of the big boxes in your profile (such as Appearance) except Post Log and you're done!
Useful Sites
Quote:This place is a great reference for learning HTML and CSS! It has a color picker tool to help you figure out what hex code you need to use for your color!
Quote:This site has pallets to help you plan out your profile's color scheme, and you can find/make patterns for a colorful textured background!
Still Can't Figure It Out?
Quote:Click here and follow the instructions in the first post, and I will make a basic profile for you!
How Do I Make My Banner?
Quote:Tips for making your profile banner:
1. Dimensions - Contrary to belief, your banner doesn't have to have an exact width or height! Just add this property to your Overhead class, and it will automatically resize your banner to fit:
| CODE |
| background-size:100%; |
Quote:If you don't want any distortions from image resizing, make your banner about 916 pixels wide, and don't use this property.
2. Fade to Background - A nice effect for a banner is to have the bottom edge fade into the background instead of being a sharp change to the background, so I would suggest making the bottom of your banner fade into the background color you want, or fade to transparent like this:
![[Image: Tut2.png]](http://i465.photobucket.com/albums/rr16/jn4z/Tut2.png) | OR | ![[Image: Tut3.png]](http://i465.photobucket.com/albums/rr16/jn4z/Tut3.png) |
Other Cool Css Stuff
Semi-Transparent Boxes
| EXAMPLE: |
| .row1{background-color:rgba(200,30,30,0.5);} |
Rounded Corners
| EXAMPLE: |
| .row1{border-radius:25px;} |