Language…
12 users online:  Anorakun, bradcomp, DanMario24YT, DasFueller, DimeR, GRIMMKIN, Metal-Yoshi94,  Shoujo, signature_steve, SMW Magic, steelsburg,  yoshi3706 - Guests: 300 - Bots: 410
Users: 64,795 (2,373 active)
Latest user: mathew

The new Layout Request and Help thread (READ RULES)

Link Thread Closed
  • Pages:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 69
  • 70
  • 71
I've never done that before, but my guess is that it'd simply be a simple modification to your styles:

Code
 .xmanin .quote .box {
	background: url('imageurl') top left no-repeat;
	padding-left: *insertimagewidthplusalittlemore*px;
}


For the sake of it let's see if this works:

Originally posted by testing
A
B
C


Another way would be to use a float. That way the text would start from the extreme left again once the text is beyond the image. With the method above, the padding-left applies throughout the whole code. I might edit this post with that method soon enough ... although I have no idea how to float things in div tags. Images are so much easier.
I'm trying to get a layout in the style of this image:


Minus the "99 WHITE 99 BLACK 99 WIZARD" part.

I would assume it can be done in eleven divs with these eleven images:







but if you saw my layout in a thread in the past hour, before I fixed it, you'd have seen that I can't make divs for shit. Help, please?

This is a thing that's happening, now. Achievements in old video games.
Thank you for the layout, Erik557.
Man, I wish this would've worked. Oh well.
If not for respect, but dramatic effect, take on the face of Guy Fawkes.
Giga
(Header ends here)

Inventory Box
If you make a very long message, the inventory box will stay at the same size since the borders and all are just an image, which I thought looked a bit awkward. It should in theory be possible to make it like the other divs (dynamic). Then you could make an image gallery and put custom icons in it, perhaps with their own tool-tips. I didn't bother with this, though I'm sure you can do it if you try.

Final Notes
I'm in no way seasoned in this, so I'm not sure if there are issues with various (older) browsers. Looks fine in the most up-to-date ones. Images I used might get deleted from their current location. Any box or text colours may be easily changed as desired. Even the backgrounds of the images. I recommend using the same colour for the stats image as the container background, since that one will look cut-off otherwise. You'll also need to make new corner-pieces if you change the background too far off from black, since they have a black pixel in 'em.

Hope there's no issues.

Images
Inventory
Stats
Border-wall
Border-BL
Border-BR
Border-TL
Border-TR

Code
Test


Quote
Test


(Footer starts here)
Originally posted by Blumiere

Originally posted by testing
A
B
C


Another way would be to use a float. That way the text would start from the extreme left again once the text is beyond the image. With the method above, the padding-left applies throughout the whole code. I might edit this post with that method soon enough ... although I have no idea how to float things in div tags. Images are so much easier.

Yeah, to be honest, I'd much prefer the text to start under the image when it can. The example you have there isn't really what I want. So, if you could so that, great, but if not, it's open to other people.
I can't thank you enough, Highwind.

This is a thing that's happening, now. Achievements in old video games.
Thank you for the layout, Erik557.
Man, I wish this would've worked. Oh well.
If not for respect, but dramatic effect, take on the face of Guy Fawkes.
Free for claiming, had to make it because this side image of Patchouli is just too funny.
Originally posted by Counterfeit
Link test
Quote test.
l
o
l
d
o
n
g
s

Code
Code test.


Header:
<style type="text/css">@import url('http://bin.smwcentral.net/17478/patchouli.css');</style><div class="patchiback"><div class="patchipost">

Footer:
</div><div class="patchirights">Layout by <a href="http://www.smwcentral.net/?p=profile&id=371">Counterfeit</a></div></div>
Layout by Counterfeit
Originally posted by xman0444
Yeah, to be honest, I'd much prefer the text to start under the image when it can. The example you have there isn't really what I want. So, if you could so that, great, but if not, it's open to other people.

k

Originally posted by testing again
A
B
C


Totally didn't just learn about .class:before {content: url('');} from the last post and adapted it into a quote box. Nope.
Cool Blumiere, thanks for that. Now, where would I place this in my code:

Code
.xmanbg {
	background: url(http://i460.photobucket.com/albums/qq321/xman0444/stripes.png);
}

.xmanbg2 {
	background: url(http://i460.photobucket.com/albums/qq321/xman0444/vulpix1.png) right no-repeat;
	padding: 25px;
	padding-right: 200px;
}

.xmantext {
	border: 2px black solid;
	font: 9pt arial;
	color: black;
	background-color: white;
	padding: 8px;
}


.xmantext a	{color: blue;}
.xmantext a:link	{color: blue;}
.xmantext a:visited	{color: purple;}
.xmantext a:active	{color: red;}


Yeah, I don't know much.
Sure.

Code
.xmanbg {
	background: url(http://i460.photobucket.com/albums/qq321/xman0444/stripes.png);
}

.xmanbg2 {
	background: url(http://i460.photobucket.com/albums/qq321/xman0444/vulpix1.png) right no-repeat;
	padding: 25px;
	padding-right: 200px;
}

.xmantext {
	border: 2px black solid;
	font: 9pt arial;
	color: black;
	background-color: white;
	padding: 8px;
}

.xmantext .quote .box:before {
	content: url('http://bin.smwcentral.net/16939/vulpixanimation.gif');
}

.xmantext a	{color: blue;}
.xmantext a:link	{color: blue;}
.xmantext a:visited	{color: purple;}
.xmantext a:active	{color: red;}

For the record, you used links incorrectly. The order is :link, :visited, :hover and :active. "a" is kind of a universal thing. It's not required you have all of them, but it's useful for bitchy browsers and for the sake of better coding.

(Also I didn't test it but I'm 98.6% I did it correctly. :V)
Originally posted by test
aggl;dghlihgsildknh;osxznhjd;shj
stuff for testing purposes and nothing beyond that aouignhiH
dzjrzhjnrnhj

Cool, thanks for that Blu. And about the links, grrr to creator of layout.

I'd like a new layout, that looks like this.
but yeah, i suck in layout making, so i'd request it here.
font: verdana.
oh, and add a shadow like i have in this layout, please.



I might put some sort of signature here once. I guess.
HEADER:



----

here's a 'BASE' layout for some people. I use this type of thing for all mine, and i tought i'd share it..

----

In the header there are 3 images on here.

the first in my code looks like: <div style="background: url(http://thumbs.dreamstime.com/thumb_22/1127581710BjQ65r.jpg)
and thats the background image, the image that wraps around in the background. change http://thumbs.dreamstime.com/thumb_22/1127581710BjQ65r.jpg to the background image url.

The second code looks like: <div style="background: url(http://bin.smwcentral.net/17442/nekonata.png)
Thats the image that goes on the right. just change http://bin.smwcentral.net/17442/nekonata.png into the link to your image

The last image is the background to the TEXT:
<div style="background: url(http://alex.losego.com/images/blacktdbg.png)
In this case is a transparent black colour. just change http://alex.losego.com/images/blacktdbg.png to the text background you want.

---

Below this text is the footer, this footer has one image, this image is the background to the text in the footer.

---

Okay so.. this kinda fails maybe, but i tried my best in explaining for people lacking experiance. This is kinda simple, but some people only want this (like me, i can do alot with this)
Quote my post for the code.

---

FOOTER:

</div><div style="background: url(http://alex.losego.com/images/blacktdbg.png); border: 2px rgb(0,0,0) solid; padding: 3px; margin-right: 220px; margin-top: 10px;">REPLACE THIS TEXT WITH YOUR SIG</div></div></div>
Ok, I want this layout:
*MS Paint picture for a little review on how it should look*

The fields should have rounded edges, and are transparent, but very dark.
Text stays white, without any special font.

Background:
This at the top rows:


And the lowest row should be this:


It has a signature, a sidebox on the left side, a picture on the right side and many little goombas sitting around there:

It should use this little guy before any quote, like this:
Originally posted by Bla

Blablablablablaomn0m


In the sidebox on the left side (which fills the whole text field vertically), there will be this guy sitting in the down-right corner:


In the top-right corner of the text-field ther's this guy:


In the down-right corner of the signature this guy should appear:


The picture on the right side:



Also Links should become bigger, when you hover over them, like in Blumiere's current layout.


I hope that isn't too much. #w{=3}
But now, where I look at it..

If I have done anything wrong, please tell me.
Your layout has been removed.
Previous request is very hard with divs. I tried to look a bit at it, but in the end, I could only get close to it. You have to use a neat trick to get the divs to work exactly like that, making a bunch of them overlap each other to maintain the equal height issue. But doing that, the overlapping transparent divs will "double up." On top of that, the repeating main background images would be tricky to line up correctly with this solution.

Here's an image of my partial solution.

It wouldn't be too hard to accomplish on it's own, but because we're restricted to the structure of this site, I don't see an easy solution. If someone can do it, props to them. [Edit] If the request wasn't to make the left block equally high as the two right blocks it would also be easy. [Edit]

It should, however, be very easy with tables, which I refuse to use for non-tabular data. I guess just about anyone in here could do that. Not sure if the requesting dude is perma-banned for his tag-abuse/spam anyway.


Free layout up for grabs =]

S

T

R

E

T

C

H

Quote for code ^^

EDIT: Updated some things
SINATURE GOES HERE
Originally posted by Highwind
Previous request is very hard with divs. I tried to look a bit at it, but in the end, I could only get close to it. You have to use a neat trick to get the divs to work exactly like that, making a bunch of them overlap each other to maintain the equal height issue. But doing that, the overlapping transparent divs will "double up." On top of that, the repeating main background images would be tricky to line up correctly with this solution.

Here's an image of my partial solution.

It wouldn't be too hard to accomplish on it's own, but because we're restricted to the structure of this site, I don't see an easy solution. If someone can do it, props to them. [Edit] If the request wasn't to make the left block equally high as the two right blocks it would also be easy. [Edit]

It should, however, be very easy with tables, which I refuse to use for non-tabular data. I guess just about anyone in here could do that. Not sure if the requesting dude is perma-banned for his tag-abuse/spam anyway.



Well, if it's easier to make the box on the left not as high as the others, then that wouldn't be too bad.

And for the tag spam: I don't wanted to do tag spam, I have just forgotten, that the tags have to be closed..
And when i wanted to delete/edit it when I have noticed it, firefox just freezed everytime..
Your layout has been removed.
How do i add a shadow under the text to give a sticky out look, like the SMW title graphics.

EDIT: And how to change the font? and font color?

Thanks ^^
How do I get the Super Mario 64 Bob-Omb Battlefield Background as
a layout? Also have the SM64 text style as your post text??
I would like these!!
Originally posted by SMLink64
How do I get the Super Mario 64 Bob-Omb Battlefield Background as
a layout? Also have the SM64 text style as your post text??
I would like these!!


Get the background image and we can make it for you

You wont be able to have the SM64 font as your text though.
The closest would be;
This font im guessing, although i dont know if this font is allowed.
Originally posted by iRhyiku
How do i add a shadow under the text to give a sticky out look, like the SMW title graphics.

EDIT: And how to change the font? and font color?

Thanks ^^

To add shadow to the text, simply put this:

text-shadow: *color* *horizontal offset* *vertical offset* *amount of blur*;

Replace *color* with a color, obviously.

*horizontal offset* is the amount to offset the shadow horizontally.
*vertical offset* is the amount to offset the shadow vertically.

*amount of blur* is the amount of blur to give to the shadow, obviously. No blur means it is a solid shadow.

Examples:

  TEST 1   (text-shadow: green 10px 10px;)


  TEST 2   (text-shadow: #FFFF00 -5px -5px 1px;)


To change the font, simply put this:

font-family: verdana;

Change verdana to whatever you please

for font color:

color: *color*;
  • Pages:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 69
  • 70
  • 71
Link Thread Closed