Formatting posts on Marketplace

You can format extension description and comments AbanteCart Marketplaces using basic HTML tags. Marketplace only supports a limited set of HTML tags, but these should be sufficient for most cases. You can see a set of supported tags and examples below. These will help you provide powerful and professionally looking extension description or comments and posts

 

Emphasize Text

Boldface and italics are two of the most common techniques for lending emphasis to text. To set a different text style from the rest of the text wrap it in either <strong> and </strong> or <em> and </em>. For example:

Boldface is often used for <strong>captions, subheads and stand-alone words and phrases</strong>.
Boldface is often used for captions, subheads and stand-alone words and phrases.

Italics are <em>angled typefaces</em>
Italics are angled typefaces

Text can be easily <u>underlined</u> by enclosed the text with the <u> and </u> tags
Text can be easily underlined by enclosed the text with the <u> and </u> tags

 

Links

Here are a few different kinds of links you can have:

Links to other pages within the current site (Local)

Links to pages outside the current site (Global).

To create link wrap up the text you want to link with <a href="URL"> and </a>. So for example if you want to link to the AbanteCart YouTube channel, you would write:

<a href="http://www.youtube.com/user/abantecart">Check out AbanteCart YouTube channel</a>

Check out AbanteCart YouTube channel

The target attribute specifies where to open the linked document. Use _blank to open the linked document in a new window or tab:

<a href="http://www.youtube.com/user/abantecart" target="_blank">Check out AbanteCart YouTube channel</a>

 

Images

Images are defined with the <img > tag and the Src Attribute. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display. There are a lot of places you can host images for free. Try these places:

Once you have a URL for the image then you write <img src="URL">. For example there is an image of the Marketplace logos up at www.abantecart.com/templates/ abantecart/images/shopping_cart_logo.png, so to show them just write:

<img src="http://www.abantecart.com/templates/abantecart/images/shopping_cart_logo.png">

AbanteCart Logo

To link an image to any document, simply nest the <img > tag inside <a> tags.

The height and image attributes specifies the height and width of an image, in pixels. Downsizing a large image with the height and width attributes forces a user to download the large image even if it looks small on the page:

<img src="http://www.abantecart.com/templates/abantecart/images/shopping_cart_logo.png" height="29" width="135">

AbanteCart Logo

 

Quoting

If you want to quote something simply wrap the text in <blockquote> and </blockquote> tags.

A BIG "thank you" to AbanteCart for setting up this board!
I look forward to keeping very up to date by knowing when all new changes and updates are added to the Documentation!

 

Lists

We support two different types of lists to choose from when building a page, including unordered and ordered lists. Both types of lists begin and end with a list tag, either <ul> ... </ul> or <ol> ... </ol>. Each list item within a list is individually marked up using the list item, like this <li> ...</li>. For example:

Unordered List <ul> <li>List Item</li> <li>List Item</li> </ul>

  • List Item
  • List Item
Ordered List <ol> <li>List Item</li> <li>List Item</li> </ol>
  1. List Item
  2. List Item

 

Headings

The heading is simply like a title. In HTML, it is structured by using heading tags such as H1, H2, H3, and H4. Normally, as the heading number gets bigger, the font gets smaller. We only support two types of headings - h3 and h4. The larger ones H1, H2 we reserved for the main site, search engines doesn't like it if you have too many h1's and h2's. Use h3 and h4 tags to structure your description! Examples:

Big Heading

<h3>Big Heading</h3>

Smaller Heading

<h4>Smaller Heading</h4>

Code

You can display code in one of two ways. If you just have a few words of code then wrap the text in <code> and </code>. If you have a large block then you should put it on a new line and wrap it in <pre> and </pre> like this: <code>Small Piece of Code</code>

  
    blockquote
      border-left: 1px solid
      border-color= !div_border
      padding-left: 20px
      margin-bottom: 10px
      font-style: italic
      font-family: Arial, sans-serif
      color: #777777
    code, pre
      font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", 
      monospace
      color: #333333
   

 

Line Breaks

<br /> tag inserts a single line break.

  This is the first line<br />and this is the second<br />and this the third

This is the first line
and this is the second
and this the third

 

YouTube video

In order to post a YouTube video, you need to make sure you use the video's embed code. Don't just copy the URL at the top of the screen. That's actually the video's watch page, and it won't post the video.
Navigate to the video you want to share on YouTube.
Click on the Share button. Click on the Embed button and copy the code.

<iframe allowfullscreen="" frameborder="0" height="180" src="//www.youtube.com/embed/IQ5SLJUWbdA" width="320">

 

More HTML

Not all HTML tags are allowed on the marketplaces just because we don't want to break the main page layout, but it's still worth learning it all anyway!

W3Schools beginner tutorials on HTML and CSS.

Continue