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!
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!
Sorry, here's the real link.
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...