ardent

Profile Style Tutorial!



Frayer

Loner

age
-
gender
-
gems
886
size
-
build
posts
26
player
02-03-2013, 04:03 PM
Here's a basic tutorial on how to change up your profile!

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]OR[Image: Tut3.png]



Other Cool Css Stuff

Semi-Transparent Boxes

Use "rgba" to make your single-color backgrounds partially transparent. Use this code bit: rgba(red value [0 to 255], green value, blue value, alpha value [0 to 1 as a decimal])

EXAMPLE:
.row1{background-color:rgba(200,30,30,0.5);}

Rounded Corners

This property can give your boxes rounded corners! Change the number lower to make them narrower, higher for wider.
EXAMPLE:
.row1{border-radius:25px;}



Crusade

Loner

age
-
gender
-
gems
20
size
-
build
-
posts
70
player
02-12-2013, 08:49 AM
thanks so much for putting this up!
question though - if we want to change the banner, where do we put the coding?



Frayer

Loner

age
-
gender
-
gems
886
size
-
build
posts
26
player
02-12-2013, 10:05 AM
You can put code for your profiles in any of the big boxes when you're editing your profile except for OOC Extra Information.
I'm going to rewrite this as many don't find it clear enough.



Crusade

Loner

age
-
gender
-
gems
20
size
-
build
-
posts
70
player
02-16-2013, 01:01 PM
thanks so much! This is perfect! I was able to use it to give Crusade a pretty banner!! <3333