There is a minor caveat: Some of the styles you modify will show up correctly in the inspector and your browser, but Toyhou.se will still blacklist some of your styles. But because it works exactly like a browser, you can use the names of the built in Bootstrap and Toyhou.se specific rules loaded in their stylesheets, and they'll work just fine.
I have not seen this mentioned here, so hope I'm not making a duplicate on accident!
Anyway, I discovered this by accident when being lazy from frustration at the code editor.
Hope you find this just as time saving and useful! <3
My Layouts
Inspect Element in the Profile Editor Tutorial
NOTE: There are code elements that work in preview editor, but not in the profile. Be sure to check known bugs as well as your saved profile to be sure it transfers over correctly! Some simply just do not work in profiles for now.
So you just added a code to your character's profile. Awesome. But wait, the code editor is difficult to read and on top of that, if you are not in full screen view, the scroll bar jumps to the top when you edit anything vs stay where your cursor is. What a pain.
Thankfully here is a solution! Not only is it easier on the eyes, but it is also much easier to edit!
What's even better? The changes you make to the profile content here SAVES! Usually this is just for viewing and temporarily fiddling with the code, but here it saves what you did!
Say hello to Inspect Element! That is what it is called in Firefox, Chrome as the same thing just under a different name.
When you right-click on any part of a page, you will see an option towards the bottom called "Inspect Element" This will bring up a window at the bottom of the page showing you the source code of the page, specifically jumping to the part of the code containing the area you right-clicked.
See how much nicer that looks! That is from the Profile Editor with one of the free layout codes I made
I will be going over each part of this feature here. Sorry if you already know most of this stuff.
Here is what a blank profile editor looks like in Inspect Element. Changes you make outside of the highlighted div do not save. Only edits that are made inside the div save. NOTE that ctrl-z or command-z will not do as you want here! If you make an edit you do not like, undo the change by getting rid of it or editing to what it once was. If you use undo in Inspect Element there is no telling what will be undone, It could be everything you just did except just that one thing. Strangely undo does not undo what you last edited but rather everything or somethings before it. Please keep this in mind. What is undone cannot be redone!!!
Save your work in the editor via "Update Character" frequently to avoid mass undos that cannot be undone.
The part in dark blue is what I have selected. The light blue shows when my mouse is hovering over the div to show where it ends. Also, when your cursor is hovering over a node (element), you will get a nice highlight on the page showing you were it is.
This is what my screen shows when I hover over the div I have selected above. There are a few key things about this highlight worth noting.
The text that pops up on it reveals basic information about the node selected. Including it's current dimensions.
The blue area is the active area, this is where you input will appear and the space it takes up.
The purple area shows the padding of the element. Padding goes into the dimensions of the element.
The yellow area shows the margin of the element. Margins go in the area outside of the element.
Without the highlights, you will see that the blue and purple filled the text edit area, while the yellow was outside of it.
To put it simply, paddings push internal elements in while margins push external element away.
You can see a clearer picture of the layers of this with border included on the right of the source code under the Computed tab.
Now lets go over code editing functions! I am going to assume you are starting with a blank profile for this.
This is what you will see when you right-click on a node, or on a part of source code, in Inspect Element.
 |   |  |
Wow so many things, lets go over the main ones we will be using one by one.
Lets start with pasting in a code, can't do much without a code to edit.
Paste has a few options, but how do we know which is the one we want?
First things first. Make sure you are right-clicking to correct element node!
This is very important to be sure the code will be where you want it!
Blue pastes INSIDE the element node, Pink pastes OUTSIDE the element node, Green pastes as the element node.
Inner HTML- Replaces ALL elements within the selected with what is being pasted. You can easily paste the raw code text into the editor this way. Make sure you are right-clicking the text area editor node, as seen above.
Outer HTML- Replaces selected node with what you have copied. Good for if you edited a node that has duplicates and you wish to replace all the others.
Before- Pastes the copied directly above the selected element node. If it is inside another node, so will be what was pasted.
After- Pastes the copied directly under the selected element node. It will not go inside of it, just be placed under it.
As First Child- Pastes the copied on top of whatever else is inside the element node.
As Last Child- Pastes the copied under everything that is already inside the element node.
The Copy options work similarly. However, you can always just select the element node and use cmd-c or ctrl-c
Attributes
Attributes are things like class="" or style="". They are located next to the node of an element. Here <node attribute=""></node>
These can be selected or right-clicked for the attribute options.
The black dots are around the attribute that I selected. From here I can right-click for the options, or I can just use keyboard functions while it's selected. ctrl-c or cmd-c to copy it, double click to edit it, delete to delete it, and to add a new one double click the space behind the last > liked so:
Moving Nodes
Lets say things aren't exactly in the order you would like. Or you want to move an element into another node or just out of it's current one.
This is a very easy process. I could not get a screenshot of it, but it can be explained.
Simply select the node you wish to move, and drag it.
This can get a bit disorienting since the code will collapse as if the node is no longer there while your holding it.
The original position will be marked with a grey line and the new with a golden line as you drag it around.
It is advised that you have the node you are dragging be collapsed to avoid confusion.
If you wish to put it into another node, be sure that node is expanded.
If the node you want it in cannot be expanded you have to copy the node you want to move then past it into the node you want it in. You have to delete the original node you copied if you do not want it there.
Adding Nodes
This can be done in three ways.
Create New Node, this will always be <div></div> and be added to the bottom of the internal html of the node you selected.
Duplicate Node, this will make a copy of the selected node right under it.
Edit as HTML, this can be used for more things, but I prefer this if I want to add surrounding node.
For example, I want to add hover text to this text
All I have to do is right-click it, select Edit As HTML and add the surrounding node I want.
You do not need to put enters, I just find them easier on the eyes. When you click out of the edit box, it adds the code to the source code.
If you see mistakes or feel something should be added feel free to let me know!