Marketplace HTML Cheat Sheet

Marketplace Product Descriptions HTML Reference Guide

2021

It is U of I policy to prohibit and eliminate discrimination on the basis of race, color, national origin, religion, sex, sexual orientation and gender identity/expression, age, disability, or status as a Vietnam-era veteran. This policy applies to all programs, services, and facilities, and includes, but is not limited to, applications, admissions, access to programs and services, and employment.

Contents HTML Implementation Key .............................................................................................................. 1 Formatting ............................................................................................................................................... 1 Paragraph breaks .............................................................................................................................. 1 Add in Space between paragraphs ................................................................................................ 2 Align Text (Center) ............................................................................................................................ 2 Align Text (Left).................................................................................................................................. 3 Align Text (Right) ............................................................................................................................... 3 Bulleted List ........................................................................................................................................ 4 Numbered list ..................................................................................................................................... 4 Text Treatments ..................................................................................................................................... 5 Bold ...................................................................................................................................................... 5 Italic ...................................................................................................................................................... 5 Font color ............................................................................................................................................ 5 Linking text.......................................................................................................................................... 6 Highlight .............................................................................................................................................. 7 Superscript .......................................................................................................................................... 7 Subscript ............................................................................................................................................. 8

Marketplace Product Descriptions This document details the process for implementing formatting and text changes to Marketplace product descriptions using HTML. Each design element description will include the HTML code needed to achieve the desired effect, an explanation of where to place the code, an example of what content will look like in the backend of Marketplace and an example of what the final product description will look like.

HTML Implementation Key •

HTML Code = the snippet of HTML code that you will need to add into the description boxes of Marketplace. The placement of the code varies by what the code is altering.

•

Where to Place it = explains where the code needs to go within your description.

•

Example in the backend = shows what the text needs to look like in Marketplace’s description boxes to get the desired results.

•

What it will look like in the store = shows what the text will look like to users making a purchase in Marketplace.

If you have any questions about the content provided below, if you are having trouble implementing the code in your own product descriptions, or if you would like to learn how to implement a feature that is not included in this guide, please contact your Web Coordinator.

Formatting Paragraph breaks HTML Code: <br /> Where to place it: Place <br /> between the two paragraphs where you want the break to be.

Example in the backend:

What it will look like in the store:

Marketplace HTML Reference Guide | 1

Add in Space between paragraphs HTML Code: <br /> Where to place it: Place two <br /> between the two paragraphs, each on their own line. You can add more <br /> tags to add even more space.

Example in the backend:

How it will look in the Store:

Align Text (Center) HTML Code: <p style="text-align:center;"> and </p> Where to place it: Place <p style="text-align:center;"> at the start of the section you want to be centered and place </p> at the end of the section you want to be centered (no space between the code and the sentence).

Example in the backend:

How it will look in the Store:

Marketplace HTML Reference Guide | 2

Align Text (Left) HTML Code: <p style="text-align:left;"> and </p> Where to place it: Place <p style="text-align:left;"> at the start of the section you want to be leftjustified and place </p> at the end of the section you want to be left-justified (no space between the code and the sentence).

NOTE: This code is not needed if you are only using left-hand justification. You will need it if you have text that is centered and then needs to go back to left-justified.

Example in the backend:

How it will look in the Store:

Align Text (Right) HTML Code: <p style="text-align:right;"> and </p> Where to place it: Place <p style="text-align:right;"> at the start of the section you want to be right-justified and place </p> at the end of the section you want to be right-justified (no space between the code and the sentence).

Example in the backend:

How it will look in the Store:

Marketplace HTML Reference Guide | 3

Bulleted List HTML Code: <ul>, <li>, </li> and </ul> Where to place it: Place <ul> at the start of a bulleted list and hit enter. Then, place <li> before each item in that list and </li> at the end of each item in that list. When you have finished creating the list items, hit enter and insert </ul> into the description.

Example in the backend:

How it will look in the Store:

Numbered list HTML Code: <ol>, <li>, </li> and </ol> Where to place it: Place <ol> at the start of a bulleted list and hit enter. Then, place <li> before each item in that list and </li> at the end of each item in that list. When you have finished creating the list items, hit enter and insert </ol> into the description.

Example in the backend:

How it will look in the Store:

Marketplace HTML Reference Guide | 4

Text Treatments Bold HTML Code: <strong> and </strong> Where to place it: Place <strong> at the start of the section you want bold and place </strong> at the end of the section you want to be bold (no space between the code and the text).

Example in the backend:

How it will look in the Store:

Italic HTML Code: <em> and </em> Where to place it: Place <em> at the start of the section you want italic and place </em> at the end of the section you want to be italic (no space between the code and the text).

Example in the backend:

How it will look in the Store:

Font color HTML Code: <span style="color:#HEX CODE;"> and </span> Where to place it: Place <span style="color:#HEX CODE;"> at the start of the section you want to be a different color and place </span> at the end of the colored section (no space between the code and the text). To find the Hex Code for any color you want, use this website.

Marketplace HTML Reference Guide | 5

If you would prefer to use a predetermined, generic color, check out the options on this website.

The code would then change from <span style="color:#HEX CODE;"> to <span style="color:red;"> (or any other color listed on the site.)

NOTE: Changing the font color will put the colored text on a new line if you use <p style>/</p> rather than <span style>/</span>.

Example in the backend:

OR

How it will look in the Store:

OR

Linking text HTML Code: <a href="URL"> and </a> Where to place it: Place <a href="URL"> before the text you want to link out to another website and put </a> at the end of the text you want to link (no space between the code and the text) NOTE: Include the HTTPS:// part of URLs (i.e. <a href=https://uidaho.edu>link here</a>).

Example in the backend:

How it will look in the Store:

Marketplace HTML Reference Guide | 6

Highlight HTML Code: <span style="background-color:yellow;"> and </span> Where to place it: Place <span style="background-color:yellow;"> at the start of the section you want highlighted and place </span> at the end of the section you want highlighted (no space between the code and the text).

Like font color, you can use HEX codes or the pre-programmed colors for highlighting options. To find the Hex Code for any color you want, use this website. If you would prefer to use a predetermined, generic color, check out the options on this website.

Example in the backend:

OR

How it will look in the Store: OR

Superscript HTML Code: ^and Where to place it: Place ^{at the start of the section you want superscript and place} at the end of the section you want to be superscript (no space between the code and the text).

Example in the backend:

How it will look in the Store:

Marketplace HTML Reference Guide | 7

Subscript HTML Code: _and Where to place it: Place _{at the start of the section you want subscript and place} at the end of the section you want subscript (no space between the code and the text).

Example in the backend:

How it will look in the Store:

Marketplace HTML Reference Guide | 8