❀✧ HTML Layouts ~ Free to Use!

Posted 5 years, 10 months ago (Edited 4 years, 9 months ago) by technichromatic

Codes from Techni

Support discontinued -- no longer offering updates or answering questions

Rules


  • WYSIWYG must be turned off.
  • Editing, frankensteining, anything of that sort are a-ok with me, go nuts.
  • Move the credits if you wish, just don’t get rid of them entirely.
  • Mentioning if you're going to use these is appreciated, but not required.
  • Absolutely no selling or redistribution!

Updates


  • Jun 25, 2019: Officially discontinuing support. Layouts will stay up, but I am no longer offering updates or assistance.
  • Dec 22, 2018: Lots of tabs. Introduced Quick View, Quest Log, and Wireframe.
  • Dec 18, 2018: Redesign and migration.
  • Sep 15, 2018: Introduced Color Box, License, and Trading Card. Finished revamps of Trifold and Pathfinder.
  • Aug 28, 2018: Going through and doing some minor clean up on older codes. Trifold and Pathfinder temporarily down for redesigns.
  • Aug 25, 2018: Single-column update! Introduced Backdrop and Single File.
  • Aug 15, 2018: Introduced Window, Trifold, and CYOA. Credit links now open in a new tab on all themes.
  • Jun 12, 2018: Grand opening! Introduced Tightly Packed, Checkerboard, Pathfinder, Bannered, and On Commission.

Newest

Aigen

Def using the license one. Your codes look so nice :>

Caine

Tightly packed is such a dream come true when it comes to layout, thanks for making all these ! ; o ;

Crowvidkitty

Used one of your codes for this bio of my main oc Avis! :D https://toyhou.se/2958706.avis-lucifer-loose-

misery

your layouts are really lovely! i particularly love the trading card because it's just the kind of niche thing i really appreciate. thank you for taking the time to make these and make them available to everyone!

Daruby

Using checkerboard <3

BitterSweetWisdom

probably gonna edit one of these to fit a world bulletin, thanks for the templates!

BitterSweetWisdom

probably gonna edit one of these to fit a world bulletin, thanks for the templates!

MeloNeko

Definitely gonna use these! They are wonderful!

Aniki

I plan on using the Trading Card code for my Pokemon themed characters! 

Thank you for taking the time to create all of these codes!

technichromatic

Hi again everyone! A very brief return for an update after extended hiatus. Three new doohickeys for now, and all layout previews have been migrated to a side account.

digi

Is it possible to change the colours of the wireframe code? :0

technichromatic

Digital-Nightmarre You can replace the word "success" within most of the classes to change the colors! On the default theme it'll show:

  • "primary" as blue
  • "info" as light blue
  • "danger" as red
  • "warning" as orange
  • "secondary" as grey

And these will adjust to the site color theme. Custom colors beyond the default bootstrap classes are possible using inline CSS, but that involves a bit more tinkering.

digi

technichromatic Thank you, that's super helpful! Do you have any recommendations of places that give a breakdown of inline CSS that I could check out later? If not, thank you for the info and I'll figure something out!   

technichromatic

Digital-Nightmarre I don't know of any resources for using inline specifically; W3Schools is great for learning CSS (and HTML) in general, but that's a pretty big can of worms. But here's some basics:

All inline CSS is done with a "style" attribute in the HTML tags. Some bits of Wireframe have this already to control box heights and scrolling. If you wanna change colors, all you'll really need is

  • "color" for the text
  • "border-color" for, well, borders (and line breaks)
  • "background-color" if you don't want transparent boxes

And you'll typically set these values to the hex code for your color, like color: #0061ff (if you search "hex picker" Google has a tool for grabbing a color's hex code). Separate values with semicolons. So for example, if I use <div class="card" style="color: #a235f4; background-color: #5e2c15; border-color: #ff00a5">...

I can make a card with purple text, a brown background, and a pink outline.

A few notes though:

  • Buttons, like Wireframe's tab navigation and playlist, that are styled with inline CSS won't change appearance when active or hovered over.
  • All custom CSS is not theme responsive, so either make sure your text color is readable on both light and dark backgrounds or set a background color for the cards.
  • Setting inline CSS will override the colors set by the success-based classes, so you can remove "card-outline-success," "btn-outline-success," and "text-success" entirely.