Language…
18 users online: anonimzwx, crocodileman94, DanMario24YT, Domokun007,  Eevee, eltiolavara9, HaruMKT, hhuxy, Knight of Time, margot, Maw, MegaSonic1999, nonamelol1, OnlySpaghettiCode, Pizzagamer9791, ShoopDaWhoop, StarWolf3000, VLSkoot - Guests: 287 - Bots: 310
Users: 64,795 (2,375 active)
Latest user: mathew

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

I'm almost certain I'm doing something wrong. This is what I currently have.

[/div][div style="background: #000033; border: 2px #000080 solid; padding: 3px; position: relative; margin-right: 200; margin-top: 20px;"][div style="background: url('https://i.imgur.com/wODWqfY.png') position: absolute; top: -20px; left: 0; no-repeat; padding: 5px;"][/div]
[img src=http://i.imgur.com/TicZXAN.png]
What's your gambit?
[/div]


My current signature after making the changes. I've replaced some of the code with ]s and [s respectively to avoid breaking the page.

[/div][div style="background: #000033; border: 2px #000080 solid; padding: 3px; position: relative; margin-right: 200; margin-top: 20px;"]

This is the sigbox I have. I've placed the position: relative part within it. I think this was probably the only thing I did right.

[div style="background: url('https://i.imgur.com/wODWqfY.png') position: absolute; top: -5px; left: 0; no-repeat; padding: 5px;"][/div]

This was my attempt at putting one of the box images illustrated in the screenshot earlier. It doesn't seem to be showing up on my end. I also happen to be using Firefox, so that may also be a factor.

If I can get this box done I'm pretty sure I can get the others done with little problem.

[img src=http://i.imgur.com/TicZXAN.png]
What's your gambit?
[/div]


And this is basically my sigbox's contents.

The boxes used in the screenshot in question:
https://i.imgur.com/iYc08BY.png
https://i.imgur.com/wODWqfY.png
https://i.imgur.com/rQBstjo.png
https://i.imgur.com/9IGjpIg.png

I'll put these in my file bin once I get this working, but for now they're on imgur.

-----------

STELLA!
You forgot a semicolon between the background and position properties :P
It's easily the best thing I've done
So why the empty numb?
Okay. I think I've got this down now. I'll fill in the rest later. Thanks!

Edit: One other thing. Is it possible for the sig to be at the bottom of the table? Because it kinda looks odd seeing the weird empty space below my sig when i type anything less than 3 lines of text in my post.(including line breaks).

-----------

STELLA!

My layout request:
Top edge image:

Bottom edge image:

Left edge image:

Right edge image:

Image that I'd like positioned to the left of my layout:

Background image (the image should repeat):

Sorry if these images are too big.
"Glauben Sie nicht alles, was Sie im Internet lesen." - Karl Marx
Originally posted by FailSandwich
My layout request:

wow, this thread is so dead


This is a bit of sample text to test your layout! I decided to also add a custom font to it. The font (Press Start 2P) is actually really cool ãnd ít sùppõrts çustom cháràctérs! Too bad I can only set its size to 6pt or 12pt without looking weird. New lines don't look too cramped because I increased the line height to 1.5x. This isn't the actual EarthBound font, but it should do well. Hopefully this is more or less what you wanted! I had to do a bit of trickery to get bold text to look good. Unfortunately, italicized text can't be fixed...

If anything looks different from what you wanted, please let me know so I can fix it!

I actually listened to a bit of Earthbound music while making this too. Fun fact!

The code for your layout is down below:

Code
LAYOUT HEADER:
<style>
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
 .failandasandwichtoo {background: url("https://bin.smwcentral.net/u/34937/l9g50acby1011.png") left center no-repeat, url("https://bin.smwcentral.net/u/26481/failsandwich_bg2.png") repeat; min-height: 250px; padding: 10px 10px 10px 200px; font-family: 'Press Start 2P', monospace; font-size: 6pt; line-height: 1.5;}
 .failandasandwich2 b, .failandasandwich2 strong {font-weight: 400; text-shadow: 1px 0 0 #FFF;}
 .failandasandwich2 {border: 16px solid transparent; border-image: url('https://bin.smwcentral.net/u/26481/failsandwich_border.gif') 16 16 fill repeat; padding: 10px;}
 .failandasandwich2 .quote .box {border: 1px solid #FFF;}
 .failandasandwich2 .quote .boxhead, .failandasandwich2 .code .boxhead, .failandasandwich2 .code pre.box {font: inherit;}
 .failandasandwich2 .code pre.box {white-space: pre-wrap;}
 .failandasandwich2 a {color: #6BD5BD; font-weight: normal; text-shadow: 0;}
 .failandasandwich2 a:hover {color: #BBECE1; text-decoration: none;}
 .failandasandwich2 a:active {color: #E3F7F2;}
 .failandasandwich2 hr {height: 1px; border: 0; background-color: #FFF; margin: 10px 0;}
</style><div class="failandasandwichtoo"><div class="failandasandwich2">


LAYOUT FOOTER:
<hr>SIGNATURE GOES HERE!!!</div></div>


Please disable the "Footer separator" option on Edit Profile before using this layout!
SIGNATURE GOES HERE!!!

Originally posted by RanAS


Thanks! This is really cool!
"Glauben Sie nicht alles, was Sie im Internet lesen." - Karl Marx
Are you guys aware of any code that can be used to make, let's say for instance, an image appear outside the area on the page that the code is based?

Let's say if you made a footer, but you wanted code on there to sort of make in image float above the footer, offset by a couple lines of text upwards.



YouTube Twitter Twitch
Originally posted by Conal
Are you guys aware of any code that can be used to make, let's say for instance, an image appear outside the area on the page that the code is based?

Let's say if you made a footer, but you wanted code on there to sort of make in image float above the footer, offset by a couple lines of text upwards.

Code
<img src="(URL)">



This is how it works normally.

Code
<img src="(URL)" style="position: relative; bottom: 24px; left: 24px;">



Relative positioning will grab an image and offset it to the location you point it towards. Note that this is just visual and text will wrap according to where the image was originally located.

If this doesn't help, there's also position: absolute;. It will offset it according to the edges of its container element, but only if the container has a position: relative;. If not, it'll search for any element that contains it that has that attribute, including the entire page itself.

Code
<div style="position: relative; background: #555;">
text <img src="(URL)" style="position: absolute; right: 24px;">
</div>


text


Code
<div style="position: relative; background: #555;">
text <img src="(URL)" style="position: absolute; right: 24px; bottom: 24px;">
</div>


text


Don't forget the position: relative;, you don't want the image to end up outside of your post and somewhere else on the page.
I thought it'd be with top: -16px instead, like but I don't think I read it right, and you explained it better than I could.

Also, same.
--------------------
C'mon, man, I try my best.
これは「なにか」ですわ
SAN値!ピンチ!
Nice program! Helped alot! #smrpg{y} #tb{^V^}
I don't know if it's too simple or if it's loopable, but... :
Background Image
Just add this image to the left :

Similar to FailSandwich's request, but simpler :v
PS.: I couldn't find a transparent image, but it's just Smash Bros Ultimate Villager render...
On top of that, the images were a pain in the neck to find, because I googled them with a download speed of... 0.124Mps. That took way too long
RIP my friend's Ridley, he dropped it cuz I combo'd him a bit tol much as Mario.
Originally posted by Tahixham

You can also try IRC.

#dev (IRC channel) contains many users who are experienced in layout coding, too. You may get a quicker response there.


hi, i would like these two css codes as a layout together.
the link to the background is https://codepen.io/saransh/pen/BKJun
the link to the overlays (footer, text, etc.) is https://codepen.io/GreggOD/pen/xLbboZ
can someone combine the two?
ютюб: https://youtube.com/c/Fowlware

Hello! Im looking for a Paper Mario layout! And I'd like this used somewhere, if i may request :3

https://bin.smwcentral.net/u/20176/The%25252BQwoll%25252BOne%25252B-%25252BCopy.png

Thankyou!!!

Oh also, my last one had a pure white text field and it was really bright, so id like this one to be easier on the eyes :>
My youtube: https://www.youtube.com/channel/UCbX4pLm713laHTRtLj9xpxw
My twitch: https://www.twitch.tv/theqwollone
Soooo... apparently, while I was away from the forums, stupid.li went down, quickly making my post layout very boring. It has stayed mostly the same ever since I first got it anyway. Definitely started getting a bit boring after a while :P

For that reason, I'd like to request a new layout, based on Windows 3.11's WRITE.EXE. Here's a link to the files I want to be used for it: https://bin.smwcentral.net/u/34937/layout.zip
example.png shows what I want it to look like when it's done. I separated the top menu bar and the top title bar so that it's easier to make it scale-able.
The font I'd like to be used in my new layout is the MS-DOS command line font, at 12pt: https://www.dafont.com/windows-command-prompt.font
If possible, I'd like the code block to use Arial instead of the CMD font, though. If you can disable font smoothing for Arial using CSS, that'd be a nice bonus to make it look more consistent, but it's not totally necessary :p

If I've forgotten anything, or if there is any other info you'd like me to provide, feel free to tell me. Thanks in advance!
I would like a layout with black boxes with white outlines for post/signature and this image on the top right corner.
I would like a layout themed after the Masked Man battle from MOTHER 3.
Underrated thingies are always better.
Originally posted by Masked Man
I would like a layout themed after the Masked Man battle from MOTHER 3.

Please read this thread's rules more carefully, especially rule 3. All resources are to be provided here for coders when requesting your layout.
Windowless ride, feeling alive
Are you alive or just breathing?
Originally posted by Katerpie
Originally posted by Masked Man
I would like a layout themed after the Masked Man battle from MOTHER 3.

Please read this thread's rules more carefully, especially rule 3. All resources are to be provided here for coders when requesting your layout.

Thank you for telling me about that. The resources are:
*The battle background
*The Masked Man sprite
*The dialogue borders
All of which you can find on the spriters resource.
Underrated thingies are always better.