Hideto's HTML/CSS Free and Licensed Code -02/21/20

Posted 4 years, 6 months ago (Edited 4 years, 1 month ago) by HidetoKoudanshi

WHEEE!!!

41 Votes Hideto is great for giving away/teaching the free code he gives away!
2 Votes Meh. I don't care. Have fun I guess?
4 Votes I am a petty child who is having a tantrum because he's giving away all the code secrets I used to hoard for fame but can't anymore! Stop it! WAAAH!

This will have something all fancy-like relating to my code shop, which is on my alternate account, AmethystAndAnkh. If you see posts in here from AmethystAndAnkh, know that that's me.

P.S. I hate Bootstrap but I utterly understand why we have to have it. It makes a sandboxed site like TH safely customizable and does a fairly good job of it. Poke me if you want to understand why I can compliment Bootstrap yet hate it at the same time. That discussion wouldn't fit here.

HidetoKoudanshi

Who wants animations? I know I do!

There's an incredible resource page for animated CSS transforms that has licensed anyone to be able to use the code. I have uploaded it to Toyhouse with full rights attribution in the comment code of the file.

Go here to see the code in action: http://daneden.me/animate

The CSS file import code you need is below:

@import '0/2137/32KEFj/animate';

Put that in the CSS portion of any account or character profile pages you want to have access to animation in.

*** IMPORTANT NOTE *** You CANNOT use @imports on forum posts anywhere, so this animation code will not work straight out of the box. You can view, copy, and then paste the viewed individual code snippets that cause the animation you want into a forum post but you can't do a simple coded reference like this provides. It's just not possible at this time due to how Toyhouse is coded. Poke the admins if you want to see this change. (I do!)

I have a "help page" character for this animation code. It's mostly finished with some decorative problems I'm trying to figure out how to fix. (Help welcome!) If you'd like to see how the code looks in action on Toyhouse and get some very simple help on how to use it, yourself, check out this character link: Animate CSS Help If the character is not visible, it's hidden for updates to it. It's ready to go and I hope it helps!

HidetoKoudanshi

Isn't it annoying that you can't customize spoiler tags to use as generic collapsible content boxes? There's a solution!

This website will teach you how to write your own custom spoiler code.

https://alligator.io/css/collapsible/

BTW, in the code, look for the tags marked:

<input id="collapsible" class="toggle" type="checkbox">

and

<label for="collapsible" class="lbl-toggle">Bounce Code</label>

If you wish to have more than one spoiler collapsible box, each successive box must have a NEW ID and FOR label or clicking on your second spoiler box will only pop open the first one. Name them something like "collapsible", "collapsible2", "collapsible3", etc.

HidetoKoudanshi

The Animate CSS Help character page is finished! Go there to see what can be animated and how, and to see some very rudimentary help to use this code. Reminder: If the sample text isn't animating, that means Toyhouse doesn't allow that bit of code to work as it should. Put in a request to staff for any non-working code to be whitelisted so it'll work. :)

Enjoy!

AmethystAndAnkh

It's me, Hideto.

I have new free code to share with you!

I needed a base template character design for my own CSS work and I realized since it's just a base, maybe others may enjoy/find it interesting. If you have any suggestions or requests related to it, whether to see my base design improve or just how to customize my base for your own work, please post here.

This is really basic code so I'd ask you not to worry about putting any sort of link back to me or any code attribution. I didn't include any in the code itself. We gotta stop being territorial on here about really basic HTML/CSS code, honestly. I'm giving this away attribution-free to help others, not to build my own cred. 

One other thing to note. TH offers us a pre-processing language called SASS that is quite powerful, however much of my code uses basic HTML and CSS where possible and only uses SASS for things I really can't accomplish in base HTML and CSS. My reasoning for this is if you rely too heavily on pre-processors even as base CSS is improved, then you don't understand the fundamentals of coding, and if you wind up on a place that doesn't provide you with SASS, you may not know how to code without it. The same goes for Bootstrap, though I forced myself to use as much of it as was reasonable both to teach myself Bootstrap, since I'd never used it before, and because many users like Bootstrap, so I wanted to use it for them.

I'm entirely self-taught and try to be as standards-compliant and cross browser-compliant as possible. If you see any flaw in any of my HTML or CSS, please don't hesitate to point it out to me. I'm always glad to learn and the last thing I want to do is teach people bad coding practices.

The code shows on its own character profile and the raw text you need to copy and paste are written up as World Literature for the "character". I did this so that the profile showed itself cleanly and smoothly and you wouldn't have to guess what was actual profile styling and what was instructional text. Post here if you're confused or having trouble finding it. If this method proves too confusing, I'll think up some other way to display the raw code text.

Link: Base Character Page Code (Rnd)

Hope this is helpful!

AmethystAndAnkh

More free code!

Who wants customizable spoiler code?

Spoiler

I do!

I have both free and premium versions of the code. If you have premium, I really suggest you use the premium version as it's so much cleaner to use, read, and modify. Both code copies do exactly the same thing. There's no functional difference, I assure you.

Free customizable spoiler code: https://toyhou.se/6040221.customizable-spoiler-boxes

Premium customizable spoiler code: https://toyhou.se/5919489.customizable-spoiler-boxes

If something doesn't work right and you find some errors, please let me know in great detail what your error was so I can fix it right away. Also, please let me know if you like this code so I can make it the best it can be, and if you have suggestions for other ideas for me to code, again, please let me know. I enjoy coding and like helping people.