Free Biography Templates (CSS)

July 29, 2014 - 2:58am — Aivilo

Free to use
Modify as much or as little as you'd like
Leave credit in place (moving position is fine, as long as it's somewhere)
If you don't like the little pictogram () in the upper right corner (it links back to this page), you may remove it and link back in the disclaimer.
Let me know if you find any bugs! I'm human and I occasionally overlook things.
Ask if you have questions, but if you want anything extensive you might be more interested in my custom code blog.
All of my blogs include a "Me" font class that can be coded to match your character's speech font and color (look for "font.me" in the stylesheet). It will work on any page of your bio. Instead of your usual coding, use <font class="me">Words</font> and it will automatically set it up for you. If you ever decide to change up your character's color, it'll change all instances of that font on every page, too! No more memorizing hex codes or shadow/glow values! (at least while you're on your own biography)
All of these hide forum signatures by default. If you would like for signatures to be displayed, remove this line from the comments section of your stylesheet:
.comment .clear-block .content .clear-block{display:none}
Don't see anything you like? Try a template from one of the other wonderful coders on TEFc! Find them here.

~~Only one right now, but~~ I'll add some more whenever I get bored and feel like making some.
Here are some ideas I was throwing around. Let me know if you see one you have to have. I'll code more-requested designs first.
Also feel free to throw layout ideas my way if you are so inclined.

Guidelines:
Beginner - Boxes, text, and maybe a couple of images. No tabs or hover elements.
Intermediate - Javascript elements (including tabs), hover tooltips or images, minor positioning
Advanced - ALL the codes! \o/

Basic Blue
Coding Level: Intermediate

See it in Use
Get the Code

Green Gradient
Coding Level: Intermediate

See it in Use
Get the Code

Minimalist Maroon
Coding Level: Intermediate

See it in Use
Get the Code

Miscellaneous

Aivilo's blog
Login to post comments

July 29, 2014 - 3:34am — Pandoris

&hearts;

♥

—

Pixel by Shadowfly ♥

July 29, 2014 - 3:39am — wingeddeer

Ahh thank you ;;

—

July 29, 2014 - 3:40am — Waning-Sun

settles.

—

Avatar by Meadow. Siggy © Shey & Squeegie

July 29, 2014 - 3:47am — Poppyflower

This is absolutely beautiful.

This is absolutely beautiful. I actually have a possible character in development that might fit this layout nicely. Thank you ♥

—

~Poppy~
Profile picture by ahimsa ♥

Pixel Wis by squeegie~

July 29, 2014 - 3:57am — SoliloquyChryseis

gonna track this

July 29, 2014 - 4:02am — LilyBlue

Track

July 29, 2014 - 4:04am — Abslau

I'm still green to this

I'm still green to this coding stuff.. I really want to use this but not sure if I can figure it out myself xD I've read all the help topics but I'm still in a way lost, any way I could be helped in this sticky situation? cx

—

Signature by Leotie

July 29, 2014 - 4:06am — Spooki

Very nice of you~ Track!

July 29, 2014 - 4:09am — Aivilo

Thanks for the comments, guys

Thanks for the comments, guys ♥

Abslau - What do you need help with, in particular?

—

♥

July 29, 2014 - 4:20am — Abslau

Uhm.. just changing the

Uhm.. just changing the color, putting in my own image, deleting second box, and changing the names of the tabs. So basically, everything customization wise xD It would be nice if you anted to make me one too..? Because I know I am not skilled at the coding part of it at all.. xD But I still want a cool bio cx

—

Signature by Leotie

July 29, 2014 - 4:23am — Aivilo

Haha. To change the color,

Haha. To change the color, look for these areas:
.body
#wrapper
.outer
comment.odd
comment.even
a.link
h3
font.me

There are hex codes in each of those areas that you can adjust to your liking. (A hex code is a 6 character code which specifies a specific color, in example #ffffff is white and #ff00ff is magenta).

To put in your own image, upload your picture to your hosting site of choice (I usually use tinypic), and search for "img src" - replace the URL there with your own. You can adjust the height and positioning as needed.

To delete the second box, just... delete the second box, lol.

Quote:

<div class="outer" style="width:100%;height:150px;padding-bottom:0px;"><div class="inner" style="text-align:center;">Art stuff
If you don’t want this middle section, deleting it will not affect the rest of the blog.</div></div><//

That whole section can go.

To change the names of the tabs, just search for "Tab One" etc with ctrl+f, then highlight the text and change it to whatever you'd like. Same goes for the tab titles.

If you want something custom to you/your character instead of playing with the template and have an idea in mind, feel free to make a request on the blog I linked at the top of the original post.

—

♥

July 29, 2014 - 4:28am — Abslau

Alright. Well, I commented in

Alright. Well, I commented in your blog for the free templates! Thank you for the help, maybe when I get better at it I will try this. Just not now xD

—

Signature by Leotie

July 30, 2014 - 1:32am — Poppyflower

Never-mind, got it fixed~

—

~Poppy~
Profile picture by ahimsa ♥

Pixel Wis by squeegie~

July 30, 2014 - 12:50am — LostintheEcho

Keeping an eye on thissss

—

Sigi by Wake

July 30, 2014 - 6:07am — RikkaChan

Thank you for this

July 30, 2014 - 6:21am — leotie

sits butt down

July 30, 2014 - 6:41am — TreeDancer

TRACKING THIS HARDCORE

September 18, 2014 - 2:18pm — EpherFish

could i ask for some help in

could i ask for some help in customizing the blue css?? i'd like to set a picture as the background for the page, but i'm not sure if i can or how to do it :///

September 18, 2014 - 2:36pm — 7x

Track this! Thank you its

Track this! Thank you its very good.

—

Art by Arres

September 19, 2014 - 2:17am — Aivilo

EpherFish - Sure~ Look for

EpherFish - Sure~ Look for the section of the code where it says "/*Body, Node, and main blog area
*/" (should be at the top of the stylesheet, towards the bottom of the whole code)
After that, it should say body{background:#10102b;} - change this to say body{background:url('LINKHERE');} and replace "linkhere" with the URL of the image you want to make your background.

7x - Glad you like it :3

—

♥

September 19, 2014 - 3:28am — EpherFish

yeah i figured it out a

yeah i figured it out a little bit before you posted this! thank you though <3

December 6, 2014 - 2:32pm — Aivilo

"Green Gradient" is now

"Green Gradient" is now available :3

—

♥

January 4, 2015 - 8:39am — xaii

Probably going to use "Green

Probably going to use "Green Gradient" for my first character. Since I am not familiar at all with creating code... just the basics really.

Thanks! (:

—

by FoxOfTheStars ♥

January 4, 2015 - 10:51am — TreeDancer

(No subject)

January 4, 2015 - 10:03pm — Aivilo

Glad to see these being

Glad to see these being useful :3

—

♥

January 4, 2015 - 11:34pm — Chromai

Will be using this, thanks!

—

personal + character hub

January 5, 2015 - 6:41am — Beaumont13

settles a track here

*settles a track here*

February 2, 2015 - 4:50am — Fainalotea

This is amazing, and so

This is amazing, and so helpful <3

—

February 5, 2015 - 2:39am — IvyChain

Is there any way you can add

Is there any way you can add a comment option on the BasicBlue code?

—

February 5, 2015 - 4:52am — Aivilo

Ivy - saw your other blog.

Ivy - saw your other blog. Comments should never be disabled on these (you can see in the screenshot of that template that the comment buttons are present), I'm not sure what's going on there but I'll be taking a look as soon as I get home. I'm wondering if someone was able to edit the Dropbox code and did so by mistake. I may need to find a different way to link or host these if that's the case.

Edit: Corrected the code. Very weird, since I don't remember putting that in there and it's not written in the way I would have done it (I don't use the !important code when I want to hide those buttons; you don't need it). I'm not sure how or when it happened, either, since other people shouldn't be able to edit those files as far as I can tell (I can't edit them myself, unless I'm logged into my Dropbox account), so I'll continue hosting via Dropbox for now but keep an eye on it... very weird. My apologies for the inconvenience!

—

♥

February 5, 2015 - 4:56am — IvyChain

That's good, now other

That's good, now other players wont have this little mistake.

—

February 12, 2015 - 2:28pm — OshiBoo

Finally tracking this. But

Finally tracking this.
But also wanted to pop in and say thank you so much for making these, the codes are really nice and neatly organized. Great for quick editing and it doesn't break as easily as some of the other templates I've messed with.

Can't wait to see what else you make. <3

—

October 6, 2015 - 7:24am — Aivilo

A very belated thank you, Fox

A very belated thank you, Fox ♥

Finally got around to the finishing touches on Minimalist Maroon!

All codes have been updated slightly to correct an alignment issue with the comments and node area. If it was bugging you as much as it was bugging me, you can add
.node .content{width:100%;background:transparent;margin-left:0px;}
to your stylesheet to correct the issue without having to re-do your stylesheet entirely.

Also, my default stylesheet hides forum signatures. If you would like to display them again, remove this line from your stylesheet:
.comment .clear-block .content .clear-block{display:none}

—

♥

October 6, 2015 - 7:59am — UnusedPictogram

Tracking. May get my husband

Tracking. May get my husband to use that green one for his Taragon. It won't need changed much since it's already green.

October 17, 2015 - 11:14am — takayama

track:)

—

October 24, 2016 - 12:45am — LowLights

How exactly do you change the

How exactly do you change the picto in the "Green Gradient" one? Not the little one in the corner, the bigger one next to the update box.

—

sig by DazzleFlash

October 24, 2016 - 1:07am — leotie

sits

October 24, 2016 - 4:07am — Aivilo

LowLights - replace the link

LowLights - replace the link "http://i61.tinypic.com/2hns1ar.jpg" with an image of your choice.
It's just a screenshot of this page with the green background removed, nothing fancy.

—

♥

October 24, 2016 - 10:44pm — LowLights

Ah I see. How exactly did you

Ah I see. How exactly did you do that? Like I know how to find my own picto but how exactly do I replace the one in the biography with mine?

—

sig by DazzleFlash

October 25, 2016 - 9:29am — Aivilo

I just took a screenshot of

I just took a screenshot of that page, threw it into an image editing program (I use Photoshop Elements, personally, but SAI or whatever works fine), removed the green so that it was transparent, and uploaded the image to an image hosting site (in this case www.tinypic.com). Then use the URL they provide for layouts and replace the sample one.

Alternatively, you can just use the code from your user page -

<embed src="http://tale-of-tales.com/TheEndlessForest/register/symbol.swf?word=OWly" width="100" height="100" bgcolor="#000000">

However, this requires knowledge of how to find and use your pictogram's "true name", and will not have a transparent background around the pictogram (by default it's solid black, although you can adjust the color). It's just less customizable overall because it uses something the site provides rather than an image you can adjust as desired.

It displays like this:

You can adjust the height and background color fairly easily.

<embed src="http://tale-of-tales.com/TheEndlessForest/register/symbol.swf?word=OWly" width="150" height="150" bgcolor="#ff0300">

—

♥

October 25, 2016 - 10:26pm — LowLights

Aa I see Although I don't

Aa I see
Although I don't have an editing program or anything like that so I can't really do that, haha.

—

sig by DazzleFlash

November 11, 2016 - 11:35pm — axesssa

Thank you ogromnoe.A the head

Thank you ogromnoe.A the head broke, how can we do such a bio.

November 12, 2016 - 12:57am — axesssa

Excuse me, but how to change

Excuse me, but how to change the font style?And how can you make the background picture?

November 12, 2016 - 1:40am — Foxhowl

Track :3

November 13, 2016 - 4:36am — Aivilo

axesssa wrote:Thank you

axesssa wrote:

Thank you ogromnoe.A the head broke, how can we do such a bio.

I'm sorry, I'm not sure what you mean by this.

axesssa wrote:

Excuse me, but how to change the font style?And how can you make the background picture?

Look for areas in the CSS with font modifiers. There should be two font classes - "font.me" and "font.top" - plus the class ".header" (which controls the heading of each tab's box), "h3" (used in various places), and likely some other places in the HTML section. There is a line at the very beginning of the CSS section which imports the font/s. I used Google Fonts to pick the different fonts I wanted.

To put an image as the background, find the line */body{background:#10102b;} and add background:url('URL HERE'); so that you get this: */body{background:#10102b;background:url('URL HERE');}

—

♥

July 19, 2018 - 7:59pm — Heldoryn

The Endless Forest

Free Biography Templates (CSS)