How To Draw Boxes In SU

How to draw a box in your posts

I sometimes get asked how I draw the boxes in my Stumbleupon posts. The method involves using in-line CSS code within any of the HTML tags allowable by the SU code filter. I use the ‘center’ tag usually. If you want to know more about Cascading StyleSheets (CSS) here’s a handy reference.

    < ul style=”border: 1px solid rgb(0, 0, 0); float: none; margin: 20px; padding: 40px; background: rgb(255, 255, 255) none repeat scroll 0% 50%; width: 200px; text-align: justify; color: rgb(0, 0, 0); font-family: Verdana,sans-serif; line-height: 180%; font-size: 85%; letter-spacing: 0.05em; “>
    The code should produce a box enclosing this text that you see here.

Remember to remove the space after the ‘<‘ to enable the ‘ul’ tag. If you want to center the box within the page enclose it within another center tag (or a center align attribute)  and close it after everything else.

There is more code here than you need to simply draw a box. You can see attributes to control text size, font, color, background color which you can ignore or play with.

To simply draw a box all you need to set is the border attribute. It is now set to solid black one pixel. You will want some padding between the content and the border. It is set here to 40px. You will also want some margin between the box and other content. It is set here to 20 pixels but I more usually use 40 or more. Increasing the amount of space between graphic elements makes them easier to see so be generous.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s