Code FAQ, Troubleshoot, & Resources | 2/13 Update

Posted 2 months, 2 days ago (Edited 4 days, 16 hours ago) by HatsuneMiku
Thread Rules

  • This thread can be used to ask for help or to suggest more FAQ's or other resources.
  • Be nice and patient, we're all very busy and being nice will take you farther than being rude.
  • Don't spam pings.
  • If WYSIWYG messed up your code (and we'll always be able to tell) follow the instructions below before you come back for help.
  • Don't expect anyone to code something for you.
  • Don't expect anyone to teach you how to code.
HatsuneMiku
Site Updates

Disclaimer: We are not in contact with admins about a lot of these and these should not be considered official notes. These are just general updates that we've noticed and haven't been officially announced. We'll try to release them at the end of each week. All old updates will be hidden in the spoiler.


Update: 1/29/19
  • We have popovers! They're basically fancier tooltips.
  • Font awesome icons have been updated.
  • Multi-collapses have been whitelisted.
  • Special page classes have been added around sections of Toyhou.se profiles - like all of the user pages have page-container-user, and all character's profiles have page-container-character.
  • We can now choose where WYSIWYG shows up! It's in your settings here. No more broken notes, tysm admins!
  • We can now turn off profile warnings too! In the same settings as above at the very bottom of the page. Instead of the content warning showing up, there will be a button in the top bar that allows you to toggle the content warning.

Update: 12/14/18
  • CSS Sheets - Now we can link to CSS instead of handing out the raw deal.
  • Font Awesome Icons: Christmas Edition - - If you can't see these, clear your cache!
  • Split Tabs - They're the same as Full Tabs but appear as a separate character in your character gallery. These are for when you want to move a tab into a different folder. (Descrip straight from the admins.)

Update: ??/??/18
  • Avatars for characters have been seperated from edit profile. The link is somewhere in the manage character dropdown.
  • Sidebar in user settings got an update. Icons and some links were reordered.
  • Dropdowns added.
  • Ability to import google fonts added.

Update: 11/17/18
  • Now have carousel crossfade
  • Stacking CSS classes should be fixed - at least for box-shadow

Update: 11/16/18
  • Worlds have blurbs and a new option to edit the avatar, hooray!
  • Got the new flex grid from the new BS docs - yw
  • The editor was updated as previously mentioned and we can use hotkeys when working in it - here are the docs https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts
  • A very late update but yes, we can slap youtube vids on everything, and autoplay is turned off.

Update: 08/19/18
  • We now have the new font awesome icon packs.
  • Global character CSS should not affect literature layouts anymore! They'll probably be making a global literature CSS sometime soon.
HatsuneMiku
General FAQ

What's the difference before HTML and CSS?

HTML (Hypertext Markup Language) is a computer language that allows us to use CSS (Cascading Style Sheet) - HTML runs, or renders, CSS styles. Basically, think of HTML as the bones of a page and CSS as the muscles, skeleton, skin, etc.

You've probably already used something called inline CSS, it looks like this: style="color: #000;". Inline is used to directly style an HTML element. Free users can use this to style their pages!

External CSS use classes (words) to style elements (div, img, p, a, etc...), you've probably already used classes too, they look like this: class="card card-block". Basically, CSS styles certain keywords and you can use those words in html classes to change an element. Free users can use bootstrap classes to style their stuff but premium users can edit the site layout with their own CSS.

What's bootstrap?

Bootstrap is an HTML, CSS, and JS framework that is used to build responsive websites.

My code is breaking, I don't know what to do?

There are a myriad of reasons for this, these are the most common:

  • Pasting straight into WYSIWYG will cause a block of text instead of rendered code.
  • Pasting into the code portion of WYSIWYG will:
    • Remove backgrounds and possibly some other elements.
    • Auto add classes and other edits to images (this will cause them to shrink)
    • Make your code harder to edit in general - WYS was NOT made for advance editing.
  • A missing or stray </div> can break entire portions of code.
  • Sometimes when people get premium, their layout switches to 'Toyhouse Legacy' and bootstrap absolutely will not work with this layout! All you need to do is go to settings > profile css & blurbs > legacy dropdown and change that to 'regular layout' then save.

How do I change background, text, or border colors?

There are two ways to do this, with inline CSS OR using bootstrap classes. Bootstrap classes change with Toyhouse's themes while inline CSS stays the same color no matter what theme is being used. Snippets on how to use each are in the spoiler below.

Inline CSS & Example Snippet:
<!-- 

NOTE: you must use style="" NOT class=""

color is just text color - the other two should be self explanatory
use border: 1px solid #38af87 for an additive border

-->
<div class="card p-5" style="color: #38af87;background-color: #38af87;border-color: #38af87">
Bootstrap Classes & Example Snippet:
<!-- 

NOTE: you must use class="" NOT style="" 

CLASSES:
  border-outline-[BS-color] - changes border color - makes card bg transparent
  bg-[BS-color] - changes background color
  text-[BS-color] - changes text color
  card-[BS-color] - changes background & border color
  btn-[BS-color] - button colors
  btn-outline-[BS-color] - button's with just color outline and text
  
COLORS:
  default (solid btns ONLY)
  secondary
  primary
  info
  success
  warning
  danger
  faded (bg)
  dark (text & bg)
  light (bg)
  white (text & bg)

-->
<div class="card border-outline-primary bg-primary text-danger p-5">

What are Toyhouse themes?

Toyhouse has a whole lot of site themes you can change into in your display settings! Find 'em here.

Tabs, collapses, and carousels don't work in forums or comments.

If you're having trouble with them on your profile, check the bootstrap docs to make sure your code resembles their examples. (Also you can pull from their docs - that's literally what the codes under the examples are there for.)

I'v added some snippets for simple navs and collapses below, but you'll bave to go to bootstrap's site for carousels!

Nav Snippet:
<ul class="nav">

<li class="nav-item">
  <a class="nav-link" data-toggle="tab" href="#one">One
</li>

<li class="nav-item">
  <a class="nav-link" data-toggle="tab" href="#two">Two
</li>

</ul>
<div class="tab-content">

<div class="tab-pane fade active show" id="one">
  Tab One
</div>

<div class="tab-pane fade" id="two">
  Tab Two
</div>

</div>
Collapse Snippet:
<a data-toggle="collapse" href="#collapse">Collapse Link</a>

<div class="collapse" id="#collapse">

use 'show' after the class 'collapse' to keep the collapse open until the link is hit

</div>

How do I add images?

There are a handful of ways to add images - first is with the image tag. Simply use <img src="IMAGE URL"> to add in a normal image!

For backgrounds, you can use <div style="min-height:200px;background: url(IMG URL) center;background-size:cover;"></div>. I suggest going to W3Schools and looking up the background attribute for more options.

How do I insert images into paragraphs/blocks of text.

This can be done but using the class 'float-right' or 'float-left' in an img class like so: <img src="IMG URL" class="float-right"> Make sure to put the image before the paragraph that you want to push around.

How do I add embed YT videos?

Go to your fav YT video and press share (it should be next to the like/dislike buttons on desktop) then select 'embed' and copy the first line of code you see and paste it wherever you want. Wallah!

What are those icons people use on their profiles? Where can I find more? How do I use them?

These are called Font Awesome Icons.

To use normal icons, you can use <i class="fas fa-home"></i>. You can switch fas out with fal for a outlined icon and far for a mix of outline and solid. To use brand icons like tumblr, twitter, etc. use fab instead.

For more advance uses, check the font awesome docs.

Some of them aren't showing up...what do?

Fio and I tend to always update the admins when a new update comes out (literally hours after the site updates). If you can't see them, shift + click the refresh button on the page with the broken icon OR clear out the site cache. If it doesn't show up even then, then we either don't have the icon yet or you wrote the name out wrong.

How do I use tooltips?

Add the class 'tooltipster' and add title="Tooltip stuff here..." to whatever you want to have a tooltip. Snippet: <i class="fas fa-home tooltipster" title="Tooltip stuff..."></i>

How can I get the custom icon next to my username?

These icons are for betatesters only.

I want to order a custom, but I don't know how it works or what to tell the coder...

First, you'll need to remember that coding and designing are two seperate things, and that designing can take just as much, if not more, time, than actually coding. If you want them to design something for you ask first and don't be surprised if they charge more - since it'll be more work than just coding out an idea.

If you have your design together in your head - draw it out! Most people work best with a visual design of what you want, rather than a long description.

If you absolutely need to describe anything, do it in bullet points. Get what you want out quick and concise - this'll reduce mistakes on the coder's end and will quicken the process.

Never ask for rips or frankencoding (unless it's okay with both of the coders!) of existing codes. This also includes rips from other websites.

HatsuneMiku
Getting Started

Before Coding, turn WYSIWYG Off!

Go to Display Settings > Editor Settings, check "Enable Code Editor". On the same page, uncheck "Profile Text" under WYSIWYG Settings.

DO NOT use WYSIWYG's 'Code View'.

DO NOT use the 'Disable WYSIWYG' button.

ALWAYS use the code editor - because even the box without either of the editors will auto add paragraphs and that'll mess up ya codes.

Using the WYS code view or just disabling will still break your code. If you used either of these methods before switching to the code editor, you'll need to recopy the original code and paste it in.

Do not use the code you ran through WYS!

12141038_ISn4cmTM8L3qeeD.png?1550064015

Adding HTML

Copy the HTML you want (most coders have a link at the top of the code's character page or in the sidebar.)

For Users: Go to Settings > Profile Content > editor just under 'Edit Profile' and paste it there.

For Characters: Go to Edit Profile > the first editor you see and paste it there.

For Groups: Go to Manage World > box under 'Front Page Text'.

Hit save and you're done!

Adding CSS

Copy the CSS you want.

For Users: Go to Settings > Profile CSS & Blurbs > First Profile Editor

For Characters: Go to Edit Profile > Click dropdown that says CSS

For All Characters: Go to Settings > Profile CSS & Blurbs > Scroll down to Global CSS Editor (Will apply CSS to ALL characters, you can override this in individual character settings.)

For All Characters in a Folder: Go to Settings > Folders > Folder of your choice > CSS Dropdown > Folder Character CSS Box (This will change all the layouts for the characters in that folder to the layout you added.)

For Groups: Go to Manage World > Scroll down to CSS Styling

For Literatures: Go to Edit Literature > Click dropdown that says CSS

For Folders: Go to Settings > Folders > Folder of your choice > CSS Dropdown > Folder CSS Box

Paste & hit save and you're done!

HatsuneMiku
Where to Learn & Other Resources

Learning to Code

W3Schools | Is more of a dictionary of computer languages more than anything.

Codecademy | Has tons of free 'classes' on CSS, HTML, etc. I personally used this when I started and I continue to use it when I need a refresher!

Sololearn | Best to use AFTER you've finished your class in Codecademy bc it basically teaches with quizzes. Though, it also gives you your own little playground to mess around in.

Khan Academy | Honestly the go-to website for learning - I've never used it but I'm sure it's very good.

Gasara's Basic CSS Style Guide | Simple and straight to the point!

Google.com | No joke - if you're having a general problem - google it! You'll be suprised at all the CSS or HTML questions that have already been answered.

Softwares to Write Code In

Notepad++ | An extremely light program that's perfect for low-end computers. Jammy and LowkeyWicked use this!

Visual Studio Code | I (Vom) personally use this program - it's great for mid-grade computers and has a great UI.

Atom | Usually for heavy programming.

Brackets | Haven't used, but might in the future...

Places to Paste Code

Google Docs | Recommended for beginners.

Pastebin | Has gotten worse over the years - best for public codes.

Code Formatters

Bootstrap + Snippets

Bootstrap Docs | Note: Toyhouse was built with v4 Alpha 6 BUT we have a ton of the new docs in there as well.

Starlipop Basic Snippets | Is more of a dictionary of computer languages more than anything.

Starlipop Snippets + | Has tons of free 'classes' on CSS, HTML, etc. I personally used this when I started and I continue to use it when I need a refresher!

HatsuneMiku
Asking for Help

If you need help with another coder's work - make sure to read any rules or troubleshoot they have! Most are willing to answer your questions and can work out whatever problem you're having faster than anyone else (bc they built the code.)

Skip your long winded description of the problem, here's what'll get you the quickest help:

  • Specify the section you're having problems with and what exactly you want to do with it.
  • Link to the template you're using.
  • AND link to the profile, bulletin, etc. that you're having problems with.

If the template is P2U do NOT paste the raw code or share it with anyone who isn't authorized to view it. Most of the time we won't need it anyway.

HatsuneMiku
List of Active Coders

A list of currently active coders in alphabetical order - 'active' is defined as coders actively releasing code within the last 3 months and have over 4 codes.

PM me if anything needs updating or if you make the criteria mentioned and would like to be added to the list!

HatsuneMiku
On-site Resource Masterlink

Some handy guides for coding on TH and other resources kindly created by coders and other kind folk.

PM me if you have a resource you would like me to add to this list, and remember to show these hardworking folks some love!

HatsuneMiku

reserve

HatsuneMiku

reserve

HatsuneMiku

reserve