❀✧ 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

ThePencilRiot

Hey, I used your CYOA on this mini game for my fursona. I love writing little stories like this. Thank you lots!

LanternlightFae

I used Quick View! Thank you!

Azure-Sketch

Hey there! I'm gonna use the Color Box code, maybe the license code also?? I dunno yet... but they're lovely! Thank you~!

Moni Skykristal

I´m using Tightly Packed on her profile! thank you

muesungpluto

I might use some of these, thank you!

Blrryfce

Using checkerboard!

Morgueman

I will use some of these, thankyou!

Ninya

I know the OP isn't offering assistance anymore, but maybe someone else whose good at code will see this so worth a shot-

I've been working with this code https://toyhou.se/3216825. for well over a year now, altering it and making really cool profiles out of it for my characters like https://toyhou.se/5993587.marcus, but the one thing I've never been able to figure out is, is there a way to set a custom color for the tabs that change the pages? If anyone knows pls hmu, it's been bothering me forever cos the blue (I use default TH) just looks so out of place compared to everything else on some of my profiles. ;u;
Every attempt I've tried usually leads to the colors being permanently fixed on the buttons (they're supposed to change when you're on a specific tab or hovering over them). It's really the only thing I've never been able to figure out while working with and altering this code.

MoonLotus-Hime

Redactdead Ah! you just need change nav nav-pills or pills from <ul class="nav nav-pills flex-column"> to nav nav-justified/justified! (<ul class="nav nav-justified flex-column">)

Hope that helped!

Ninya

MoonLotus-Hime Not entirely, though I think its a step in the right direction so thank you for that bit at least!

I might not have explained too well, here's the code bit I'm working with exactly (without the edit you gave me):

<!-- NAV -->
<div class="card rounded-0 mb-3">
<div class="card-block">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a href="#basic" data-toggle="tab" class="nav-link active d-flex justify-content-between">Basics<i class="fal fa-paw fa-fw my-auto"></i></a>
</li>
<li class="nav-item">
<a href="#info" data-toggle="tab" class="nav-link d-flex justify-content-between">Info<i class="fal fa-paw fa-fw my-auto"></i></a>
</li>
<li class="nav-item">
<a href="#furry" data-toggle="tab" class="nav-link d-flex justify-content-between">furry AU<i class="fal fa-paw fa-fw my-auto"></i></a>
</li>
<li class="nav-item">
<a href="#friends" data-toggle="tab" class="nav-link d-flex justify-content-between">Relations<i class="fal fa-paw fa-fw my-auto"></i></a>
</li>
</ul>
</div>
</div>

And here's a preview of just the part I need help on to help too: https://toyhou.se/9686151.test?key=Ug05vnZ44L5GAhf

I'm trying to make it so the color that's- on default display settings -blue, just a different color / whatever color I want it to be using a hex code or something, but still just blank when you're not hovering over the button or have it clicked. That code tip you gave me gets rid of the color altogether, but I'm not sure where to dump the hex code then. I tried to mess around with it with the edit you gave me, adding it in places, but then the "custom color" was still permanently fixed there, even if you weren't on the selected tab or hovering over it ;u;

I hope that made sense, I'm by far not a master at coding and I don't really know the technical terms either, aha-

MoonLotus-Hime

Redactdead (I forgot to tag you LOL) Ah! No actually I understand what you needed! I thought that the Nav coding(  pills  to justified ) was only thing you need change for the Nav color to change. And you kinda figure out how change color for the linking thing.^^; Also I'm horrible at explaining tbh, I'd hope I can make sense to you and works too! Or if this what you were referring to what you actually wanted.

Though the Hex color for Hovering button can only be adjusted in Premium (CSS coding) sadly.


(Custom Bootstrap color can only work for Hovering and can be use by ALL user) 

>Just add  btn-outline-success  in class="nav-link d-flex (Place here) justify-content-between"

Example or you can copy this below!

<!-- NAV -->
<div class="card rounded-0 mb-3">
<div class="card-block">
<ul class="nav nav-justified flex-column">
<li class="nav-item">
<a href="#basic" data-toggle="tab" class="nav-link active d-flex btn-outline-success justify-content-between">Basics<i class="fal fa-paw fa-fw my-auto"></i></a>
</li>
<li class="nav-item">
<a href="#info" data-toggle="tab" class="nav-link d-flex btn-outline-success justify-content-between">Info<i class="fal fa-paw fa-fw my-auto"></i></a>
</li>
<li class="nav-item">
<a href="#furry" data-toggle="tab" class="nav-link d-flex btn-outline-success justify-content-between">furry AU<i class="fal fa-paw fa-fw my-auto"></i></a>
</li>
<li class="nav-item">
<a href="#friends" data-toggle="tab" class="nav-link d-flex btn-outline-success justify-content-between">Relations<i class="fal fa-paw fa-fw my-auto"></i></a>
</li>
</ul>
</div>
</div>

----

Should look like this:

---

Where to change color: In btn-outline-success or specifically success (Green color) change that to these other bootstrap color below: 

primary
secondary
info
warning
danger

Example:

----- 

Code Ex | Copy this if you want:

<!-- NAV -->
<div class="card rounded-0 mb-3">
<div class="card-block">
<ul class="nav nav-justified flex-column">
<li class="nav-item">
<a href="#basic" data-toggle="tab" class="nav-link active d-flex btn-outline-primary justify-content-between">Basics<i class="fal fa-paw fa-fw my-auto"></i></a>
</li>
<li class="nav-item">
<a href="#info" data-toggle="tab" class="nav-link d-flex btn-outline-secondary justify-content-between">Info<i class="fal fa-paw fa-fw my-auto"></i></a>
</li>
<li class="nav-item">
<a href="#furry" data-toggle="tab" class="nav-link d-flex btn-outline-info justify-content-between">furry AU<i class="fal fa-paw fa-fw my-auto"></i></a>
</li>
<li class="nav-item">
<a href="#friends" data-toggle="tab" class="nav-link d-flex btn-outline-warning justify-content-between">Relations<i class="fal fa-paw fa-fw my-auto"></i></a>
</li>
<li class="nav-item">
<a href="#misc" data-toggle="tab" class="nav-link d-flex btn-outline-danger justify-content-between">Misc<i class="fal fa-paw fa-fw my-auto"></i></a>
</li>
</ul>
</div>