[Free CSS] Evergreen

Unplugged's picture

See guide + features below.
Preview:
(forgive the shoddy preview loading. im honestly just too lazy to do it proper)
EVERGREENDREAMERSECRETSLOVE LETTER

<!--

	### EVERGREEN MAIN CONTENT ###

--> <center>

<div id="mainwrapper"> <!--

	*** T I T L E * * *

--><div id="mainbox"> <div id="titlewrapper"> <span class="titlefont">Evergreen</span> </div><!--

	*** T A B  L I N K S * * *

--> <div id="tablinks"> <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('one').style.display='inline';">I</a> <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('two').style.display='inline';">II</a> <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('three').style.display='inline';">III</a> <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('four').style.display='inline';">IV</a> <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('five').style.display='inline';">V</a> </div> <!--

		*** T A B S ***

--> <!--

		*** Tab 1 ***
--> <div id="textwrapper"> <div class="tab" id="one" style="display:block"> <div class="invis-scroll">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.

The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline</div> </div> <!--

		*** Tab 2 ***
--> <div class="tab" id="two" style="display:none"> <div class="invis-scroll">2</div> </div> <!--

		*** Tab 3 ***
--> <div class="tab" id="three" style="display:none"> <div class="invis-scroll">3</div> </div> <!--

		*** Tab 4 ***
--> <div class="tab" id="four" style="display:none"> <div class="invis-scroll">4</div> </div> <!--

		*** Tab 5 ***
--> <div class="tab" id="five" style="display:none"> <div class="invis-scroll">5</div> </div> </div> <!--



		*** Copyright. Do not remove. ***
-->
<div id="dischover">©<span class="dischovertext">CSS "Evergreen" © Unplugged.
Tabs © AlisonRobin.</span> </div>
</div> </div> <!--

		*** I M A G E ***
		*** Your image goes here! Adjust width and alignment as needed.
		*** Keep top and margin-bottom the same.
-->
<img style="position:relative; top: -200px; margin-bottom:-200px; left:-70px; width:850px; pointer-events:none; z-index:5" src="http://artsja.at/tef/img/placeholdeer.png"> <!--



		*** Comment link ***
		**** IMPORTANT: Replace node ID (000000) with node ID of your blog, or the link will
		**** not work!
-->
<a href="/community/comment/reply/000000#comment-form" class="commentlink">Speak</a> <!--


		### END MAIN CONTENT ###

		
		### START CSS ###

		

 - - - FONTS - - -

--> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <style>@font-face { font-family: 'Starlight'; src: url('https://dl.dropboxusercontent.com/s/momo3kkcli43q8n/children_of_the_starlight-webfont.woff2') format('woff2'),url('https://dl.dropboxusercontent.com/s/momo3kkcli43q8n/children_of_the_starlight-webfont.woff') format('woff'); font-weight: normal;font-style: normal;}</style> <!--




 - - - MAINFRAME - - -

--> <style> #mainwrapper{ width: var(--mainwrapper-width); } #mainbox,#textwrapper{box-sizing:border-box} #tablinks,#titlewrapper{width:100%;display:flex} #tablinks,#textwrapper{background: var(--textwrapper-bg)} #mainbox{width:100%;height:auto; border-radius:var(--mainwrapper-width) var(--mainwrapper-width) 0 0;} #mainbox a{color:var(--link-color)} .titlefont{color: var(--title-color)} #titlewrapper{justify-content:center;align-items:center} #textwrapper{position:relative;overflow:hidden;} #tablinks{justify-content:space-around;align-items:center;} a{transition:all 1s}  #dischover{display:inline-block;position:relative}  a:hover, #tablinks a:hover{text-decoration:none;color:var(--link-color-hover)} #dischover .dischovertext{position:absolute;z-index:25;top:100%;left:50%;color:var(--disclaimer-text);opacity:0;transition:all .2s;visibility:hidden} .invis-scroll,.tab{width:103%;height:100%} #dischover:hover .dischovertext{opacity:1;visibility:visible} .tab{color: var(--text-color);overflow:hidden;text-align:justify;} .invis-scroll{overflow:auto;padding-right:100px} .node .links{display:none} a.commentlink{color:var(--commentlink-color)} a.commentlink:hover{color:var(--link-color-hover);text-shadow:0 0 10px var(--link-color-hover)}</style> <!--

 - - - STYLING - - -

--> <!--

 - - Main Div - -
--> <style> :root { --mainwrapper-width: 450px;} #mainbox{background:url('http://i.imgur.com/ognNkPW.png') center; background-size:cover;border:1px solid #000;box-shadow:0 0 30px #000} </style> <!--

 - - Main Title - -
--> <style>  #titlewrapper{height:210px; font:80px Starlight} .titlefont{text-shadow:1px 1px 1px rgba(0,0,0,.3)} </style> <!--

 - - Tab link div - -
--> <style> #tablinks{padding:10px 0;font-size:150%;border-top:1px solid #fff;border-bottom:1px solid #fff} </style> <!--

 - - Text Div - -
--> <style> :root {--textwrapper-bg: rgba(255,255,255,.8);} #textwrapper{width:300px; height:500px; margin:50px 0;border:1px solid #fff;padding:20px; font:14px Lato} </style> <!--

 - - Disclaimer - -
--> <style> #dischover{bottom:4px; color:#000} #dischover .dischovertext{width:250px;padding:5px;margin-left:-130px;text-align:center; background: rgba(0,0,0,.5)} </style> <!--

 - - Comment link - -
--> <style> a.commentlink{text-shadow:1px 1px 1px rgba(0,0,0,.3); font:110px Starlight;} </style> <!--

 - - Text colors - -
--> <style> :root { --text-color: #006f56; --link-color: #D1E666; --link-color-hover: #fff; --disclaimer-text: #fff; --title-color: #fff; --commentlink-color: #D1E666} </style> <!--



	***** E N D ******

	
-->




Evergreen
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.

The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline

©CSS "Evergreen" © Unplugged.
Tabs © AlisonRobin.




Info


* Remember to put your code under the cut and set input format to BBCode.
* Code is fully commented and easy to customize using your own colors, background, images, and setting the width and height of divs.
* Please do not remove the credits.
* You are allowed to alter this base in any way you like.

* Important: you MUST edit the url of the "Speak" comment link to the node number of your blog! If you don't know how to find your node, there are two ways:

1. Create your blog. Name it "." or another special character. Your blog URL should look something like this:
http://endlessforest.org/community/node/123456
2. replace "000000" with your node number. (in this case, 123456.)

or:

1. Create your blog. Right click and choose "view source code".
2. Press ctrl+f and search for "Add New Comment". There should be a link there that looks something like this:
/community/comment/reply/123456#comment-form
3. Again, replace "000000" with your node number.


Speak

Unplugged's picture

If you want to find some nice

If you want to find some nice background images, I recommend checking out my Texture collection over on deviantart which has a lot of neat stuff.
http://artsjadopts.deviantart.com/favourites/73882706/Textures
pumpkinseed's picture

Beautiful!

Beautiful!
phantomhelsing's picture

oh wow! This is actually sort

oh wow! This is actually sort of close to the new layout I was going to go with for my bios, this base would be a great help for starting it =O

you are a glorious code wizard BLESS

Yassss I LIKE!

Yassss I LIKE!
Thais's picture

Ahhh! thank you so much for

Ahhh! thank you so much for doing this!
Display pic by crabbycrown ♥
phantomhelsing's picture

One quick question because I

One quick question because I guess I'm just missing it somewhere, I'm having trouble changing the div height @-@ what am I missing lol
Unplugged's picture

@phantomhelsing The height of

@phantomhelsing
The height of the entire box is based off of the height of the textbox. You can find that snippet here:
#textwrapper{width:300px; height:500px;

oh wow ouo &hearts;

oh wow ouo ♥
Shey's picture

hnnnnnnng track

hnnnnnnng track
phantomhelsing's picture

Aha! Got it, thank you C:

Aha! Got it, thank you C:
lemon's picture

Absolutely gorgeous! Thank

Absolutely gorgeous! Thank you for sharing this!
Avatar by Kohva!

riddledrhyme's picture

aaaaaa tysm

aaaaaa tysm <33
ShrinkingRose's picture

Niceness!

Niceness!

Oh my. I'm in love. Thank you

Oh my.
I'm in love.
Thank you so much for sharing this. <3
kseniamokhova's picture

I was waiting for this, great

I was waiting for this, great designs
Clare's picture

yeesss

yeesss <3

Hhh this is so nice I love ;;

Hhh this is so nice I love ;;<3
kikinkacze's picture

Awesome and helpful! Yiiss!

Awesome and helpful! Yiiss!
gif by Hautakumpu
Kamaya's picture

&hearts; This heart says it



This heart says it all.
kiwara's picture

t.

t.
Avatar © Squeegie & Siggy © Caiir + other

Quick question! Say I want

Quick question!

Say I want to put the image at the bottom behind the div instead of in front of it. Where in the CSS would I put the coding for that? I've tried working with it a little, and it's screwing up the entire page.
Unplugged's picture

Add

Add #mainbox{position:relative;z-index:10}, I think that should do the trick!

[e] Okay nevermind, I'm an

[e] Okay nevermind, I'm an idiot. So instead, a different question: what CSS allows me to move the actual div itself, and where in the coding would I place it?
Unplugged's picture

<img

<img style="position:relative; top: -200px; margin-bottom:-200px; left:-70px; width:850px; pointer-events:none; z-index:5" src="http://i.imgur.com/jSrG6Uc.png">

Find this part and edit the "top:-200px" and "left:-70px" attributes to change the positioning.

fdjalfjda you got to me

fdjalfjda you got to me before I finished editing lmao. I'm an idiot. )':
Unplugged's picture

LMAO sorry ;_;

LMAO sorry ;_;
#mainbox{left:100px;top:40px;}
Should be something like this, but with your own numbers ofc

No no it's okay really

No no it's okay really ;__;

It works beautifully now. Thank you so much! <3

Okay, two more questions, I'm

Okay, two more questions, I'm so sorry ;__;

Do I need to make a new div to insert an MP3 into the div? I've just tried the basic coding, and it's not appearing where I had it (between the inner div and the copyright symbol). Or am I overlooking something...as usual? ):

Second is...there's a huge gap between the bottom of the blog entry and the bottom of the page. Seen here and here. Is there a way to fix that, or is that just an effect of the image manipulating?
Unplugged's picture

Sorry, had to sleep last

Sorry, had to sleep last night!
Try adding this code right before <div id="dischover">. I haven't double-checked it but it should work.

<div style="position:relative;display:inline-block;bottom:30px;">music code here</div>

Adjust the "bottom:30px" to your needs.

As for the space below the images, I don't see any issues. Did you solve it already?

It's fine. It works

It's fine. It works perfectly, thank you!

I mean like...the end of the blog. Here's a screencap. That empty space goes on a bit further. It could be a browser issue of some sort? I'm using Chrome.

Forgot to put a &hearts;

Forgot to put a ♥ here. Beautifully done.
LowLights's picture

!!

!!
Shaireen's picture

thanks!

thanks!