Language…
19 users online:  AmperSam,  Anorakun, Beed28, DanMario24YT, gizmo_321, Golden Yoshi, Green, h.carrell, Hammerer, JezJitzu, Mohamad20ZX, OrangeBronzeDaisy, Papangu, recam, Serge, signature_steve, SMW Magic, Spedinja, TrashCity - Guests: 283 - Bots: 411
Users: 64,795 (2,370 active)
Latest user: mathew

Layout Maker XP - A tool for generating layouts



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.
Stickied this thread as we talked about during C3. Took a while cause I wanted to clean up the stickies in general at the same time.
Let's consider this the official layout generator for now. As far as I can see it isn't missing any vital functionality the old one had and only adds to it.


One piece of feedback I have is that the UI is really cramped and horrendous though, maybe don't put everything into such a narrow table and properly space sub-sections (Post Box, Signature Box, etc.) vertically so you don't lose focus of where you were all the time?


edit: I edited the thread's title to be a little more descriptive of what this is about so people can see in one look, but feel free to change it to something you like more. Current one's a bit on the nose but I can't think of anything better lol
Your layout has been removed.
Originally posted by leod
One piece of feedback I have is that the UI is really cramped and horrendous though, maybe don't put everything into such a narrow table and properly space sub-sections (Post Box, Signature Box, etc.) vertically so you don't lose focus of where you were all the time?

The UI was made on-the-fly just to have something acceptable so yeah I see. I'm still debating exactly how to organize it though. Spacing each section is a good idea but the UI will still look the same, just putting more space inside the table cells won't work too. I was thinking about redoing it to something different but I'm not sure exactly what yet.
VERSION 1.1 WAS JUST UPLOADED OMGWTFGJBBQETC

Changes to the UI were made to make it less terrible. This is now available on GitHub, by the way! It's been available there since January 19 but I didn't bother to say anything about it, oops. Suggestions/bug reports/forks made there as well are welcome.

I'll continue updating this with new features as suggested here as well. Currently I plan on implementing a few more themes for the next version:
- C3 Modern Mario
- C3 8-bit
- Social (Blue, Red, Green)
Can you add the option to have 2 side images? Better yet, mini images around the quote boxes?
Your layout has been removed.
Originally posted by ThatGamerGuy2234
Can you add the option to have 2 side images?

Well, chances are it'll look awkward without some very specific position arrangements that would probably require a lot more messing around with the CSS, more than I think it's worth adding to the generator.

If you want to, you can use the 2nd Background as a second side-image (make sure it is set to no-repeat), but chances are it'll end up looking very odd.

Originally posted by ThatGamerGuy2234
Better yet, mini images around the quote boxes?

Uh...what do you mean by that exactly?
Originally posted by RanAS

Originally posted by ThatGamerGuy2234
Better yet, mini images around the quote boxes?

Uh...what do you mean by that exactly?

I think he means the images that appear next to quotes in layouts like the one that Qwoll has.
*everything stops*
Yeah, that's me. You're probably wondering how I got into this situation...
*cut to next post*
Originally posted by The Koopa Resistance
Originally posted by RanAS

Originally posted by ThatGamerGuy2234
Better yet, mini images around the quote boxes?

Uh...what do you mean by that exactly?

I think he means the images that appear next to quotes in layouts like the one that Qwoll has.

Oh, well, I don't think I would implement that feature. Too much trouble for something that's likely not to work well in most layouts I feel like, since an side image for a quote/code box would probably need a lot of manual adjustments to look right with a layout's style.

UPDATE: Layout Maker XP v1.2. Loads of new themes, an option to not have a signature box (if you don't want one) and other minor fixes. That's really it.
Changes in v1.3:
- The reset button from v0.F was re-added, now it works properly (HOWEVER, IE11 will reset all fields even if you say "cancel")
- The Pokey theme was removed after I decided it looked terrible and made a lot of things unreadable
- Errors and warnings are now more efficient
- You can now press Enter in one of the input fields and it'll generate the layout
- Fixed an error in Editing Mode where it would not generate a layout if there was no <div> or <style> tags
- HSL to RGB converter now works with non-alpha colors
- Other minor fixes and additions

If you ever have trouble with Layout Maker XP right after an update, just refresh the page to see if it updated the files.

Still open to suggestions, criticism and bug reports, like always.

Celebrating one year of Layout Maker XP, I decided to make another one!

Layout Maker XP 2 is available right now! It completely changes the U.I. and renders the layout's preview instantaneously. It still works in Internet Explorer 11 as well!

Oh, and also, v1.4 was released. The new color picker tool was added to it, along with options for styling the box shadow and spoiler boxes (which are new features in LMXP2). The color picker doesn't seem to work on IE11 for some reason...

Currently the two co-exist, so that if you don't like one then you can use the other.

Originally posted by RanAS
Still open to suggestions, criticism and bug reports, like always.
quadruple-post hype

updated both LMXP1 and LMXP2:

Layout Maker 2: now with more customization options (quote/code box's shadow, more customization to links), some fixes and improvements to the color picker tool.
Layout Maker XP: it only got the color picker fixes, no new customization options here, sorry. #tb{:(}

NOTE: If you previously saved a layout (as a file or in the browser's cookies) and try to load it on Layout Maker 2 v1.1, it won't work. This is because of me messing a bit with the JSON object. If you need to access any saved layouts again, please message me (I can manually fix the JSON file).
hey it's me RanAS and I'm going for the quintuple post world record

The "Save JSON File" feature in Layout Maker XP 2 has been broken for an unknown amount of time. Apperently, since last year, some browsers stopped accepting the hashtag character (#) as valid and gave up downloading the file after any of those showed up. If you have a faulty JSON file, the data is permanently lost and cannot be recovered. A fix has just been made that converts # to %23 in order for it to work properly again.

Considering not too many people use that feature I don't think it's that big of an issue but I apologize if this issue screwed up anyone's files.

Layout Maker XP 1 is not affected (because it doesn't have that feature).

Originally posted by RanAS
Originally posted by RanAS
Still open to suggestions, criticism and bug reports, like always.