Free Biography Templates (CSS)

Aivilo's picture
  • 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


Pandoris's picture

&hearts;


Pixel by Shadowfly ♥
wingeddeer's picture

Ahh thank you ;;

Ahh thank you ;;


Waning-Sun's picture

settles.

settles.
Avatar by Meadow. Siggy © Shey & Squeegie
Poppyflower's picture

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~
SoliloquyChryseis's picture

gonna track this

gonna track this Smiling
LilyBlue's picture

Track

Track
Abslau's picture

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

Very nice of you~ Track!

Very nice of you~ Track!
Aivilo's picture

Thanks for the comments, guys

Thanks for the comments, guys ♥

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

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

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

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

Never-mind, got it fixed~

Never-mind, got it fixed~
~Poppy~
Profile picture by ahimsa ♥


Pixel Wis by squeegie~
LostintheEcho's picture

Keeping an eye on thissss

Keeping an eye on thissss
Sigi by Wake

RikkaChan's picture

Thank you for this

Thank you for this Smiling

sits butt down

sits butt down
TreeDancer's picture

TRACKING THIS HARDCORE

TRACKING THIS HARDCORE
EpherFish's picture

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

Track this! Thank you its

Track this! Thank you its very good.

Art by Arres
Aivilo's picture

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

yeah i figured it out a

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

"Green Gradient" is now

"Green Gradient" is now available :3
xaii's picture

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 ♥
TreeDancer's picture

(No subject)

<3
Aivilo's picture

Glad to see these being

Glad to see these being useful :3
Chromai's picture

Will be using this, thanks!

Will be using this, thanks!
Beaumont13's picture

*settles a track here*

*settles a track here*

Sig Icons by Aihnna

This is amazing, and so

This is amazing, and so helpful <3
Image and video hosting by TinyPic
IvyChain's picture

Is there any way you can add

Is there any way you can add a comment option on the BasicBlue code?
Aivilo's picture

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

That's good, now other

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

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

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}

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.

track:)

track:)
LowLights's picture

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.

sits

sits
Aivilo's picture

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

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

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">
LowLights's picture

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

Thank you ogromnoe.A the head

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

Excuse me, but how to change

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

Track :3

Track :3
Aivilo's picture

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');}
Heldoryn's picture

Sweet!!

Sweet!!