Custom Profiles CSS --> Come if you know some simple CSS!

:o

c: <3	100.0%	[ 176 ]
Total Votes:			[ 176 ]

[DSL Connection x3]

Custom CSS Profiles
thank you for visiting my CSS thread. For awhile I've been going off some other tutorials, and now I've decided to clean my own CSS up and make my own guide for others because I've always wanted to.

This is NOT reccommended if you are ENTIRELY new to CSS. If you don't even know the basics like how hex codes work, positioning a background, text coloring, etc. -- don't come here. Unless you expect vague-ness XD

Please do not post anything like "bump" or just a simple sad or smile . I'd like feedback, thanks. :"D
Please try not to PM me unless you must. D:
If you have any codes to add or I have written something that is INCORRECT/WRONG, then PM me so I can change it immediately and give you credit. :"D



TO DO LIST:
--Add header CSS section
--Add links CSS in the extra features [hover/active/etc]
--Add text-transform codes in EF
--Add letter-spacing codes in EF
--Figure out how to change fonts gonk XD

whee

[DSL Connection x3]

Basics of CSS
Here I'm going to show you a little bit to get you introducted some.
First, we must figure this much out:

[its not the best but it works. this is "Vengeful password"'s profile. biggrin ]
This is useful to refer back to when constructing a profile.

I would have you begin by using this beginning code
[edit the things in brackets]:

#body
{
background: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left] color: #[000000]
}

That's the body of the profile, the entire thing. It will change the background, how it's positioned, and the font color. I already have the background set to white and the font color set to black, but you can change that.

IN the next post we'll learn more, section-by-section. X3

whee

[DSL Connection x3]

More Basics! XD
Alright, now that we have that down, let's tackle everything else. You can change the font and font size for the body area, but I don't know how to do that yet D: [If you know, please PM me! You'll get credit for your input ^^]

Avatar Section [CSS Name: Profile]

#profile
{
[insert codes here]
}

there's our basic avatar code, now what can we change about it? First we can either make our avatar go away, or we can change the opacity. You can do this by adding this code:

ADD THIS CODE -AFTER- THE PROFILE SECTION. It changes the opacity of your avatar displayed. Change the opacity .0 and your avatar is no longer there <3

#profile .avatar
{
opacity: .3;
}

if you would like to REPLACE your avatar with an avatar sized image, you can add this code [but you MUST also have the 0 opacity on there.]. You can also not add the 0 opacity, and at tektek make say an avatar sized image of fairy wings, you can add that image and wah-lah, your avatar looks like it has fairy wings. X3

background: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left]

Individual Blocks Section [CSS Names are different]
Alright, so now we have to deal with friends, journal, multimedia, details, and more, right? To start you off, their names are the same as the section. Use this type code to start:

#[section]
{
[Codes go here]
}

Use that code for each section, but change the [section] area to the name of whatever section it is. [Journal, multimedia, wishlist, details, etc.] You can change the backgrounds/etc. with these following codes, and even further individual tricks will be located in the last portion of this guide. X3

CHANGES THE BACKGROUND:
background: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left]

CHANGES THE FONT COLOR:
color: #[FFFFFF]

There's plenty of other things you can do with each section, just remember that this tutorial is not for super beginners. XD

We can also position the blocks individually! I haven't figured out how to move the sidebar or the profile [avatar] section yet, but this is the basic code for any area:

position: relative;
left: [0]px;
top: [0]px;

and you can determine what exact size you want the sections to be, sot hat when they reach those lengths they scroll. Use this code:!

overflow: auto;
width: [0]px;
height: [0]px;

Comments Section
I'm going to tackle this area separately because it's such a big section. X3 Really in-depth tricks will again be located at the last portion of the tutorial, but here's the basics to making a block around your comments and changing the avatars.
Include this basic coding
[yes I do have borders set in there, let me tell you that you will not enjoy the stupid rounded edges. I hate them myself. If you like them, remove the border CSS codes but just let me say that they SUCK.]:

#comments
{
background: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left]
border-right: [1]px [dotted, solid, dashed] #000000;
border-bottom: [1]px [dotted, solid, dashed] #000000;
border-left: [1]px [dotted, solid, dashed] #000000;
border-top: [1]px [dotted, solid, dashed] #000000;
}
#comments dl dt.avatar img
{
[insert codes here]
}
#comments dl dt.avatar2 img
{
[insert codes here]
}

The first dl dt.avatar img is for the avatars on the right, and the second is for avatars on the left. If you want the two sides to be the same, put the codes on both sides--if you want one side in one way and the other in another, don't! XD

You can again set the opacity of even these avatars!

opacity: .3;

there is of course plenty more you can do, but it's mostly for IE. You can also do the whole background avatar nonsense! It works the same way as the profile part, so I'm not going to retype it up for you XD



The Lovely Headers [CSS Names: #[section] h2]
Ever seen those lovely headers people have for each section? Stare no longer! Use this basic coding firsthand:

#[section] h2
{
background: #[FFFFFF]
url([image url]) bottom left no-repeat;
color: #[FFFFFF]
font-size: [0]px;
text-indent: [99]px;
}

The color, size, and indent areas are for the normal text displayed in the headers. Mine is currently set for my white profile, way off to the right, so that it will NOT get in my way. ^^ This is the only coding you need [or that I know] for this area.

whee

[DSL Connection x3]

Extra Features

:"D Finally, some niceness in here. XD

As I have not stated, you can add a border around your sections. Take the basic coding you have for the section and add this in it:

border-right: [1]px [dotted, solid, dashed] #[000000]
border-bottom: [1]px [dotted, solid, dashed] #[000000]
border-left: [1]px [dotted, solid, dashed] #[000000]
border-top: [1]px [dotted, solid, dashed] #[000000]

You can make the background transparent and have it blend with all the other backgrounds like this [or if you have a background image that doesnt fill up the whole area, make everything but that image transparent]:

EDIT THE BACKGROUND PORTION FOR THIS CODE. ^^

background: transparent;

You can also take OUT sections! :O

display: none;

If you want a separate background in your CONTENT block different from your BODY/SITE background, use this-->

background: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left]

If you want backgrounds behind the avatars in your comments, do this-->

#comments dl dt.avatar img
{
background: background: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left]
}

#comments dl dt.avatar2 img
{
background: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left]
}

If you also don't want rounded edges in your comments, use this [CSSers can play around with the imaging in it, too ;D]:

.caption
{
background: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left]
border: [1]px [solid, dotted, dashed] #[000000] color: #[000000]
}
.caption:before
{
content: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left]
background: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left]
}
.caption:after
{
content: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left]
background: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left]
}
.caption .message
{
background: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left]
}

.caption2
{
background: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left]
border: [1]px [solid, dotted, dashed] #[000000] color: #[000000]
}
.caption2:before
{
content2: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left]
background: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left]
}
.caption2:after
{
content2: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left]
background: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left]
}
.caption2 .message
{
background: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left]
}

All that is pretty confusing, ain't it? So if you want, you can just borrow the code I use on my profiles [its kind of messy, beware!]:

.caption { background: transparent;
border: 1px solid #000000; color: #000000; }
.caption:before { content: url()
background: url() top right no-repeat;
}
.caption:after { content: url()
background: url() bottom right no-repeat; }
.caption .message { background: url() top left no-repeat; }

.caption2 { background: transparent;
border: 1px solid #000000; color: #000000; }
.caption2:before { content: url()
background: url() top right no-repeat; }
.caption2:after { content: url()
background: url() bottom right no-repeat; }
.caption2 .message { background: url() top right no-repeat; }

and now, links! There's SO MUCH you can do with links! biggrin here's the edit-able code :]

a:link
{
color: #[000000]
font-weight: bold;
text-decoration: [underline, line-through, blink, overline, underline overline]
text-transform: [capitalize, uppercase, lowercase]
}
a:visited
{
color: #[000000]
font-weight: bold;
text-decoration: [underline, line-through, blink, overline, underline overline]
text-transform: [capitalize, uppercase, lowercase]
}
a:active
{
color: #[000000]
font-weight: bold;
text-decoration: [underline, line-through, blink, overline, underline overline]
text-transform: [capitalize, uppercase, lowercase]
}
a:hover
{
color: #[000000]
font-weight: bold;
text-decoration: [underline, line-through, blink, overline, underline overline]
text-transform: [capitalize, uppercase, lowercase]
}

Changing the header is easy ^^ make an image by the sizes of: w/h -> 760x150 and set it as the header. You can make a border around the image too <3 :

#extendedProfileBody #header h1
{
background: #[FFFFFF] url([image url]) [repeat, no-repeat, repeat-x, repeat-y] [top, center, bottom] [right, center, left]
border: [1]px [dotted, solid, dashed] #[000000]
}

letter spacing codes can be added just about anywhere [involving text of course XD], so toy around and see what you get ^^

letter-spacing: [1]px;

SUBMITTED BY ZE ROYAL VIKING
This centers the profile so it looks nicer and fits all screen resolutions. ^^
-->spaced and cleaned up by me, dsl, because i want it to match my thing going on xD it makes it easier to find things :3

#site
{
margin: auto;
}

whee

[DSL Connection x3]

Reserved for Later Use.

whee

[DSL Connection x3]

Alright, done now.
:"D Just in case anyone was waiting XD [I doubt it though D:]

[-[ k A y L ! e ]-]

well i might be able to learn it later, but not right now, it's too late.

[[Anorexic Penis]]

Not entirley new, but I do still have questions.
Mind if I post them?

[Skye Antaeliel]

well not bad relatively easy to read... i do web design myself but the formatting is different... im used to creating stuff not changing it and i dont like having boundaries on what i'm doing which is why i never did anything with my profile before... but this is easy enough with ur guide here that i just might go do that.... good job

[soft_opossum]

I'm pretty good at it. Go check out my profile, for proof, if ye wish ^_ ^.
And in which way do you need to figure out how to change the font? Do you need the code or something?

[Skye Antaeliel]

ok little help pls... im trying to either stretch my bground pick or make it scroll with page or both... mind helping me with that... cause when i do it wrong my pic doesnt show up at all...

[Fuuma_Shuriken]

wow really really nice

[DSL Connection x3]

Karanthen

ok little help pls... im trying to either stretch my bground pick or make it scroll with page or both... mind helping me with that... cause when i do it wrong my pic doesnt show up at all...

PM me your code and I'll check it.

Envy: yeah, a code D:

Elphaba: go ahead x3

[Ze Royal Viking]

#site {margin: auto;}

THis centers the profile body so it looks better