✎FREE HTML Wiki-Style Character Profiles!✎

Posted 2 years, 3 months ago (Edited 1 year, 4 months ago) by Erandia

Erandia's HTML Wiki-Based Character Profile Templates

Wiki Profiles
Final Fantasy XV | LIVE PREVIEW
Log Horizon | LIVE PREVIEW
My Hero Academia | LIVE PREVIEW
Yuri!!! On Ice | LIVE PREVIEW
The Evil Within | LIVE PREVIEW
Kingdom Hearts | LIVE PREVIEW


03/04/2018 - Added a new profile template (finALLY)!!! Spice up your hype with Kingdom Hearts and as a bonus, 2 types of info boxes were remade! One of which is your standard, Keyblade wielder/general OC type while the other is for your Organization XIII baes!
18/03/2018 - Finally updated the FFXV profile and added in Dossiers! Fixed up some sections as well and stuff~
24/09/2017 - A good friend pointed out to me that I haven't checked in with another profile for a character in TEW and realized I'm missing some sections, so added them in and fixed the ordering on it lmao
22/09/2017 - Added a new wiki profile (in preparation for October 13th), The Evil Within!!! Working on 2 profiles atm lmao who knows when I'll be done with them~


A. Do you want me to work on a new profile?
B. Maybe just add in a new color scheme to match with the FFXV wiki?
C. Perhaps the WIP separate page tab for a more coherent DLC section for your babs?

Hello! This is Erandia and recently, I've been coding some wiki-style character profiles for my friends after I've done a base/template code for one of my OCs. So, I decided to upload some of these here so anyone else can use them! These are all HTML compatible so non-premium users can also use them without a fail!

Like what's said in the title, these are based off the wiki profiles so for anyone who likes fandom!OCs and would like the extra immersion, feel free to use them to your hearts' content! I'm allowing full edit/franken-edit of these templates but please credit as always! And if you guys used these, I would love to see your own handy work, so comment if you want to! <3333

These templates were all derived from the same base/source code-- the Watch_Dogs one in particular. If it is similar in structure or form to someone else's code WITHOUT my credit at the bottom, these are ALL just coincidences. I built the WD profile from scratch and all the other templates follow it, and nothing elses'. It may be similar because, well, it's based on the wiki pages lmao the concept itself isn't even original.


Franken-editing/tweaking the code/mish-mashing/generally editing and fixing and what not is OKAY!
What is NOT okay, however, is redistributing, erasing the credits, claiming as your own, basically stealing and pretending you did everythng from scratch. I've noticed a few people who have apparently not seen the rules I put up earlier and ignored my comments on the profile proper and so, either deleted those and or haven't given credit properly, soooooo ¯\_(ツ)_/¯ I'd appreciate it if you guys see incidents like these and report/tell me or my friends!
Using them for your other OCs!
Commenting here your own work/OCs!
Linking others back to this thread/linking the pastebin (I appreciate the former more though)
Do NOT (and I mean it) sell these. They are FOR FREE and anyone asking for a fee/selling these to you is a SCAM and RIPOFF and please report them/tell me asap!

As these are all for free, I reserve the right to do whatever style of profiles I need/want to do and may skip, not do at all, or do so on the spot certain fandoms I've planned. Everyone is free to pitch in and suggest, I may even consider doing it. That does not guarantee a spot on the list, however. Unless you are one of my close friends or a dear someone OF said close friends, I can not guarantee making one for a fandom I'm not into

If you are experiencing troubles using/editing/fixing your profiles using this template, feel free to shoot me a PM or comment on the thread! I may not reply ASAP but I DO read them during my spare time in Uni! That said, please check out the profiles on the table to the right~! Thank you for using them and I am always interested in seeing other people's character profiles! Feel free to comment here if you used them! And uhh, completely optional but if you guys loved my work, any tips on my dA is certainly appreciated! Even one point will do me a favor! But like I said, these are optional!

To Do List:
1. I WILL update the sizes and whatnot but honestly, I'm just waiting for TH to fix itself with the anchors BEFORE I update shit so ye lmao
2. Probably gonna make this thread look nicer or smt lmao I just feel lazy to fix it so default everything for now
3. Might make a General Guide on what to replace in where with pictures and stuff because I know turning off WYSIWYG just to replace the placeholders with actual content of your oc is intimidating, especially to those who have not touched coding not once in their lives. And I get that. So yeah, definitely might make one soon or smt
4. Seriously, gotta get started on other profiles //shifty eyes on Other Fandoms
5. Wait that's it???? Literally I have nothing else to do lmaoooo (though the editing and tweaking is gonna take a while. In particular, fixing the ToC, adjusting the borders, etc) but that means I am free to draw and develop my ocs now hooray! //I wont be tho lmaoOOOO

Erandia's Quick Guide and Tips

Hello everyone! Betcha you're all tired of seeing my name lmaoooo Anywho, this little section is a quick guide to those who want to use the profiles but have little to no idea how and get super intimidated the moment they turn of WYSIWYG. A disclaimer first, Erandia is NOT A GREAT CODER OR TEACHER!!! All I do is learn from the masters themselves and literally indulge a heck ton of tutorials. I'm not going to teach anyone how to code, for starters! What I'll be doing is teaching people what to look for, what things to edit/touch, and basically, how to add in your own info for the profiles I've provided above

1. First thing's first, WYSIWYG should be turned off for you to copy and paste the code in the raw text editor!

4738ac21a188c50998ac1368d3b05740.png You can also check if it's turned off if you see just the raw code in whatever character you are planning to edit!

2. Now upon checking your character profile and whatnot, you'll be greeted with this:
8642bc239339c91e9ec765f7403c24c8.pngDOOOOON'T PANIC YET! JUST IGNORE ALL THOSE FANCY SCHMANCY LESS THAN SIGNS AND GREATER THAN SIGNS FOR NOW! There's only a few things you need to keep in mind so don't worry if it's all jargon to you!

It's okay if you have no clue what anything else means! Because to be frank, there are only a few things people need to keep in mind when editing these. Leave all the dirty div tags and IDs to the (poor, unfortunate) coders! <3333 Remember, these are just simply the bare minimum you need to keep in mind when looking through the raw code!(and it's nothing a little ctrl + f can help you with!):

1. This little bit which, in all my profile codes, is on top of every line. Literally, it's the first few lines of code you'll see! <table style="border: none; width: 1235px; margin-top: 0px; margin-bottom: 0px; float: center; height: 1014px;">(note: The width before the LH profile is default 1024)

2. Anytime you see //INSERT INFO HERE// or OC NAME or ANY variations of those in the code (ctrl + f will help you)


4. Variations of: <a href="/"></a> (once again, ctrl + f href and you'll find most of them!)

5. Finally, variations of: <img src="There would be a link here probably" width="##" height="##" alt="" />

And now for explanations! They'll be short and will not contain any script jargon I promise! //because even I don't understand some of those jargons lmaoooo//

1. <table style="border: none; width: 1235px; margin-top: 0px; margin-bottom: 0px; float: center; height: 1014px;"> Basically, you don't really need the entire thing. You just gotta check the width. The rule of the thumb is: If you see a scroll bar on your bottom/if a horizontal scroll bar appears, then you need to adjust it manually to fit with your screen resolution. 1235 works for MY screen, but it wont necessarily be the same on your end! What's the right number? I have no clue! >u< b Okay in all seriousness, you just gotta do trial and error, maybe go down via 5 pixels like, if 1235 doesn't work, try 1230 then 1225 and so on. The code there is just setting how big the entire profile will be. But if you're a nitpicker (like me!) then certain things irk you and most likely, the profile not fitting in your screen is one of it.

2. This one is pretty self-explanatory. I deliberately added "//INSERT HERE INFO//" as a really obnoxious placeholder to attract attention and not let people get swallowed by the sea of codes and jargon. Just ctrl + F and ignore everything else and add in whatever info you need!

3. Same explanation as the one above, actually. Besides, Latin is cool! >u<

4. <a href="/"></a>
This is actually just the raw code for adding in links! You need them to locate where you have to add in the links for image galleries, clickable images, etc. Just replace the "/" between the two quotes with the link you need!

5. <img src="There would be a link here probably" width="##" height="##" alt="" />
This one is for the images! Normally, I'd put placeholder images on the link part and that's what you need to replace! (Remember, it has to be a direct link!) The width and height could be adjusted to your tastes, but I usually just follow the wiki standards.

And that's usually it! Literally, with just that, there's nothing to else to change and whatnot! I've always put in reminders on each code as comments and whatnot, so please do remember to read it as well! For any other things you want to change (color, BG, etc) that usually required just finding the hexadecimal numbers (things with #000000 or any combination of numbers and letters) But like I said, even when you have no idea what the hell are all these huge fricking jargons are, if you know what to look for, then there's nothing to fear! I wish you luck and for any other concerns, just leave a comment on the thread and I'll try my best to help! //and if not, because srsly I'm a really newb coder, then maybe some of the veterans will help out! ONCE AGAIN, THIS GUIDE IS FOR THOSE WHO ARE SERIOUSLY TOO AFRAID TO TOUCH THE RAW CODE/TURN OFF WYSIWYG BUT WANT TO TRY OUT SOME CUSTOM PROFILES! THIS IS NOT MEANT FOR THOSE WHO ARE SEASONED PROFILE EDITORS!!!


asdfghj aaaaa thank you! Actually I bugged my friends so much when I was making the side boxes and content page (mostly because I was trying to figure out how to make borders work even with the main table having set the border-collapse: collapse function) and hhhhhhhh just figuring out that and how to anchor stuff really just made me feel it's all worth it >u<

//I might do image mapping one day because I can't figure out the image hovering (or was that only CSS) if I ever find extra time ahaHHAH thank you so much btw!


Haha omg! I had been working on one of these to give-out as freebies but always been to lazy to get around finishing it but I think you got it down just right!

Nice work!


@Venomouswolf asdfghj hhhhh tyty~! It's mostly my friends who encouraged me to work on these actually lmao and they've done some testing as well so shout-outs to them for putting up with a lot of my bs ahahh


Fuwa's hard work shines! ;u; I LOVE her profiles!


kOKO AAYYYYYYYYY u found me! >u<

also ^^^^^^^ SHOUT OUTS TO KOKO FOR PUTTING UP WITH MY DERPY PATCHES EVERYTIME I SCREWED UP WITH THE SIDE BOXES AND THE ANCHORING Omfg give her an award please she put up with my annoying edit patches the most asdfghj


No, no! It's really okay. ; u; I sure as heck wouldn't have been able to notice/tell, if you didn't! I'm just glad you don't mind me as I keep messing with Emi's profile and adding in things to it, while experimenting with things.


Girllll u so nice to me orz" But of course go wild! I only provide the base/skeleton, it's up to you how to make it cooler/give it that touch to make it Emi's entirely! I'm actually excited to see/read more from her profile ahhaahHAH


@Anahit aaaa thank you! >u< //


omg this would be perf for my ff14 ocs thanks so much for making them


@Mindless aaaaaa thank you! >u< b @100LittleDreams oh gosh you're very welcome! I'm glad these would have use for your own ocs! <33333

UPDATE: Added in the code for the Watch_Dogs wiki style chara profile! Also have started checking which other profile styles am I looking at replicating //shifty eyes at YoI and YGO//