Toyhouse Beta Coding Snippets!

Posted 2 months, 28 days ago (Edited 2 months, 26 days ago) by Starlipop

★ Welcome!

Apparently forums have limits in characters now, you may find the full post here or in the replies!
New snippets will also be uploaded here!

★ Intro!

★ All the codes & tutorials linked within this forum are free-to-use, and should be usable for all users regardless of Premium status!
Please support the site if possible though, the admins worked very hard for this update~


This is a WIP, not everything has been tested on all character pages! More things will be added!

★ Please forgive any typos & help correct mistakes! I'm not a coding expert nor am I an English expert o)--<

★ Do not copy code being used on my profile page, it's messy, inefficient, and not meant to be redistributed;; (You can also achieve the same effects with what I'll be showing you here!)

★ Buttons!

★ Buttons buttons buttons! You can use them as links, or neat blocks of colour in your profiles~

Example:

Bootstrap
has
nifty
pre-defined
button
colours!
Which
one
do
you
like
most?


★ You can find the code for buttons and link buttons here!
★ There's ways to customize the colour of the buttons without Premium (you loose the nice hover effects without Premium though), it'll be added in later!
(Or if a kind passerby decides to share~)
★ You can learn about buttons here! Note that the <button ...> code may not work on Toyhou.se, but the class names work mostly the same!

★ Cards!

★ With the new site update, panel radius no longer works! Don't worry though, cards are here to save the day!
★ Like buttons, cards also have some pre-defined colours! You can card styling here!
★ You can also find code to copy-paste here!

Example: A panel replacement!

This is a nifty outlined card panel! You can put content in here.

<div class="card card-block">
    Body text goes here!
</div>

Example:A panel with custom styling!

This is a nifty styled card panel! You can put content in here.
You can edit the border & body colours as you please! <div class="card card-block" style="border:1px dashed #5cb85c;background-color: #c6e6c6;">
    Body text goes here! Style the things within style="..." as you need!
</div>

★ Icons!

Font Awesome Icons have been added! That's over 600+ more icons, on top of the 200+ Foundation Icons which were already usable on Toyhouse!

★ Foundation Icons follow the format "fi-ICONNAME", while Font Awesome Icons follow the format "fa fa-ICONNAME" - just copy the icon name from the respective site!
On the Font Awesome site, you can also click on an icon entry for the code. (Note: aria-hidden="true" given by the site can be left out, but it won't change anything if left in!)

Example: Let's make the star icon, which is called "star" in both icon sets!
<i class="fi-star"></i> will give !
<i class="fa fa-star"></i> will give !

★ Grid System!

★ With the switching to bootstrap, we now have a neat grid system!
★ Buttons, cards, images, etc. can all be arranged in this system! You can also use tables, which were what most free layouts used (check "Do not generate CSS" if using this without a Premium)!
★ This post isn't meant to be a detailed coding lesson, but you can read the grid system in detail here!

★ tl;dr - You can make rows of 12 units which can put your own column combinations into! Usually, the units of all the columns within a row sum up to 12 and rows are held within a container.
★ Common columns: 12 = entire row, 6 = 1/2 of the row, 4 = 1/3, 3 = 1/4...etc. You can use any number from 1-12!
If you want to get mathy, percent of row = colsize/12

Example: Let's make a row and divide it into 1/3 and 2/3!
★ Since we want 1/3 and 2/3, we will be using column sizes 4 and 8 (note that 4 + 8 = 12!).
★ Note: Blue outline added for demonstration, but it's not given in the code below.

25% column!
75% column!


<div class="container-fluid">
    <div class="row">
        <div class="col-4">25% column!</div>
        <div class="col-8">75% column!</div>
    </div>
</div>

★ You can also tack a minimum size for columns - once a screen causes the column to be less than the minimum size, the columns will stack and be full width! You can read about stacking here.
★ Just add the size you want inbetween col and size! For instance, if I want a size 4 column which stacks at medium size (720px), I would use class="col-md-4".
★ This is very useful in making your layouts a bit more mobile friendly! Sometimes screens are small, and taking a percentage of that is even smaller...(⊙︿⊙✿)

I won't be maintaining this forum post, but you can find some more code here!

so you know, your font color are lost on certain themes! i use night mode and it turns all your font white :( i just use bg-faded on all my divs & you know the bg will match whatever the font color is for the theme LOL

Wicked Oh, thanks for letting me know! I'll remove the white hardcoded background then, bg-faded's the same colour as the post body haha + w +)
You're a lifesaver! (✿☌∀☌)✧* I haven't even looked in my settings yet haha

yeah these new themes are super cool but some use white font so they like throw custom layouts for a loop LOL you basically can't use anything with a white bg now without setting a color for all your font... a struggle...

your guide is super cute & well made 'u'/

Wicked Oh no...font styling was already a chore...//weeps with you o)--<
I'm glad you like the guide though! Can't wait to see all your updated layouts aaaaa I know they'll be great + w +) !!

question to Starlipop, how do you archieve by coding the effect seen in this preview pic?

http://toyhou.se/1099931.coding-snippet-goldmine#4059940

@disperagioia If you mean something like the WIP I have up on the profile (two window-like boxes), I'll be posting the code when it's ready!
Right now the boxes look terrible on mobile and I don't want to give anyone semi-broken code ( ・ั﹏・ั);;

Starlipop: noticed that the boxes remain broken on mobile. i made a code with the snippets and it's pretty much broken on phone.

3b1e7d4c66df086dec5ee37c0ad2d479eb9b30af

That's what panels look on a phone. The small Yui panel is hella squished lol.

Quick question re: panels - would content inside be scrollable if you make them a fixed size, or would it just extend the panel to fit the text?

Still working on the double boxes so no code is up, please be patient (ㅠωㅠ);;

feather--weather Sadly no, the text will just spill out if you fix the size! I just put up code to make the panels scroll though, if you're interested you can check it out here ~
Small note, for some reason horizontal scrolling only seems to work on certain pages, for other pages it just wraps the text <><>);;