New CSS for you {3 Versions} | The Endless Forest

x (20-6-2011) FIXED BUG (box-length adjusting to amount of text)
if you use fixed or sticky sidebar, please CRTL+F and replace following part of the code:
#wrapper #container #center .right-corner .left-corner{position:relative;width:100%;top:80px;left:1%} replace with #wrapper #container #center .right-corner .left-corner{position:relative;width:100%;top:80px;left:1%;min-height:0px}
if you use the bottom sidebar version, please CRTL+F and replace following part of the code:

#wrapper #container #center .right-corner .left-corner{position:relative;width:100%;top:-50px;left:1%;margin-bottom:100px}

replace with

#wrapper #container #center .right-corner .left-corner{position:relative;width:100%;top:-50px;left:1%;margin-bottom:100px;min-height:0px}

Special Thanks to:

parler for first discovering a way to align the sidebar horizontally and Owatanka for bringing it to my attention.
Iaurdagnire, jala, MrQuezt, Saosin, Veegamer and my friend Teddy for providing me screenshots.

x "floating" sidebar - sidebar stays on top of the page, overlaps content when scrolling down (current layout)

x "sticky" sidebar - sidebar is fixed and stays on its place when scrolling down

x "floating" bottom sidebar - sidebar stays on bottom of the page, overlaps content (beta version, may look a little wonky)

How-To

For better usability, I have titled parts of the code.
x {{framework}} --- do not touch this unless you want to make changes in the main layout. If you do, Good luck. I recommend asking me what to tinker with if you don't understand much of CSS.
x {{style, color}} --- feel free to modify this.

What is rgba?
rgba are color units, like #fff hex codes. In this case they are used for anything with blur or opacity changes.
example: rgba(242, 240, 228, 0.9)
In order: 242 red, 240 green, 228 blue, 90% alpha (= opacity)
You can find out the RGB value of a color by using any color picker tool.

Other Info

x cross-browser: works in all browsers (compromised solution for IE)
x works with all screen resolutions (percentages keep the ratio)
x length of comment-box adjusts to blog-length

x May cause lag on some computers!
x Preview looks off
x not perfectly centered

x Currently working on bottom-aligned sidebar

April 26, 2011 - 11:52pm — Starling

Thankyouu!

April 26, 2011 - 11:54pm — Munkel

Uhoh _

April 26, 2011 - 11:56pm — starr

This is so awesome.

This is so awesome. <3
Thank you.

April 27, 2011 - 12:07am — Unplugged

Thanks you guys. I worked a

Thanks you guys.

I worked a solid few days on this (over the course of a longer time, of course)

April 27, 2011 - 1:12am — arrowdoe

o.o wow &hearts;

o.o wow ♥

—

April 27, 2011 - 1:18am — Ourania

AHJFHSGF I'm totally going to

AHJFHSGF I'm totally going to use this ;o;

April 27, 2011 - 1:22am — OkamiLugia

This is pretty sweet. Maybe

This is pretty sweet. Maybe I'll get the motivation to play around with it someday |D

April 27, 2011 - 7:15am — Nopje

FF Amazing!

FF Amazing! <3 ;u; Thankyouuu ♥

April 27, 2011 - 7:16am — ocean

Wow, that is awesome.

April 27, 2011 - 8:50am — Hart

I like this CSS. Might try to

I like this CSS. Might try to use it sometime. It looks amazing!

April 27, 2011 - 9:02am — .

loves

April 27, 2011 - 1:34pm — z.m123

When I opened the page I

When I opened the page I literally said 'Whho' xDD
Bookmarking~

April 27, 2011 - 1:41pm — arenahs

Oh god, this CSS is so

Oh god, this CSS is so beautiful ! Thank you very much !

April 27, 2011 - 2:02pm — uwharrie

Thank you

Thank you <3

April 27, 2011 - 5:20pm — Dampir

Stares at new css ;D

April 27, 2011 - 8:30pm — Unplugged

Thanks everyone! I hope it's

Thanks everyone! I hope it's not to hard to edit, but since most of it is just colours and background it shouldn't be much of a challenge.

April 27, 2011 - 8:32pm — arenahs

For me, it isn't hard to edit

For me, it isn't hard to edit at all, as well you wrote about what was anything (:

April 27, 2011 - 8:35pm — Unplugged

Thanks for the feedback

Thanks for the feedback arenahs! It's useful for me.

April 30, 2011 - 1:05pm — EternalQueen

Awesome! o Um... May I

Awesome! *o*

Um... May I bother you with a question?

How do you make this thing you write on transparent? Sorry, I don't know the exact name of it... Wait, is it ".node"?

April 30, 2011 - 2:14pm — Unplugged

#wrapper #container #center

#wrapper #container #center .right-corner .left-corner{box-shadow:0px 0px 5px;background: rgba(242, 240, 228, 0.6);-moz-box-shadow:0px 0px 5px;background: rgba(242, 240, 228, 0.6);-webkit-box-shadow:0px 0px 5px;background: rgba(242, 240, 228, 0.6); color:#6b5b4f}
^ remove this from the code

[e]: Ah, if you mean generally:
#wrapper #container #center .right-corner .left-corner{background:none}
If you have any other general questions ask them over there, I get confused otherwise hah.

April 30, 2011 - 2:17pm — EternalQueen

It's because I'm playing with

It's because I'm playing with your code from that blog. As you see, in my testing CSS, I wan't the big purple thing in the middle to turn more transparent...

I'm sorry TT.TT

Edit: Ah, yeah, thanks! Sorry for taking your time, but thanks again :')

April 30, 2011 - 2:24pm — Unplugged

Good. For that code, if you

Good.

For that code, if you want it to be semi-transparent, you will have to use a semi-transparent picture as a background.
(2x2px, fill with colour, lower transparency, save as png and use that)

I looked at your codes. Remember that you always have to write all your CSS in one single line. No new lines or anything, because if you press enter it gets depicted as a break and breaks your CSS.

April 30, 2011 - 2:34pm — EternalQueen

Ok, I tryed lowering my

Ok, I tryed lowering my opacity of my brush before, but it didn't go as I wanted. I think I'm gonna go search on dA for transparency tutorials, because I can't find that button Bx *Cough*
But thanks a lot ^^

Weow. You're pretty smart. Only 2 years older than me, yet... That's epic xD

Hai, sensei~ x3

April 30, 2011 - 4:00pm — arenahs

Wow. So I installed the last

Wow.

So I installed the last version of Mozilla Firefox, and when I came on the bio of my deer (who uses your css coding), I get all... ehm... strangely. Same with Google Chrome. And with IE, that's an epic fail XD But when I come on your blog, all is right, with every naviguator... What is wrong, please ? I never had this under FF before !

April 30, 2011 - 4:16pm — Unplugged

There's something wrong with

There's something wrong with your code. Most likely you forgot to close a div properly or accidentally deleted a < with your last update.
Could you give me your code please? put it between [ code] [/ code] tags (without space)

April 30, 2011 - 4:29pm — arenahs

Thank you ! There it is >

Thank you !
There it is > http://textup.fr/4311pa

April 30, 2011 - 4:41pm — Unplugged

At the beginning, there is a

At the beginning, there is a broken "</object" tag.
You are missing one closing tag. Add a </div> at the end of your code.

April 30, 2011 - 4:48pm — arenahs

Thank you ! I did, but now,

Thank you ! I did, but now, my div is on the comments, floating :/

April 30, 2011 - 4:50pm — Unplugged

Hmm, what stuff did you

Hmm, what stuff did you change before it started looking strange?

April 30, 2011 - 4:53pm — arenahs

Just the music :/

April 30, 2011 - 5:15pm — Unplugged

Hmm, try and remove the

Hmm, try and remove the </div> I asked you to add again.

April 30, 2011 - 5:59pm — arenahs

That's the same :/

April 30, 2011 - 6:06pm — Unplugged

I tried it myself now. Does

I tried it myself now. Does this work?
http://textup.fr/4317T1

April 30, 2011 - 6:08pm — arenahs

That's perfect, thank you

That's perfect, thank you very much <3

April 30, 2011 - 8:12pm — Apparanza

Definitely going to use this

Definitely going to use this for something, thank you SO much Unplugged and everyone else who helped ;O; It's absolutely GORGEOUS~!! 8D ♥♥♥

By Leuvr ♥

April 30, 2011 - 9:11pm — Unplugged

Thanks Apparanza! x There's

Thanks Apparanza!

x There's now 3 versions! Sidebar top, bottom and sticky top.

April 30, 2011 - 9:34pm — arenahs

Every version is really good

Every version is really good ! Will you do a sidebar fixed at the top of the page ? (:

May 2, 2011 - 9:19pm — Selruil

... You. Are. Awesome. These

_{...

You. Are. Awesome.

These are awesome.

But you more so for sitting there and messing with this, and then giving the coding out. o n o

This helps a lot, thank you so much.

I'll probably use this for Levi's bio. <333}

May 11, 2011 - 1:15am — TheLimitlessNight

beautiful ^^ I don't usually

beautiful ^^ I don't usually write up CSS when I have the time and I think you did a great job ^^

art by Xemi

May 11, 2011 - 1:20am — parler

thank you for the mention

thank you for the mention ♥ it means a lot to me
i love what you've done with it, by the way. absolutely amazing. c:

May 24, 2011 - 6:18am — Lynetta

I just died. This is amazing.

I just died. This is amazing. So amazing, the word amazing doesn't even fit it. I think I might use this, just with a different background color, body color, ect. SO. AMAZING. <3

May 24, 2011 - 6:21am — Reyy

this is really beautiful. i

this is really beautiful. i mean, really, really beautiful.

May 25, 2011 - 1:50am — Lynetta

But one question, how do you

But one question, how do you change the .node color, but still leave it fuzzy and clear..? Should I edit the rgba color?

June 9, 2011 - 8:14pm — Skatmat

GORGEOUS! Thank you so much!

GORGEOUS! Thank you so much! I'm soo gonna mess with this ♥

June 20, 2011 - 12:16pm — Unplugged

x I have fixed a bug that

x I have fixed a bug that stopped the box from being as short as the content when there is only a small amount of text.

I've implemented it in all of the codes now. Please update your code if necessary.

June 27, 2011 - 5:18pm — Dajhi

I loved the style, its pretty

I loved the style, its pretty ♥

June 30, 2011 - 10:24pm — Texas

is it possible to have tabs

is it possible to have tabs in this css? :')

June 30, 2011 - 10:27pm — Unplugged

Sure. tabs are not related to

Sure. tabs are not related to css; you can use them anywhere. Just add them like you usually would.

You know what would be awesome? being able to keep comments in a seperate tab. Would be awesome right? Oh yes that would be awesome. Sounds impossible but I'll find a way somehow because that would be awesome. h3h3h3 Thanks for the idea. >:]

June 30, 2011 - 10:30pm — Texas

HAHAHAHAHA I've been trying

HAHAHAHAHA
I've been trying to get the tabs to work with my css but it doesn't want to. I think I broke the codes or something xD
Would it be possible to contact you on hotmail for help maybe?

And yess that would be so awsome 8D I hope you'll find a way

June 30, 2011 - 10:32pm — Unplugged

Sure.

Sure.
You can either add me or just e-mail me, both is ok.