Layout Maker XP is a tool that generates layouts that can be used in SMWCentral, with no knowledge of CSS or HTML required to use it. It provides a generic template which you can easily edit any way you want. You can customize almost all parts of the layout (quotes, code boxes, spoilers, signatures, etc.), add a custom font, custom colors and borders, some backgrounds and even a side image.
Internet Explorer 11 is almost fully supported. Feel free to report any bugs, questions, suggestions or anything related in this thread.
Layout Maker XP 2
Layout Maker XP 1 (classic/old-style)
Differences:
Layout Maker XP 1 lets you see how your layout will look against many of SMWCentral's themes. You can also use Editing Mode, which lets you put your own custom layout (even ones that weren't made with this tool) into the header and signature boxes in order to preview what it'll look like. Layouts are previewed every time you hit the Preview button.
Layout Maker XP 2 doesn't have any of the above, but has a much easier to navigate interface, it lets you save your layout so you can edit it later if you wish and it also has a contrast ratio checker that tells you if your layout is too hard to read. Layouts are generated instantaneously.
Layout Maker XP 1 was originally shown on the Winter 2017 C3 event. You can see the original thread here.
Changelog: (accuracy not guaranteed)
Layout Maker XP 1 - Created on December 3rd, 2016
v0.2 - Dec 3, 2016 - First fully functional version, shown to CaffieNET's #dev channel (defunct)
v0.F - Dec 30-31, 2016 - Error Handler / Sanity Checker for the contrast ratio, margin/padding values, image width, etc. Also, merging all alternate themes into one CSS file.
PRE-C3 - Jan 2-6, 2017 - CSS fixes, JS fixes, reset button from v0.F removed, private beta (tested by Erik)
vC3-r1 - Jan 6, 2017 - C3 Release
vC3-r2 - Jan 6, 2017 - "use strict" fix, text-shadow on links fix
vC3-r3 - Jan 6, 2017 - min-height fix, removing unecessary text
vC3-r4 - Jan 7, 2017 - Editing Mode
vC3-r5 - Jan 9, 2017 - Quotebox alpha fix, if (alpha) doesn't catch the number 0 as a valid value
vC3-r6 - Jan. 10, 2017 - Implementing min-height as an customizable option (Avatar Height)
v1.0 - Jan 12-15, 2017 - Option to format CSS in multiple lines, option to generate external CSS
v1.1 - Mar 18, 2017 - U.I. changes
v1.2 - Jun 6, 2017 - And even more themes
v1.3 - Oct 4, 2017 - Re-added v0.F reset button, error fixes
v1.4 - Dec 3, 2017 - Added Spoiler Box and Post Box Shadow, Reset Button re-removed, Color Picker added, random fixes
v1.5 - Jan 3, 2018 - Color Picker update
v1.6 - Dec 2, 2018 - Fixing the layout preview bugs, the page layout and image URLs. Added three more themes
Layout Maker XP 2 - Created on November 13th, 2017
v0.4 - Nov 21, 2017 - First (almost) fully functional version (save for the Background Tool)
v0.A - Nov 28, 2017 - Minor fixes, first public release
v0.B - Dec 2, 2017 - Last-minute fixes and improvements (minor)
v1.0 - Dec 3, 2017 - Final release, minor color picker fixes
v1.0.1 - Dec 5, 2017 - Color Picker bug fixes
v1.1 - Jan 13, 2018 - Color Picker update, more customization options
v1.1.1 - Jan 21, 2018 - Minor layout color fixes
v1.2 - Dec 2, 2018 - Fixing: layout preview bugs, contrast ratio checker, IE11 bug while clicking on an element, other misc URL things
v1.3 - Jun 8, 2019 - Fixing broken JSON file output
Reference/F.A.Q.:
I don't really consider this an F.A.Q. but it's in a similar format so I guess that's what we'll do.
I'm getting warning/error messages. What do they mean?
These are only applicable for Layout Maker XP 1.
There are five potential types of error messages, the ones in red are fatal and will not generate the layout:
- Warnings: You entered a value that isn't recommended, the warning itself should explain the issue.
- Tag Warnings: When the number of opening tags (ex. <div>) is not the same as the closing tags (ex. </div>).
- Color Contrast Warnings: It's when your post text has a bad contrast with the post box background, which most likely means people won't be able to read your post properly.
- Color Validator Errors: These will only appear if your browser doesn't implement the color picker correctly and you enter an invalid value there and no value in the other field.
- Input Errors: It's when your enter values that are very bad for post layouts (read: very bad).
- JavaScript Errors: This is when I screw up somewhere in the code and you should contact me about it. Hopefully you never run into these. If you see any error that doesn't seem to fit in the above categories, it's probably this.
Should I disable the "footer separator" option in Edit Profile?
Yes.
What's the order of visibility for the backgrounds?
First, elements that are "closer" will display over elements that are "further", that said, the order from furthest to closest is: Background, 2nd Background, Side Image, Post Box's Background and finally the Quote/Code Boxes' Background.
Some properties are there on the final post layout but I can't change them?
Yes, that happens with a few properties, specifically, currently the opacity values for the quote/code boxes is the same one, the color for the horizontal line break is the same as the one for the post box's border color (even if there's no border, it'll still use the color defined in that field), the color for the code box is always the same as the normal text color, the links will always have "font-weight: normal;" (so they aren't bold in the dated themes), and finally there's ".code br {display: none;}" which is the code to prevent extra line breaks from appearing in code boxes.
What is padding/margin/borders?
An image's worth a thousand words. As you can see, padding is the area between the border and the content, margin is the area between the border and the frame itself, and the border is self-explanatory.
how do colors
It's recommended you use this color picker instead, but I talk quite a bit about how you can do colors using the built-in color picker in the older thread. Since then, I have actually implemented a color picker into the page itself, but the advice still works because the new color picker also uses HSL.