Language…
14 users online: caioskii, Cristian Cardoso, fanfan21, Golden Yoshi, Green Jerry, Hayashi Neru, JezJitzu, Josuke Yoshikage, KoJi, Maw,  Nanako, Shomi, tOaO, yoshi9429 - Guests: 249 - Bots: 283
Users: 64,795 (2,377 active)
Latest user: mathew

Layout Request/Help/Base Code thread [read the request rules @people]

Welcome!
This thread is here for you to request a post layout or to get help with making your own one from scratch.
"Layouts" are what we call the decoration around people's posts, the ones that place their posts into pretty frames with nice backgrounds and what have you.

Please keep in mind the following rules when requesting a new layout in this thread:


Rules

  1. Base Codes
  2. Requester
  3. Coder
  4. Asking for Help
  1. Base Codes

    1. Repeating background
    2. Coloured background with post box
    3. Repeating background with post box
    4. Side image with post box and signature box
    5. Repeating background with post box and side box
    6. Repeating background with post box, signature box and side box
  2. Requester

    1. No simple requests.

      Anything that can be done via the layout generator or with a base code should not be requested here.

    2. Be patient when requesting.

      Everyone on the site has lives outside of SMW Central. If you have posted your request and more than a week has past, as well as no-one claiming it: go ahead and post it again. If not, just wait.

    3. Please provide all resources - ready to be used - that you require for your layout in your request post.

      The coder of your layout is not an image editor, nor are they willing to search for your images Please provide everything you want in your layout ready to be used.
      If you want your layout to have colors, include in your request the hex or rgb values of said colors.
      For backgrounds, use images that can be looped properly or have no cutoff on the borders, so that the remains can be filled up with a colol. Don't just ask for any huge panorama images.
      If you have trouble finding transparent or looping images, add "render" or "pattern" to your search tages

    4. Do not be too vague with your request.

      While you are free to give your layout coder some leeway with your request, do not make it too vague, because they might end up coding something that you do not like at all.
      Don't just make a request with one image as background and telling the coder "make good layout please". Requests like that are likly to end up covered in dust.

    5. Ensure that your request complies with the Content Rules of SMW Central.

      The rules can be found here.
      Provide resized side images instead of huge ones. A smaller images takes up less space and reduced the total amount of kbytes needed. Same goes for the background images.
      If you're wondering what a good size for the side image may be: A width of about 300px is common whereas the height can be left to adjust itself to the width.

  3. Coder

    1. The layout you make must conform to SMW Central's layout rules.

      The rules can be found here.

    2. Please make sure the post content does not have a fixed width.

      The post content box width should/can be determined by a "margin" or a "padding" property in the parent, but cannot be of a percentage or a fixed width. This is so the layout's post box doesn't look small on larger resolutions. You are allowed to do what you want width-wise with the signature box.

    3. Disable your layout when you post a layout code.

      It will then make it clearer as to what the layout actually looks like.

    4. Make sure you post the header and footer of the layout.

      While yes, you can quote the post. However it is easier for the user (especially if they are unexperienced with HTML) for you to post it. You can post it directly in the post, or stick it in something such as PasteBay.com.

    5. Putting a layout up for grabs.

      Do not complain if you put a layout up for grabs, and the claiming user goes and modifies it to their liking. Once you have posted it, it's ultimately their layout.

    6. Use unique class names.

      The class names "ex1", "ex2", "mypost", "text", and so on are not acceptable; you must use class names which don't risk being reused. For example, you can prepend the requester's name. If the same class name is reused by two layouts, they transform into each other if they show up on the same page.

  4. Asking for Help

    1. Be specific.

      It's hard to tell what exactly your problem is if you don't tell us exactly what is going on.

    2. Please post code.

      Then we are able to get an even better overview of what your exact problem is. Please do not post extremely long codes in the post, though. Use PasteBay.com for that.


It's vital that you follow these rules of the thread to make it easier for everyone. Regardless of that: happy requesting!




Rules changelog:
2014-04-03: Added rule 3.6. ~Alcaro
2014-07-06: Replaced the layout generator link. ~Alcaro
2014-07-13: Replaced the layout generator link (from Alcaro), added further info to request rules ~Jack
2017-01-20: Replaced the layout generator with RanAS' Layout Maker XP. Also changed the intro.
2019-10-03: I removed the well old reference to IRC #dev because someone mentioned it ~Tahixham
2021-09-12: Fixed the layout rules link. ~Tahixham
EDIT: Because Alcaro and any other staff member can quote things in closed threads and was kind enough to PM me what I had so I could copy literally all of the post...
Hey hey! Here we go again! Going to lay it out like I did last time, giving literally every image to be used, no matter how small, if only to hopefully make it easier.

For the post/signature box...
Both the top and bottom edges

Ugly flame for the bottom corners

Both of the side edges

The top right corner

The top left corner


For the background, a measly two images
The background itself (make it repeat)

AAAAAND TABLE STRETCH SO LINK TO IMAGE IN FRONT OF BACKGROUND (to the right side, only appear once in the left edge middle)
EDIT: Nope, bottom left corner of the background. Just noticed how the picture is.

For the words, the normal text should be a light red (not a sore to the eye light, but still light), links should be a more darker red (but not dark enough to blend with the background) and the code should be grey. I don't mind what shade of grey, but grey.
Code
THIS CODE BOX


Thank you to anyone who takes this up~
EDIT 2: Please remove the white areas of an image~
From : Forest of Illusion 3I want a layout with this back:
http://i72.servimg.com/u/f72/18/10/47/36/backgr10.gif

and this:

http://i72.servimg.com/u/f72/18/10/47/36/a10.gif

#smw{;)}
Forest of Illusion 3
Just posting to confirm I'm working on FlamingRok's request and have started modifying images for transparency. I will update this post later when I finish.

e: It's not quite as you requested it, as I found it really cluttered with everything in the corners, so I hope you don't mind if I included them in the code/quote boxes instead. I could only test it in Firefox as it's all I have available right now; if someone could let me know what goes wrong in other browsers then thank you very much in advance.
test test 2
Code
lda #$02 : sta $19 : rts ;test test 2

Quote
Quote - test test 2
Quote
nest
Header:
<style type="text/css">@import url('http://counterfeitgtx460.webs.com/layout/flamingrok/flamingrok.css');</style><div class="flamrok0"><div class="flamrok1"></div><div class="flamrok2 flamrokl"><div class="flamrok2 flamrokr"><div class="flamrok3 flamrok3p">

Footer:
</div></div></div><div class="flamrok3 flamrok3h"></div><div class="flamrok2 flamrokl flamrok4"><div class="flamrok2 flamrokr"><div class="flamrok3 flamrok3p">Signature</div></div></div><div class="flamrok3 flamrok3h flamrok5"></div></div>
Other: Choose none for header and footer separators.
i'm working on the images for a request i'm going to make, but i need to know some things before i finish all the images (it's a bit complex)

for the borders of the main box, sig box etc, the image for each border is better to have it just one pixel wide (or high on the side borders), or is better to have it bigger? and the same thing for the filling of the boxes, better big or 1x1 pixels?

i don't know if i explained it enough, so here are two images so you cn understand it better:

which one is better , or ??

Thanks Ladida for this EPIC and Awesome layout!

smaller is always better; there's less to download (assuming smaller filesize as well). the repeat is done by software and is not resource-intensive, i assume.
Thank you Counterfeit, and yeah, that'll be fine. I actually think now that this looks better than what I had in my head, so good job!

Hooray murder~
Thanks Ladida, now that i've finished the images, i'm going to make the request:

i want a layout like this.

i have all the single images, and named so it's easier to put them into the layout

about the main box, the corners and borders are different each (top left bottom and right border, etc), and the color fill for the all the boxes, i made it as 1x1 pixel images, but if it's easier to make it with the RGB code, i can post it too.

and about the LKU thing above the main box, that is the top left corner

if i have to change any images to make it easier to code, tell me, there is no problem.

i'm actually uploading the images to my dropbox, when they finish i'll edit and post the links here.

E: links

Background
Border bottom
Border Left
Border Top
Border Rigt
Corner Bottom Left
Corner Bottom Right
Corner Top Left
Corner Top Right
Main Fill

Sig Border
Sig Corner
Sig Fill


Side IMG


Quote and code corner (inbox)
inbox border
Code Fill
Quote Fill
Uuumm, hello #ab{^_^} I would like to have a Layout with this image:

http://images5.fanpop.com/image/photos/31400000/Peacock-Wallpaper-skullgirls-31494895-1280-720.jpg

A semi-transparent purple box for my post and my sig, separated please #ab{^_^} (Arial font)

Thank you in advance! #w{<3} #w{=3} #thp{^_^}
From : Forest of Illusion 3
Originally posted by B.T.K
I want a layout with this back:
http://i72.servimg.com/u/f72/18/10/47/36/backgr10.gif

and this:

http://i72.servimg.com/u/f72/18/10/47/36/a10.gif

This is same of my request.#smw{-_-2}
Forest of Illusion 3
Hey there! I would like to request a layout with this image,Only smaller image please and a white background too you know and with a blue box for post and sig separated and for font i would like verdana,
if you want and if you can cause' the image is transparent
Thank you whoever makes my layout!
A layout request!

I am going for a manga theme, so:

1. The background is a simple, plain, white.
2. This image in on the bottom left:

3. The text box having the border of narrator boxes seen here: see the boxes with "Marine HQ", "Near the Red Line", and "The New World".
4. The quote box being a rounded, rectangular speech bubble.
5. The code box simply a black border similar to regular manga panels, same with the sig box.
6. The font is up to you. Hopefully, a manga/comic font (not Comic Sans) will work. But whatever you think looks best.

Here is a mockup of how a imagine it:



This was lazily slapped together on paint, so it looks ugly. I give you the right to rearrange things. So yeah. Also it's small because table stretch-orz. Also don't over lap the image. Don't mind that here. I'm too lazy to fix it.
I have a problem with my shiny new layout. Links look horrid on a white background. Here is my code:



Can I change link colors?





I barely have time to myself anymore, so I won't be very active on here anymore. I'm sorry.
While you marked your layout's syntax as CSS, it's just plain HTML, and change the link color requires CSS. But don't worry, it's not hard at all to apply CSS on your layout.

First of all, make a CSS class. It must be named differently so it won't conflict with anybody else's layout. Name it ".johnsmith" (every class must have a dot before its name).

Add this to your layout header's very beginning:

<style type="text/css">.johnsmith a {color: #000}</style>

That sets up <a> (link) tags into the .johnsmith class.

You can change the color from #000 to whatever you want. You can use 6-digit hex and rgb format as well.

Now your CSS is done. To apply it on your layout area, add this anywhere on your header:

<div class="johnsmith">

(As you can see, the dot is not needed when you apply CSS classes with HTML.)

And add an extra </div> on your footer, because you opened a new one after all.

There are ways to set different visited, hovering and active links colors as well. Let me know if you want further explanation about them.
It's easily the best thing I've done
So why the empty numb?
Originally posted by Koopster
While you marked your layout's syntax as CSS, it's just plain HTML, and change the link color requires CSS. But don't worry, it's not hard at all to apply CSS on your layout.

First of all, make a CSS class. It must be named differently so it won't conflict with anybody else's layout. Name it ".johnsmith" (every class must have a dot before its name).

Add this to your layout header's very beginning:

<style type="text/css">.johnsmith a {color: #000}</style>

That sets up <a> (link) tags into the .johnsmith class.

You can change the color from #000 to whatever you want. You can use 6-digit hex and rgb format as well.

Now your CSS is done. To apply it on your layout area, add this anywhere on your header:

<div class="johnsmith">

(As you can see, the dot is not needed when you apply CSS classes with HTML.)

And add an extra </div> on your footer, because you opened a new one after all.

There are ways to set different visited, hovering and active links colors as well. Let me know if you want further explanation about them.

i dont know CSS so... i dont know how to do this #fim{:P}





I barely have time to myself anymore, so I won't be very active on here anymore. I'm sorry.
You don't need to know CSS at all to do what I said. :P Basically, just paste this on your header's very beginning:

<style type="text/css">.johnsmith a {color: #000}</style><div class="johnsmith">

And change #000 to the color you want at your links.

Also this on your footer's very end:

</div>

Done.
It's easily the best thing I've done
So why the empty numb?
Originally posted by Koopster
You don't need to know CSS at all to do what I said. :P Basically, just paste this on your header's very beginning:

<style type="text/css">.johnsmith a {color: #000}</style><div class="johnsmith">

And change #000 to the color you want at your links.

Also this on your footer's very end:

</div>

Done.

Thanks for the help! All my links look readable now!





I barely have time to myself anymore, so I won't be very active on here anymore. I'm sorry.
I'll request a layout cuz I got bored without one :P

This is how I expect it (yes, y'can rearrange it).

Okay:
This for the repeating BG.
The font I want to is [font=Century Gothic]Century Gothic[/font] (except for the code bos, I want [font=Verdana]Verdana[/font].
This image in bottom right.
Font color: black for all (even for links)
The signature box with white color and transparency and the Post Box with black and transparency (code and quote doesn't need color nor transparency).
If I missed something say me
^ Sounds doable. Claim claim.

EDIT: well, except for the way you'd like to have the boxheaders arranged. I don't think it's possible to stop borders and show what's behind them like that. I'll try to make something just as good though, so stay tuned! ;)
It's easily the best thing I've done
So why the empty numb?
Apparently it took me long enough to be able to double post. :O


Well Erik, I tried to make it as close to the pic you provided as I could. I had to decrease the side image's lenght to fit with a reasonable height stretch, and it still looks big, but not really.

Quote
And like I presumed, it was not possible to arrange boxheaders like you wanted; instead, I left them centered at the top (thanks to Ladida for help with that part). You can yell at me if you want it different, but that's not possible to "stop" the box line to have text around it like you wanted, sorry. :(

I was able to change the box the way you wanted it though. Yay! \o/

Code
lol I can azm0rrz 

Also made you some neato link colors. :3

Header:

<style type="text/css">@import url('http://db.tt/bNRatnwT');</style><div class="bassbg"><div class="bassimg"><div class="basspost">

Footer:

</div><div class="bassfoot">Signature goes here.</div></div></div>

Don't forget to unmatch the "Use default padding" checkbox on your profile.

Hope you liked it! :)
Signature goes here.