🌊 [HTML] Free Layouts // NEW: Commission Form

Posted 6 years, 9 months ago (Edited 6 years, 1 month ago) by watergems

Rules


  • Do not remove credit; Do not claim code as own/sell for money
  • OK to edit/franken-edit
  • Do not redistribute; link others back to this thread
  • Free to use; tips are appreciated

Features


  • Colour palette adapts to any TH theme
  • Responsive/mobile-friendly
  • HTML only; usable for non-premium members
  • Requires some knowledge of HTML to install/customise

Updates


  • Added User profile layout NEW
  • Updated Wikia & SU Wikia infobox image/field padding
  • Removed Container, (original) Basic, Star, Detailed layouts; Added Divider
  • Wikia & SU Wikia updated with bg-primary infoboxes, edited padding, new collapsible Table of Contents box
  • Credit with current username added to all layouts (lower-right button)

Layouts


zbj5n.png
Wikia
zbj52.png
Sidebar
zbA1h.png
SU Wikia
zbAsG.png
Divider
zbj5E.png
Block
zbj5U.png
Basic
zbA1P.png
Card
zmUDV.png
User
zNqP2.png
Commission Form
ninjashield5

You're welcome~ Oh, okay!

watergems

Wikia & SU Wikia updated:

  • Infobox tables are now cards
  • Fixed spacing/formatting of quote and table of contents

Infobox cards don't use a fixed width, so use large/HQ images in your infoboxes, else they stretch funny. I only test my layouts on a Galaxy S7 Edge and a 1366x768 laptop, so if there's any strange things happening on other devices, tell me so I can try to fix them.

KnightOfSpring

Not sure if it's wanted but both your wikias have a lot of blank space O: there isn't anything besides the ref pic etc card and the quote etc are all pushed under it instead of being beside it.

watergems

really? what device are you using?? this is what it should be looking like: link

watergems

^ whups KnightOfSpring

KnightOfSpring

Ok, I'm at the work computer now but today it actually looks like it's supposed to be. Makes me wonder if there was some spontanous bug going on...should have taken a screenshot yesterday pfft. But keep up the good work!

Lavvy

dvdexe

These layouts are really nice and I love the clean format!

Quick question on the one for [03] Block
How do we change the colors of the frames and blocks ;u;? I was hoping to do various colors per character but I am unsure of how to switch out colors! I am still trying to get a grasp on html code stuff ;u;

watergems

Lavvy thanks! you can find+replace "primary" with whichever colour you like from here (success, danger, info, etc)
i reccomend using the same colour throughout the layout! because these layouts were made to use bootstrap classes, there isn't an option to use custom hex colours, but i could try to figure it out if you don't like any of the other bootstrap colours ^^

Lavvy

dvdexe
Thats okay! I tried to kinda get a hang of placing in the codes linked but it wasn't going to well!
So I switched up to the base layout you linked here but just added boxes to separate them that way I can color custom them with hex codes!

But these layouts are wonderful :D thank you for sharing!

Paradoxical

dvdexe

Ohh, your layouts are so nicely done and I was looking for a simple, but clean one before I stumbled into here and went "YEP THERE WE GO". Kiyo's profile is looking pretty spiffy, thank you!

BaliSTAR

These are so good!! Thank you!

watergems

Sidebar added:

  • Optional alert message & folder directory cards
  • Right sidebar that moves to top on smaller screens
  • Sidebar uses character thumbnail but can be changed to any 200x200 thumbnail
Techni

Thank you so much for making these!
I love the sidebar one, and am using! <3
They're really great layouts!

Pickled

Using sidebar for some private characters (which will hopefully be public once they are completed more)! ^w^/

(**edit: Am now using it for my public characters as well. I love the simplicity and organization of it so much~ >///w///<**)