PDA

View Full Version : Question: Special boxes?


Weatherman, Kiyoshi
December 7th, 2008, 04:07 PM
I've been in the dark for too long.

How exactly do you make these?

http://i37.tinypic.com/1075pmw.png

I would REALLY like to know.

Katalyst
December 7th, 2008, 04:34 PM
That's made with CSS codes. You can do things like that with it, it's useful for having a decorated and organised signature. The two circles and the text over them in my signature are encoded with CSS. As you saw there, it can also be used in posts.

Example:
[css-div="width: 180px; height: 15px; border: solid 1px #000000; font-variant: small; font-size: 10px; color: #ffffff; background-color: #666666; text-align: left;"]Here's a simple CSS box.
[/css-div]...and the code I used to make it (without the red *).
[*css-div="width: 180px; height: 15px; border: solid 1px #000000; font-variant: small; font-size: 10px; color: #ffffff; background-color: #666666; text-align: left;"]Here's a simple CSS box.
[/css-div]

I think someone has written a tutorial with some codings, but I don't remember who was or where is the tut.
There are a lot of people here who know how to use this, you can ask them for some tips if you want.

Hope this helped a bit.

EDIT: Oh btw, CSS is best viewed in Firefox. IE doesn't show things like round corners and others.

Gary, the Magic Fairy
December 7th, 2008, 04:54 PM
Here's the two codes for those -- the first is relatively simple, it's just a background image.

btw, IE isn't showing the second one correctly, it looks alot better when you can see the animated background XDD
(Screenie) (http://img247.imageshack.us/img247/8592/12072008185618op3.png)

[css-div="border: 1px #A87C00 inset;width:207px;height:225px;overflow:auto;background-image: url(http://i37.tinypic.com/2hqqa2e.gif);color:#A87C00;text-decoration:none;background-repeat:no-repeat"][VIP LIST]
XxXxXxX
XxXxXxX
XxXxXxX
XxXxXxX
XxXxXxX
XxXxXxX
XxXxXxX
XxXxXxX
XxXxXxX
XxXxXxX
XxXxXxX
XxXxXxX
XxXxXxX
XxXxXxX
XxXxXxX[/css-div]


[css-div="border: 1px black inset;width:190px;height:225px;overflow:auto;background-image:url(http://i34.tinypic.com/21nh0nn.gif);color:white;text-decoration:none;background-repeat:no-repeat"][css-div="width:190px;height:225px;background-image:url(http://i34.tinypic.com/ou169x.png)"][BLACKLIST]









Mwahahahahaha...[/css-div][/css-div]

Quote my post to see the codes.

Also, for rounded edges, you might be better off using images instead of that funny -moz-border-radius thing, since it won't work in IE... or Opera, or Safari, or any other browser I've tried besides Firefox. :\

processr
December 7th, 2008, 05:00 PM
Quote my post to see the codes.

I was about to reply with something along those lines - why didn't the OP just quote your post in the thread he print-screened to see the code? x_X

Gary, the Magic Fairy
December 7th, 2008, 05:04 PM
I had my thread locked, since the shop is now closed. :3

(btw, If anyone wants any of the other codes on my thread, feel free to PM me for them.)

processr
December 7th, 2008, 05:09 PM
I had my thread locked, since the shop is now closed. :3

>>;;;

That's what I get for not being used to plain old membership, I guess.