Language…
5 users online: 1392year, Anas, Firstnamebutt, kirito86, Zavok - Guests: 181 - Bots: 332
Users: 64,795 (2,380 active)
Latest user: mathew

Layout Maker XP

  • Pages:
  • 1
  • 2



Layout Maker XP


It is a tool made by me to (possibly) replace the outdated layout generator SMWC has. You can use it to generate layouts and see how it looks against various SMWC themes. You can also customize layouts afterwards in any way you like, so if there's any specific thing you wanted you can also adjust it manually as well.

It supports a lot of features, but if there's anything else you'd like to see there, any suggestions, questions, discussion, etc., just ask. Know that automated generators can't do everything, so things that are too fancy probably won't be implemented. That's what layout request threads are for! #ab{:P}

CURRENT VERSION NUMBER: 6

Features


Layout Generation Features:
  • Have up to two background images and style each's position and looping properties. You can also specify a fallback background color in case the image doesn't load (or if your post has no images).
  • Have side-images to the right of the post and align it to the top/center/bottom of the post.
  • Style the background colors of the post, quote and code boxes (with opacity/alpha values too!).
  • Style the border types, widths and colors of the post, quote and code boxes, plus you can also specify the border radius if you want round borders.
  • Multiple signature types (well, 3, but more can be added later on if needed).
  • Custom web-safe fonts, selectable from a pre-defined list. Alternatively, custom Google Fonts. Just put the name of the font in Google Fonts and it'll implement it for you!
  • Text shadowing options, for better contrast with the background.
  • Custom text and link colors!
  • Custom margin and padding values for the post box (and only padding values for the quote/code boxes currently).
  • Name your post layout too with any name you'd like. Only valid CSS names are allowed. If no name is specified, a random one will be generated.

Other Features:
  • Supports various SMWC themes! And also a few other ones.
  • An error system that will complain if you enter dumb values (can be disabled).
  • A color contrast checker between the post text and the post background color. It won't work well if you enter low opacity values, or if you don't use a post box background.
  • Preview your layout on-the-fly! Also see how the code itself looks and easily select all text for copying it to the header/footer fields.
  • Supports layout editing with Editing Mode. It will grab whatever is inserted into the header/footer areas and put it into the page.
  • Supports HEX colors, RGB colors and HSL colors (and it also has a HSL-to-RGB converter).
  • Don't know HTML colors? Don't worry, you can use the color picker to select colors. If no valid color is entered, it'll default back to the value in the color picker.


Reference/F.A.Q.


I don't really consider this an F.A.Q. because no one could ask any questions about Layout Maker XP before I made it 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?
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'll talk about the normal color picker in Windows too just 'cause.

First, take a look at the image to the right. I want you to note a few things from there: the pre-defined colors on the left are mostly terrible so don't use them unless you just need to quickly go to x color and adjust it later. The panel on the right is the real deal, as you go right, the color hue changes just like a rainbow, when selecting colors try using ones in a similar color hue or ones that complement themselves. Other combinations can work well too but generally these work best.

Second, the saturation or contrast values, it explains how strong your color is, think of it on how colors look on a rainy yet not too dark day or how water affects colors on some surfaces. It makes the color more vivid. Too high saturation values can make the post eye-searing, but too low values makes the post have very washed-out grey-like colors. You generally want to stick near halfway here but it doesn't have to be the exact same value for the entire post.

Lastly, there's the brightness, somewhat self-explanatory, 0% brightness is black, 100% brightness is white, colors near each look close to those colors as well.

There are different ways to combine them. One way is to use the darkest less noticeable color for your BG (or a very dark BG), then work your way up from there, making it slightly more bright with the post box background, then make it slightly more bright with the quote/code boxes (or change the hue of each to a nearby color in the color hue too!) and finally make it quite a bit more bright for the post box borders.

Another way is to work in reverse, if you have a bright BG, make the post background a bit darker, the post/quote boxes even darker, etc. There's many more way to do this too. Link colors have to be bright but with a similar color hue and saturation as to fit in with both the text and the post's colors. You generally don't want to change the text color from white, similarly, you generally don't want to change the text shadow from black.

In the end, you'll have a color close to what you like...hopefully, it might take a few tries. You might have noticed that the hue, saturation and luminosity/brightness each are part of the HSL standard. If you want to change each value just a bit to either direction, you can actually just add 5/10 or so to a value in those boxes and it'll affect only the value that you want in the exact quantity you want.

Unfortunately, you can't put those values into the HTML hsl(200, 50%, 50%) because they go from 0 to 240 (or 200 in the case of hue) and the HTML ones go from 0% to 100% (or 360 in the case of hue), so there will be some conflict going on. Instead, you can use the RGB values instead and put them into the HTML rgb([red], [green], [blue]) ex. rgb(255, 0, 0) with no need for adjustments at all. You can also use personalized colors for saving colors you really liked for later use if you want.

And that was a lot of words. Wow.

...so are you going to check the layout maker? Maybe you need another link? Well, here it is!

You can also help me choose what would be a good logo for Layout Maker XP. There's 4, but I don't feel like any is particularly good so...
the first one is best logo, just change hacking to... layouting? idk
where's my special thanks for testing it befor release :( Good to see this released. Hopefully it replaces the old ugly generator... but not my thread #wario{>:|}
>custom link colors
>custom fonts
>quote/code boxes
>opacity
>still somehow very user friendly

Holy shit, this is incredible! The old bg generator was already obsolete, and this is dancing on its grave! Should probably even remove Megafonzie's stickied thread and replace it with a link to this instead. Incredible job!!!

one suggestion I might have is hiding the explanations in certain categories by default, with a mouseover question mark or something. As it is it looks like a lot of text and can make the whole process seem a lot more complicated then it actually is, you know? Also a bried explination of what margins, padding and border radius probably wouldn't hurt.
Still very impressed over here
ask me if i give a f*ck...

This is pretty awesome. Sadly it does not work for me; Currently on an Ipad (Safari). Fix that and you have a winning vote from me ;)
Layout by LDA during C3.
Holy shit this is amazing. Great job dude,
Originally posted by Lightvayne
This is pretty awesome. Sadly it does not work for me; Currently on an Ipad (Safari). Fix that and you have a winning vote from me ;)

Oh dear, this will probably not be easy. #ab{:S}

Actually, maybe it will. IE11 yells at you if you use JS strict mode and try to change the style of an element (when it shouldn't) so I just removed strict mode in hopes it would stop and it did. Try again and see if it works. If it doesn't, it's probably some other JS incompatibility I'll need to look up.

Originally posted by Hobz
one suggestion I might have is hiding the explanations in certain categories by default, with a mouseover question mark or something.

You mean the explanations at the top? The only explanations through the page itself are "Choose a color to display on [THING]. You can also type the value directly on the input field below it." just because it looks awkward without any text on there and two inputs on the right side.

Originally posted by Hobz
Also a bried explination of what margins, padding and border radius probably wouldn't hurt.

Can do. I put one on the thread itself but I forgot it would be more important to put one on the page.

Also something I did not expect: the links having text-shadow properties on the new C3 theme. Fixed it now.
This will definitely be a very useful tool for people that want to make layouts fast or don't have the proper HTML/CSS knowledge. Great non-SMW tool, RanAS ! #w{=D}
Wow dude really useful tool, i'm going to try it right now :)
Its jowke
Layout by LDA during C3.

That Fix seems to have work. Excellent job man. ^_^
Layout by LDA during C3.
a good tool but is posible meke a short modifications but only in the astetic aspect (but is purely optional)
ESPACIO EN RENTA
Wow, this is really amazing! I honestly thought I would never see a layout generator to be this user friendly. Not only that, but the results actually look quite pleasing (maybe not anything too fancy, but much better than the layouts made from those crappy layout generators from the past, at least that's what it was like for me.) I even made my own already (as you can see in this very post), and it only took about 15 minutes to make. This is totally getting a vote!

Edit 2: I'm having one issue, there's this dead space right below my layout in my posts and I can't seem to find a solution for this. Does the size of my profile card (Your avatar, join date etc.) have to do with it?
Formerly known as nick 139
My YouTube channel
Originally posted by Pseudogon
Edit 2: I'm having one issue, there's this dead space right below my layout in my posts and I can't seem to find a solution for this. Does the size of my profile card (Your avatar, join date etc.) have to do with it?

More or less, you generally want to add a min-height:; property on your posts to counteract that (and make it occupy at least a certain height so no dead space appears). I can't really do it automatically because not only it depends on the user's avatar but also the rankset and title.

I should add min-height: 200px; at least though just for general purposes, even if it won't work 100% for some people.

Quote
a good tool but is posible meke a short modifications but only in the astetic aspect (but is purely optional)

Umm...do you mean you want the ability to change the code after it's generated so you can make small changes to it or to insert other layouts there and allow to change a few properties in it? The former could actually be an interesting option and not too complicated to implement, really, but I think a lot of problems would arise trying to implement the latter.
Originally posted by RanAS
You mean the explanations at the top?
I meant the ones in the actual layout coder. I dont think all of the colors need the box explaining how to input the colour beneath it. It clutters it up having all those stretched boxes for a sentence that really only needs to be in there once at the top, you know?
ask me if i give a f*ck...
It works. Thanks, RanAS! (I'm actually using 235px btw)
Formerly known as nick 139
My YouTube channel
Originally posted by Hobz
Originally posted by RanAS
You mean the explanations at the top?
I meant the ones in the actual layout coder. I dont think all of the colors need the box explaining how to input the colour beneath it. It clutters it up having all those stretched boxes for a sentence that really only needs to be in there once at the top, you know?

Well, if that's what you think then you'd be right actually.

Updated it, there already was one explanation at the top so I just removed the one next to the inputs themselves. I personally feel like it looks a bit too empty without the text but I can see why it would be unecessary to read the same thing over and over again.

EDIT: New feature, Editing Mode, for editing and previewing post layouts. Just change the code directly on the text area and hit preview and you're done. Switching back to Generating Mode will warn you not to hit the Preview/Generate button as that will overwrite the text in those fields. It will also check to see if each openeed style/div tag is closed.
Hi there, RanAS.

i really needed something DECENT to make layouts... and now i HAVE!
thx a bunch, bro! i'll definitely use this!!
Oh my god, the font in your layout is REALLY hard to read Tsutarja.
Could you maybe change that? It's alright to be fancy, but not THAT fancy.
Your layout has been removed.
Originally posted by leod
Oh my god, the font in your layout is REALLY hard to Tsutarja.
Could you maybe change that? It's alright to be fancy, but not THAT fancy.


oh god i knew that lol

i'm sorry leod, i'm changing it right now >.<

EDIT: back to the old default font...
That's awesome! Nice work man

I would use it but my inbox is full of messages entitled "regarding your layout..." So I gave up
new.sfc
P.A.U.L.
Paul '96
I toyed around with this for a bit. This is pretty impressive! I'm definitely bookmarking the page for eventual future layouts!
Thanks a lot for this!

Edit: also if I can suggest something. I went minimalist with my case here (in particular, as short as possible in height), but my output was so short that it cutted off on bottom (similarly to this post). I had to add a style=min-height:250px next to the div class in order to fix it.
You may want to add that.
  • Pages:
  • 1
  • 2