pikarceus (2012-05-29 01:20:49)

---

Warning! This is not a guide for novices! If you have little or no experience with profile CSS this will probably confuse you!


This could be considered "real" programming I suppose, but I've found this extremely useful in styling profiles.

Basically, nesting is selecting an element within an element. Confused? Don't be.

I'll start with a basic example. Images. I'm sure most of you know img=images. Let's say you want a nice, fat, red border around those images.

You would probably go [style]img{border:ridge 6px red;}[/style] or something similar.
Of course, it styles ALL images on your profile, including the header, and images in the comments and signatures along with the images in the about me section.

You don't like that. It looks ugly. For some reason you wish only images in signatures have the red border.

Solution: [style].signature img{border:ridge 6px red;}[/style]

Note the space between .signature and img. Very important.

I would also recommend using this with...

div.content(Header image won't be selected)

.commentbox_1

.commentbox_2

span

Remember, when styling areas around the boxes you need !important in the code.

Example: [style].commentbox_1{color:red!important;}[/style]

Try using as much CSS as you can with this, such as backgrounds, colors, opacity, positioning, to maximize its potential in shaping key areas of your profile.

Nesting is how the images ONLY in my comments have been reduced to 50x50

You can get crazy complicated with this. Let's say you only want the images in the signatures in .commentbox_1 bordered.

[style].commentbox_1 .signature img{border:ridge 6px red;}[/style]

There you go.

Moving on: Grouping. I posted about this in the old Programming forum which is now dead, so I'll do it here. This is a huge space saver. If you want to do the space thing to multiple elements, you need to start the code over. Like [style]div.menu{color:yellow;}[/style]
[style]body{color:yelloe;}[/style]
[style]a{color:yellow;}[/style]

Just do this. [style]div.menu,body,a{color:yellow;}[/style]

BAM! You just saved a ton of space. This also works with nesting.
[style].signature img,body{color:blue;}[/style]

It also works with :before and :after, even on the same element.
[style]h2:before,h2:after{blah blah blah;}[/style]

Remember, this is only if YOU WANT TO THE STYLE ELEMENTS IN QUESTION THE EXACT SAME WAY.

Another thing: You only need to use [style] [/style] ONCE on your profile. I'll show you.

[style]body{color:red;}div.content{background:green;}.signature{opacity:0.35;}input{background:yellow;}[/style]

Just keep adding code in after }
When you're done with everything, then cap it off with [/style]
Another huge space changer.

Last space changer.

Don't do this.

[style]body{color:blue;}
[style]body{background-color:black;}[/style]
[style]body{opacity:0.95;}[/style]

Do this instead. [style]body{color:blue;background-color:black;opacity:0.95;}[/style]

; to the rescue.

And something no one here seems to know about. Outline.
It's the same as border, just not part of the element. It also goes around borders if you have them placed.

Example: [style]a{outline:ridge 2px lime;}[/style]

Very simple, just not known around here.

So yes, I hope this helps you in saving space and tweaking normally hard to style areas of your profile. If I should add anything, just tell me.

This post has been edited one or more times, the last time was:
2012-05-29 01:26:58

---

pikarceus (2012-06-06 14:30:50)

---

It's so tragic that a crappy BBCode guide has more comments than this. ;-; I guess people don't get it.

---

EmoKitty (2012-06-10 21:23:04)

---

(ignoring grimlok) Yeah, and coding is fairly easy.. even if you're my sister {7 year old little nutter}....

---

pikarceus (2012-06-11 01:50:28)

---

That "7 year old little nutter" is smarter than most people here.

---

SomeLuigi (2012-06-11 21:15:44)

---

Wow, they say you learn something new everyday.

I never knew you could do this in CSS:

.content img {...}


Thanks pikarceus!

---

pikarceus (2012-06-13 01:08:33)

---

Uh...wow. SomeLuigi doesn't know something about CSS?
Mind=blown

---

pikarceus (2012-06-17 02:04:18)

---

What about it?

---

BioMan8 (2012-06-21 03:58:02)

---

I already knew this, after all using Computer Languages is my 2nd hobby! I'm forever alone

---

SPCOxion (2012-06-29 23:53:28)

---

AMEN. lololol

---

Kiba (2012-08-28 03:19:39)

---

I find codeing comes easily for me.Can you add something more complex for me to work with!?

---

ilia (2013-12-22 00:24:12)

---

---