I will be adding codes here that you can use for your message board posts. These codes are to be used in conjuction with the HTML editor .
Until I learn another way to display the code here without having it rendered, I will use curly brackets { and } instead of the less-than < and greater-than > symbols.
To convert the displayed code to usable code, replace the left curly bracket { with a less-than symbol <, and replace the right curly bracket } with a greater-than symbol >. You can do this easily using Notepad.
This code will give you a box with a 3 pixel solid border colored grey, padding of 15 pixels, and a background color of blue.
For the background and border colors you can use an HTML hex value or a color name. For the border, I have chosen a hex value, #C0C0C0. For the background color I have chosen the color name "Alice Blue". You can find color names
here.
{div style="
border: 3px solid #C0C0C0;
padding: 15px;
background-color: AliceBlue;"}
YOUR MESSAGE HERE
{div}
This code will give you a box with a 3 pixel solid border colored crimson (color name) rounded at each corner, padding of 25 pixels, and a white background (hex value).
{div style="
border: 3px solid Crimson;
border-radius: 25px;
padding: 25px;
background-color: #FFFFFF;"}
YOUR MESSAGE HERE
{/div}
This code will give you a box with a 3 pixel dotted border colored lavender (hex value), padding of 25 pixels, and a ghost white-colored background (color name). The image will appear at the left and the text inside will wrap around it.
Replace
URL with the address of your image.
{div style="
border: 3px dotted #CEB5CE;
padding: 25px;
background-color: GhostWhite;"}
{div style="float: left;"}{img src="URL"}{/div}
YOUR MESSAGE HERE
{/div}
As you can see in the previous example, my text butted right up against the image which doesn`t look good. I`d like padding around the image on all sides, so I will add these padding values around the image in this order - top, right, bottom, and left.
padding: 0px 25px 10px 0px
I assigned padding values so that my image would have a uniform-looking padding around it. Since the left and top of the image already has 25 pixels of padding assigned, I set those values to 0px. I assigned padding values for the right (25px) and the bottom (10px) of the image.
Your image may be cropped in such a way that it appears to have padding on the right and bottom. If this is the case, you probably won`t need to add padding for your image. If your image is like mine and cropped closely, then you can add padding values for the image.
{div style="
border: 3px dotted #CEB5CE;
padding: 25px;
background-color: GhostWhite;"}
{div style="float: left; padding: 0px 25px 10px 0px;"}{img src="URL"}{/div}
YOUR MESSAGE HERE
{/div}