(A lot of you have been asking for this for some time, so we asked David Poms, our new intern and an OpenLefter himself, to put it together. He did a great job. If you have any useful tips to add, feel free to leave a comment.
I also added a link to this in the red header at the top of the page, next to "about & contact". If you're ever working on a new diary/comment and need some help, click on it and it will open in a new tab so you can use it as a reference without closing your diary/comment window. - promoted by Adam Bink)
You asked. We answered. A user's guide to commenting at Open Left using HTML commands!
Open Left is powered by Soapblox, a blog platform that allows community members to easily participate and publish on the site. Anyone familiar with blogs, especially of the lefty variety, should find the layout of the site fairly intuitive. However, not everyone is quite as familiar with creating content as reading it. A simple block of text is fine for getting a point across, but Soapblox provides an array of extras that allow you to communicate with highly readable posts or comments. The best way to learn how to do this is to learn basic HTML commands. To help everyone learn the basic tricks of the trade for creating excellent posts, I have provided a list of HTML commands that are commonly found in posts. If anyone can think of other commands that work in Soapblox and are useful for posting, please leave them in comments below.
Full list of useful commands in the extended entry.
To put words in italics, put the words between the following brackets (but without the spaces between the open carat and the letter): < i >like this< /i >
To put words in bold, use these brackets: < b >like this< / b >
To underline words, use the following brackets: < u > like this < / u >
To put words into a block quote, put the quote in between the following brackets (again without the spaces): < blockquote > like this < / blockquote >
To strike a line through words, put the words in between these brackets: < strike > words < / strike >
To put a hyperlink into your comment, you need the following (no spaces except between the "a" and the "href": < a href="URL" >words that will appear as a blue hyperlink< / a >
To create bullet points, there are three codes you may need, two of which you will have to use each time, depending on whether you want numbered or unnumbered bullet points. There is < ul >, or unordered lists, < ol >, or ordered lists, and < li >, or list item.
For unnumbered bullet points, you want the following code:
< ul >
< li >Bullet 1< /li >
< li >Bullet 2< /li >
< li >Bullet 3< /li >
< /ul >
which will display like this:
Bullet 1
Bullet 2
Bullet 3
For numbered bullet points, simply change the < ul > to < ol >, which will appear like this:
List Item 1
List Item 2
List Item 3
Posting Pictures
To put an image into your comment, you first need to verify that you can link to the picture you want to use. The code is as follows: < img src="image URL here"> The URL in question should come either from a photo hosting website built explicitly for this purpose, such as Flickr, or from your own hosting. The practice of using an image that links to someone elses website is known as hotlinking and is frequently frowned upon due to the fact that it saps bandwidth from other sites without recognition or advertising hits.
To use an image, you must also make sure it does not break the formatting of the site. To set an image's height and width, put the following commands in the image code: < img src="http://farm5.static.flickr.com/4015/4636116405_e33522e455.jpg" width="400" height="350">
To make it smaller or bigger, simply change to the numbers. Keeping them below 500 generally will make sure the formatting doesn't get messed up- you don't want to make a picture too wide or tall or it will be difficult for people to read your comment or diary.
You can also put text directly next to pictures, known as wrapping. To do so, simply put your text directly next to the image code. For example, to put text next to the previous image, without breaking the format, I can decrease the size of the picture and then start typing. The code would be this, without spaces: < img src="http://farm5.static.flickr.com/4015/4636116405_e33522e455.jpg" height="200" width="150" >
Presenting your text next to images like this can be a powerful presentation tool when posting comments on Open Left.
Posting Videos
If you want to embed a video to your comment, diary, or quick hit, the host website of the video will usually provide the code necessary to do that. For example, YouTube will give you the code necessary to embed a video. Simply click the button underneath the video that says Embed, copy the code from the text box, and paste it into your post with no changes.
The code should look like this, without spaces:
< object width="480" height="385">< param name="movie" value="http://www.youtube.com/v/HF9asc8a57E&hl=en_US&fs=1&">< param>< param name="allowFullScreen" value="true">< param>< param name="allowscriptaccess" value="always">< param>< embed src="http:/www.youtube.com/v/HF9asc8a57E&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385">< embed>< object>
And it will appear like this:
You can also resize it by changing the width and height values in the code - just make sure to change both width and height values, at the beginning and the end of the code.
If you have any other useful HTML, be sure to leave a comment, or if there's something you want to know how to do but it's not here, ask for help in the comments.
STATE BLOGS
