New CSS for you {3 Versions}

Unplugged's picture


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
Starling's picture

Thankyouu!

Ooh Thankyouu!
Munkel's picture

Uhoh *_*

Uhoh *_*

This is so awesome.

This is so awesome. <3
Thank you.
Unplugged's picture

Thanks you guys. I worked a

Thanks you guys. Smiling I worked a solid few days on this (over the course of a longer time, of course)
arrowdoe's picture

o.o wow &hearts;

o.o wow ♥
Ourania's picture

AHJFHSGF I'm totally going to

AHJFHSGF I'm totally going to use this ;o;
OkamiLugia's picture

This is pretty sweet. Maybe

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

FF Amazing!

FF Amazing! <3 ;u; Thankyouuu ♥

ocean's picture

Wow, that is awesome.

Wow, that is awesome.
Hart's picture

I like this CSS. Might try to

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

*loves*

*loves*
z.m123's picture

When I opened the page I

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

Oh god, this CSS is so

Oh god, this CSS is so beautiful ! Thank you very much !
uwharrie's picture

Thank you

Thank you <3
Dampir's picture

*Stares at new css* ;D

*Stares at new css* ;D
Unplugged's picture

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.
arenahs's picture

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 (:
Unplugged's picture

Thanks for the feedback

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

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"?



Unplugged's picture

#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 Smiling

[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.

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 :')





Unplugged's picture

Good. For that code, if you

Good. Smiling

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.

Ok, I tryed lowering my

Smiling

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



arenahs's picture

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 !
Unplugged's picture

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)
arenahs's picture

Thank you ! There it is >

Thank you !
There it is > http://textup.fr/4311pa
Unplugged's picture

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.
arenahs's picture

Thank you ! I did, but now,

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

Hmm, what stuff did you

Hmm, what stuff did you change before it started looking strange?
arenahs's picture

Just the music :/

Just the music :/
Unplugged's picture

Hmm, try and remove the

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

That's the same :/

That's the same :/
Unplugged's picture

I tried it myself now. Does

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

That's perfect, thank you

That's perfect, thank you very much <3
Apparanza's picture

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
Unplugged's picture

Thanks Apparanza! x There's

Thanks Apparanza!

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

Every version is really good

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

... 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
<:
TheLimitlessNight's picture

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

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:
Lynetta's picture

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
Reyy's picture

this is really beautiful. i

this is really beautiful. i mean, really, really beautiful.
Lynetta's picture

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?
Skatmat's picture

GORGEOUS! Thank you so much!

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

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.
Dajhi's picture

I loved the style, its pretty

I loved the style, its pretty
Texas's picture

is it possible to have tabs

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

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. >:]
Texas's picture

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 Eye
Unplugged's picture

Sure.

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