NEW: -- Been a while! Don't have anything new just yet, but as I've been poking around the past couple of days, I'm seeing some people using my code and removing the credit. I'm not angry, as I'm not sharing these for any personal gain, but I would really appreciate it if people would leave the credit. The link in the credit is meant to lead people back to this blog so they can also take advantage of the resources here.

Please leave the credit disclaimer if you use my code and add names of creators if you use snippets of other codes as well.

I figured that since it's likely I'm going to change my CSS around over time (read: probably more than I should) or I might make something that I won't use in the end, that I would make this a little place for free-to-use code and CSS layouts (and whatever else code-related I've got to give). Everything here is free for you to use on anything you've got going on here, whether it be a bio page, writing page, your OOC hub, whatever.

Due to how much I hate having to deal with chrome not liking javascript on this website, I'm not likely going to use a lot of javascript and will be trying to do things using pure CSS and HTML. Most of the newer code will be my own, though older codes were heavily edited from the "blank slates" provided by Unplugged (while i was familiarizing myself to the page classes and whatnot). I'll also provide any snippets that I think can be useful in existing layouts as well.

I'm also using this as a hub for fonts and other helpful resources, so expect a lot of those too!

Codes

Templates/Layouts:

Name links of will lead you to a live preview of the layouts so you can get a feel for them, and the "get the code" links will lead you to a pastebin entry. Please leave the credit if you can, but feel free to move it if you want to.

• Template One, aka the first layout I did after coming back and definitely not the prettiest. It's very grey and very basic, so I encourage a lot of recoloring and adjusting to your own needs if you use it (I purposely chose the different shades of grey so that you could use it as a guide, for example changing everything of the shade #222 to black or something).

Get the code!

• Template Two, that uses my version accordion code (which you can find separately below) and a separated updates box. Based off some of the stuff I've noticed is popular with CSS layouts right now, plus stuff I like. Tried to keep it as simple as I could, though. There are tips and tricks on how to fully utilize the layout within the accordion tabs, so look through those!

Get the code!

• Template 3 (Top Bar), which I feel the need to warn maaaaaay be a bit on the advanced side? I don't know. Mostly because if you edit the sizes of anything involving the accordions, they might freak out or get out of their little boxes, and the top bar was finicky when I was trying to get it to sit right on the page, though I hope it's fine now. It's not as polished as I would have like, and is more of a proof-of-concept dealing with the top bar for the menu and hidden updates than anything else. But still, if you feel like tackling it, have at it! I may make an updated, polished version of the drop-down updates tab though that doesn't use a bunch of accordion code.

Get the code!

• Template 4, "The Box", for your compact, javascript-free tab needs. There's actually a lot of hidden flexibility in this one. Need an extra tab? Just copy and paste the code for one of the other tabs and just change the input id and which id the label is for. Want to switch the positions of the updates box and the information box? Change .bio1's top:0; to bottom:0; and change .bio2's bottom:0; to top:0;. And you can even get just the box if you're one of those who don't like messing with the base blog pages.

Get the code!
Only need the code for the box? Get it here!

• Template 5 - "Choco Camo", similar to the last one I did (because I saw how quickly people jumped on it) in the sense that there's two versions: one for a whole layout and another code with just the bio box that you can use independently. This one dealt with a few experiments (the info box is skinny and tall and the tab labels are chilling off to the side instead of being right on top of the box, etc.), but I'm pretty happy with the results for now.

Get the code!
Only need the code for the box? Get it here!

Snippets:

ACCORDION -
• Accordion code, no javascript. First things first, the original code is available here, I've just edited it to make it work on TEFc out of the box. It allows you to have collapsible sections that can opened and closed independently of one another, but still be "grouped" together. And as you can see, you can witness it in action right here on this page! NOTE: smaller tab-content sizes will make the animation run smoother, but you may be required to use scrollbars. I have the tab-content size after clicking set to 100% but you can obviously change it if you prefer. NOTE2: if you change the input type in the HTML from "checkbox" to "radio" you should instead have an accordion where after opening a tab, it will remain open until you open another tab, after which the first one will close, similar to this accordion code, except that all the tabs are collapsed when the page is loaded.

HTML (for putting in your layout):

<div class="accordion">
    <div class="tab"><input id="tab-one" type="checkbox" name="tabs"> <label for="tab-one">Label One</label><div class="tab-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div></div><div class="tab"><input id="tab-two" type="checkbox" name="tabs"><label for="tab-two">Label Two</label><div class="tab-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div></div><div class="tab"> <input id="tab-three" type="checkbox" name="tabs"><label for="tab-three">Label Three</label><div class="tab-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div></div></div>

CSS (put in your CSS area):

<div id="accordionCSS" style="display:none;">

<style>.accordion {margin:0; width: 600px; padding: 0;} .tab { position: relative; margin-bottom: 1px; width: 100%; color: #fff; overflow: hidden;} .accordion input { position: absolute; opacity: 0; z-index: -1;} .accordion label { position: relative; display: block; padding: 0 0 0 1em; background: #16a085; font-weight: bold; line-height: 3; cursor: pointer;} .tab-content { max-height: 0; overflow: hidden; background: #1abc9c; -webkit-transition: max-height .35s; transition: max-height .35s;} .tab-content p { margin: 1em;} .accordion input:checked ~ .tab-content { max-height: 100%;} .accordion label::after { position: absolute; right: 0; top: 0; display: block; width: 3em; height: 3em; line-height: 3; text-align: center; -webkit-transition: all .35s; transition: all .35s;} .accordion input[type=checkbox] + .accordion label::after { content: "+";} .accordion input[type=radio] + accordion label::after { content: "\25BC";} .accordion input[type=checkbox]:checked + .accordion label::after { -webkit-transform: rotate(315deg); transform: rotate(315deg);} .accordion input[type=radio]:checked + .accordion label::after { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); }</style>

</div>

INVISIBLE SCROLLBARS -
• Code for getting rid of scrollbars (an alternative to hidden scrollbars). This leaves the scrollbar for the page itself untouched, but if you want no scrollbars at all, you can just take out #center for each of these.

CSS:

<style>#center ::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #000;} #center ::-webkit-scrollbar{width: 0px; background-color: #000;} #center ::-webkit-scrollbar-thumb{background-color: #000000; border: 2px solid #555555;}</style>

HOVER TOPBAR UPDATES -
• Not really what I wanted, since I wanted to avoid using input and use :target instead, but then I came to the realization that I can't undo that when it happens. However, I might be able to use that later on, so keep an eye open for another snippet? This didn't turn out half bad, though. It's got some cool effects, and hover works almost just as good as a regular drop-down thing. Really bare-bones, though, so I encourage a lot of playing around with it.

HTML:

<div class="topbar"><div class="updatebtn">Updates</div><div class="updates">
"A line of thoughts can go here! Make it short and sweet."

{insert your own P/M/E tooltips or what have you here}<div class="events">Date —

oh boy what drama happened today</div></div></div>

CSS:

<style>.topbar {top:0; position:fixed; left: 50%; transform: translate(-50%, 0); z-index:50; width:700px;} .updatebtn {position:relative; z-index:52; margin:auto; cursor:pointer; width:100%; height:50px; background:#aaa; font-size:35px; line-height:40px; text-align:center; color:#222; border-radius: 0 0 40px 40px;} .updates {z-index:51; opacity:0; margin:auto; overflow:hidden; width:600px; height:0px; background:#888; color:#333; border-radius: 0 0 30px 30px; text-align:center; padding:10px; font-size:15px; transition:all 1s ease-out;} .topbar:hover .updates {height:475px; opacity:1;} .events{position:absolute; bottom:10px; border-radius: 0 0 20px 20px; background:#bbb; color:#111; font-size:12px; width:580px; height:350px; overflow:auto; padding:10px; text-align:left; opacity:0; transition:all 0.5s ease-in; transition-delay:1s;} .topbar:hover .events{opacity:1;}</style>

JAVASCRIPT-FREE TABS -
• Because chrome still thinks javascript in the previews of these posts are evil and I hate accidentally pressing "preview" and then realizing my mistake and loosing all of my code I finally altered that checkbox hack done for my accordion above to instead be used for classic tabs (you can see a slightly prettied-up version in action on this page). NOTE: Unlike javascript or using :target (the latter of which has its own set of problems), you HAVE to maintain the structure of the HTML because the label needs to remain in the same parent div (in this case different .tab classes) as the div it is triggering to change. I thought about making it where a specific div triggers another specific div rather than just its sibling div, but that would require a lot more code (such as specifying every single label and tab with a unique ID in the CSS), if it evens works. If you know your way around CSS and can edit the labels well, though (maybe make the position absolute and move them around the .tabcontainer), you can still really play around with how it looks and make it look completely different and more like the tabs you see being used on complex bio designs. I'm definitely planning on trying something like that down the line.

HTML:

<div class="tabcontainer"><span class="tab"><input type="radio" id="tab1" name="tabs" checked><label for="tab1">Tab 1</label><div class="tabcontent">Tab 1 text.</div></span><span class="tab"><input type="radio" id="tab2" name="tabs"><label for="tab2">Tab 2</label><div class="tabcontent">Tab 2 text.</div></span ><span class="tab"><input type="radio" id="tab3" name="tabs"><label for="tab3">Tab 3</label><div class="tabcontent">Tab 3 text.</div></span><span class="tab"><input type="radio" id="tab4" name="tabs"><label for="tab4">Tab 4</label><div class="tabcontent">Tab 4 text.</div></span><span class="tab"><input type="radio" id="tab5" name="tabs"><label for="tab5">Tab 5</label><div class="tabcontent">Tab 5 text.</div></span><span class="tab"><input type="radio" id="tab6" name="tabs"><label for="tab6">Tab 6</label><div class="tabcontent">Tab 6 text.</div></span></div>

CSS:

<style>.tabcontainer{position:relative; width:600px; height:700px; margin:auto; border: 1px solid #000; padding-top:20px; background: #aaa;} input[type=radio] {display: none;} .tabcontainer label {cursor:pointer; background:#ddd; border:1px solid #000; color: #222; padding:10px; position:relative; margin-left:10px; float:left;} .tabcontent{position:absolute; bottom:0; margin:auto; background:#ddd; width:580px; height:630px; padding:10px; color:#222;} input[type=radio]:checked ~ label {background:#222; color:#ddd;} input[type=radio]:checked ~ .tabcontent {z-index: 2;} .tabtitle{position:absolute; top:0; width:600px; margin:auto;}</style>

Fonts

I've recently starting converting fonts from dafont to potentially have some I can use later on, and I wanted to share. Works exactly the same as Google Fonts (check out this tutorial by Unplugged if you're new to custom fonts). Check out C!ssy's fonts as well, I'm just trying to offer a few of my own here since I may as well.

I'll likely add more in the future, and if you have any particular font that you're eyeing but aren't comfortable enough to convert yourself, let me know. And remember, I'm sharing these in good faith that y'all will use them right and not go against dafont's terms concerning commercial use.

Includes: font example in 50px, link to the stylesheet, and what font family to use:

Acadian Runes

<link href="https://dl.dropbox.com/s/4si7r8ln5yu5c8l/acadian_runesregular.css?dl=0" rel="stylesheet">

font-family: 'acadian_runesregular';

Comic Runes

<link href="https://dl.dropbox.com/s/qv3z0egdbpih1ol/comicrunes.css?dl=0" rel="stylesheet">

font-family: 'comic_runesregular';

Dekiru

<link href="https://dl.dropbox.com/s/xey5tsnidyadcz6/dekiru.css?dl=0" rel="stylesheet">

font-family: 'dekiru';

Endoell

<link href="https://dl.dropbox.com/s/jy3da46blevh055/endoell_regular.css?dl=0" rel="stylesheet">

font-family: 'endoellregular';

far east
*NOTE: Uppercase letters are rotated, lowercase are normal. See the dafont page for details.

<link href="https://dl.dropbox.com/s/wkta2gkcd3s5xsx/far_east.css?dl=0" rel="stylesheet">

font-family: 'far_east';

Flat Earth Scribe

<link href="https://dl.dropbox.com/s/wkbyaxul6p177g3/flat_earth_scribe.css?dl=0" rel="stylesheet">

font-family: 'flat_earth_scribe';

Justinian
*NOTE: Both uppercase and lowercase letters are similar, but there are differences. See the dafont page for details.

<link href="https://dl.dropbox.com/s/yvspfoydxn5jubc/justinian.css?dl=0" rel="stylesheet">

font-family: 'justinian';

La Sonnambula[
*NOTE: The following characters create the decorative swirls (see the font page on dafont for more details): ( ) [ ]

<link href="https://dl.dropbox.com/s/grs19g8wapftuui/la-sonnambula.css?dl=0" rel="stylesheet">

font-family: 'la_sonnambula';

Mayan

<link href="https://dl.dropbox.com/s/n8ca8vl5cgs6hby/mayan.css?dl=0" rel="stylesheet">

font-family: 'mayan_reg';

Misproject

<link href="ttps://dl.dropbox.com/s/vanhuuu0njsa6j0/misproject.css?dl=0" rel="stylesheet">

font-family: 'misproject';

Monte Cristo

<link href="https://dl.dropbox.com/s/4gwfg9v9etbk6r9/monte_cristo.css?dl=0" rel="stylesheet">

font-family: 'monte_cristo';

Pale Blue Eyes

<link href="https://dl.dropbox.com/s/9safe3b500ygy23/pale_blue_eyes.css?dl=0" rel="stylesheet">

font-family: 'pale_blue_eyes';

Railway to Hells

<link href="https://dl.dropbox.com/s/lg61xeptbidypbd/railway_to_hells.css?dl=0" rel="stylesheet">

font-family: 'railway_to_hells';

Tuzluca
*NOTE: This is a symbol font. See the dafont page for details on what symbols are included.

<link href="https://dl.dropbox.com/s/ezup1heprtfub0p/tuzluca_tdd.css?dl=0" rel="stylesheet">

font-family: 'tuzluca_tdd';

Tweaky

<link href="https://dl.dropbox.com/s/ed9yc9beleutt0q/tweaky.css?dl=0" rel="stylesheet">

font-family: 'tweakyregular';

Resources

• Screenfly (web page testing on different screen types)
• Meet the Ipsums
• ColorZilla (for generating gradient codes and color picking on a webpage)
• Font Squirrel Web Font Generator (the tool I've been using to convert .ttf and .otf files into web files, requires further editing and knowledge of how to host the files - such as on dropbox)
• Paletton (help for making nice-looking palletes)
• Subtle Patterns (for your subtle background pattern needs)

November 15, 2017 - 8:43am — postmortem

AAA&hearts;!

AAA♥!

November 15, 2017 - 6:26pm — Lebeau

mmh. i love that layout.

—

avatar by badname

November 15, 2017 - 7:59pm — Tureina

bless

November 15, 2017 - 9:03pm — Laiia

Tracking !~

Avatar & signature by Shimmyshimmy. ♥

November 16, 2017 - 10:59pm — ShrinkingRose

Thanks for sharing the

Thanks for sharing the template with the Forest world!

November 21, 2017 - 9:56pm — Shaireen

I used your template for

I used your template for Shaireen's biography. Thank you very much ♥

November 22, 2017 - 5:44am — nebulae

I quite like this layout.

I quite like this layout. Thank you very much for sharing it.

November 22, 2017 - 6:12am — Sycamorre

I'm so glad to see that

I'm so glad to see that people are enjoying the layout so far! It's been awesome seeing what people can do with it. Hopefully soon I can come up with some other ones to share (I have one in mind that I'll be using personally, too, I just have to figure out how I want to do the details of it). So hopefully soon this page won't looks so barren lol.

But again, thank you all so much. And please, keep sharing with me anything you make using my layouts. They make my day.

November 25, 2017 - 7:41pm — nebulae

Can't thank you enough for

Can't thank you enough for being willing to share custom fonts.

November 26, 2017 - 1:47am — Sycamorre

No problem! As long as folks

No problem! As long as folks get to enjoy them and give their pages a fresh look with them, that's all the thanks I need c:

December 1, 2017 - 8:54pm — Shaireen

Sdfgdsdf sorry to disturb you

Sdfgdsdf sorry to disturb you again, but I'm having another issue.

Here is my code : https://www.w3schools.com/code/tryit.asp?filename=FM2VAMOTQ2HL
Here is my blog : http://endlessforest.org/community/node/110994

I don't understand whyyyyyyyyy comments aren't centered. I think it's a margin problem, but I can't figure it out... Do you have an idea, please...? ;n;

December 2, 2017 - 6:25am — Sycamorre

I don't mind at all! After

I don't mind at all! After poking around at it, I think I found the problem. In your CSS code, look for #squeeze and find where is has: #squeeze{margin:auto; padding:0 50px 0 50px} (should be in the section before ). Replace both '50px' with just '0' and tell me if that fixes it. You may also need to resize the comments if you want them to fit in the colored bar you've got there.

December 2, 2017 - 10:02am — Shaireen

You're a genius ! Thank you

You're a genius ! Thank you very much once again ♥

December 2, 2017 - 9:05pm — Sycamorre

You're welcome! I'm more than

You're welcome! I'm more than happy to help with things like that. Let me know if you need anything else!

December 15, 2017 - 9:12pm — Moonofnawfar

&hearts;

♥

December 16, 2017 - 10:03pm — leotie

i think i've found my

i think i've found my favorite css coder......... its u

December 17, 2017 - 4:50am — Sycamorre

I try my best

December 17, 2017 - 5:05am — Lathyrus

RETRACK &hearts;

RETRACK
♥

December 17, 2017 - 8:53am — Adult | #17 |...

(No subject)

December 20, 2017 - 8:49pm — Solaya

Ahhh your third template is

Ahhh your third template is amazing. Thank you very much for your work !

Avatar by Awentia, signature by Wildflowerdeer

December 21, 2017 - 6:25am — Sycamorre

aaaaahhhh thank you everyone

aaaaahhhh thank you everyone c:
@Solaya: No, thank you! I am actually pretty happy with how that one turned out, and I'm loving to see how people edit it!

Speaking of that, though, I want to remind everyone who uses my templates that if you run into any problem, or want to know how to edit something that may not be as easy to edit as changing a color, or want to add more to one of my templates, please let me know and I can certainly help, either on here or through Discord or whatever you prefer! Some of the features I include are intended to be fairly bare-bones so that you can build on them, but I know some aren't as savvy with CSS as others but will still want to use these. I love to help, and I want my templates to be enjoyed to the fullest!

December 27, 2017 - 3:36am — Proud