Custom CSS, a brief tutorial (update)

[Madd]

The following code outlines how to do some basic things on your profile with CSS.
#fff is a color. Change them to change the colors of the profile. My favorite color chart

Code: Select all

/* small corners removed */
.corners-top, .corners-bottom {
display: none !important;
}
/* no header */
.headerbar {
display: none;
}
/* custom panels */
.navbar, .panel {
background: #9bb; /* edit me */
border: 1px dashed #366; /* if you have 5px of border, you must have -5px of margin */
margin: -1px;
}
.bg2 {
margin-bottom: 10px;
}
/* no container */
.border-left, .border-right, .border-top, .border-top-left, .border-top-right, .border-bottom, #page-body {
background: none;
}
/* custom container */
#wrap {
background-color: #fff; /* edit me */
border-right: 1px solid #999 !important;
border-left: 1px solid #999 !important;
}
/* custom background */
body {
background: #eee; /* edit me */
padding: 0; /* to eliminate space at the top */
}

Custom links:

Code: Select all

a {
color: #f00 !important; /* edit me */
}
a:hover {
color: #f0f !important; /* edit me */
}

Custom font:

Code: Select all

* {
font-family: sans !important; /* edit me */
}

Left Align:

Code: Select all

body {
text-align: left !important; 
}
#wrap {
margin-left: 50px; /* edit me */
}

Better headings:

Code: Select all

.panel h3 {
background-color: #699;
border-bottom:1px solid #acc;
margin:0 -10px;
padding:2px;
text-align:center;
text-decoration:underline;
}

No signature:

Code: Select all

.custom_css_signature {
display: none;
}

I'll add more later.

[Valden]

Thank you so much for this!!!!!!

There are still small white corners at the bottom. >_>

[dragoffire]

Awesome this helps alot.

[Glow]

I tried it out; can't wait til more are available!

EDIT: dragoffire, yours is really cool!

[Snow]

Mine sucks.

...

Oh well. I guess I'll have to work on that. But for now... I'll be looking at all of yours. Again. For the fourth time.

[Firerubynat]

Cool... Thanks Tristan! Now I can go experiment...

*disappears off to play with colors*

[Manticore]

we can haz preset awsumness?

[SolarCat]

That was fun.

I'd also like to know how to get rid of the white boxes, though...

[Rosehill]

You can find the code to remove the white bottom boxes from this post by Tristan.

Or if you're too lazy to click the link, just use the following.

CSS is one of my fortes.

Code: Select all

/* no white bits on the bottom */
.border-bottom span {display:none}

[BloodVeil]

You better expand on this soon. >(

Agreed to this.




I'll certainly be lurking lol.. Sticky perhaps~? ♥