Banner
Views: 638,268,937
Time:
9 users online: AaronBam, danwaleby, GreenHammerBro, Meirdent, Mystery Cornucopia, TheStellarstrix, Thomas, o underway, Yoshi3000 - Guests: 52 - Bots: 303Users: 34,891 (1,401 active)
Latest: Kachopper9
Tip: Linear levels aren't necessarily a bad thing. After all, most official Mario levels are fairly linear.Not logged in.
Layout Maker XP - A tool for generating layouts
Forum Index - Donut Plains - Computers & Technology - Layout Maker XP - A tool for generating layouts
Pages: « 1 »


Layout Maker XP is a tool that generates layouts, you can customize them in many different ways and it also supports different themes. This tool was originally shown on the Winter 2017 C3 event, original thread here. After one year, I decided to remake it almost completely and call it Layout Maker XP 2. The new UI is much more user-friendly, any changes you make are reflected instantly on the layout preview.

Yes, it does support Internet Explorer 11 (for the most part). It's available on GitHub as well.

Feel free to report any bugs, suggestions or anything related in this thread.

Layout Maker XP 2
Layout Maker XP 1

Supported Features

  • You can change the background colors of the post background, post box, quote box, code box and spoiler box, as well as change the text and link colors.
  • You can change the style of the border of the post box, quote box, code box and spoiler box. You can also change their border color and border radius.
  • In case you don't know how to use HTML colors, you can use the built-in color picker tool.
  • You can save the layout in the browser's cookies or as a file if you want to customize it again later. (LMXP 2 only)
  • You can customize the font used, and you can also use custom Google Fonts as well.
  • It can put up to two background images in your post along with a side image.
  • There's multiple signature types, contrast ratio checker, etc.
  • I'm too lazy to write more things, besides the rest is minor anyway

LMXP 1 also supports previewing some of the SMWC themes, so you can see how your layout will look against each one. It also supports Editing Mode, as in, you put whatever HTML into the header and signature boxes and it'll instantly preview it, even layouts that weren't made with it.

Changelog (accuracy not guaranteed)

Layout Maker XP 1
Created: December 03, 2016.
v0.2 - First fully functional version, shown to #dev briefly (Dec. 03, 2016)
v0.F - Error Handler / Sanity Checker for the contrast ratio, margin/padding values, image width, etc. Also, merging all alternate themes into one CSS file. (Dec. 30-31, 2016)
PRE-C3 - CSS fixes, JS fixes, reset button from v0.F removed, private beta (tested by Erik557) (Jan. 02-06, 2017)
vC3-r1 - C3 Release (Jan. 06, 2017)
vC3-r2 - "use strict" fix, text-shadow on links fix (Jan. 06, 2017)
vC3-r3 - min-height fix, removing unecessary text (Jan. 06, 2017)
vC3-r4 - Editing Mode (Jan. 07, 2017)
vC3-r5 - Quotebox alpha fix, if (alpha) doesn't catch the number 0 as a valid value (Jan. 09, 2017)
vC3-r6 - Implementing min-height as an customizable option (Avatar Height) (Jan. 10, 2017)
v1.0 - Option to format CSS in multiple lines, option to generate external CSS (Jan. 12-15, 2017)
v1.1 - U.I. changes (Mar. 18, 2017)
v1.2 - And even more themes (Jun. 06, 2017)
v1.3 - Re-added v0.F reset button, error fixes (Oct. 04, 2017)
v1.4 - Added Spoiler Box and Post Box Shadow, Reset Button re-removed, Color Picker added, random fixes (Dec. 03, 2017)

Layout Maker XP 2
Created: November 13, 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. 02 2017 - Last-minute fixes and improvements (minor)
v1.0 - Dec. 03 2017 - Final release, minor color picker fixes
v1.0.1 - Dec. 05 2017 - Color Picker bug fixes

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 I'll call it too.

I'm getting warning/error messages. What do they mean?
These are only applicable for Layout Maker XP 1.

Depends. 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
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).
Pages: « 1 »
Forum Index - Donut Plains - Computers & Technology - Layout Maker XP - A tool for generating layouts

The purpose of this site is not to distribute copyrighted material, but to honor one of our favourite games.

Copyright © 2005 - 2018 - SMW Central
Legal Information - Privacy Policy - Link To Us


Total queries: 23

Menu

Follow Us On

  • Facebook
  • Twitter
  • YouTube

Affiliates

  • Talkhaus
  • SMBX Community
  • GTx0
  • Super Luigi Bros
  • ROMhacking.net
  • MFGG
  • Gaming Reinvented