Getting Unordered/Ordered List Working Correctly
Editing CSS & Theme Files Method |
Add to your boxes.css:
- .product-specs ul li { list-style-type: disc; list-style-position: outside; margin-left: 20px; }
- .short-description ul li { list-style-type: disc; list-style-position: outside; margin-left: 20px; }
- .product-specs ol li { list-style-type: decimal; list-style-position: outside; margin-left: 20px; }
- .short-description ol li { list-style-type: decimal; list-style-position: outside; margin-left: 20px; }
- .description ul li { list-style-type: disc; list-style-position: outside; margin-left: 20px;}
- .description ol li { list-style-type: decimal; list-style-position: outside; margin-left: 20px;}
In your catalogue/product/view.phtml remove the nl2br function:
<div class="short-description"><?php echo nl2br($_product->getShortDescription()) ?></div>
becomes:
<div class="short-description"><?php echo $_product->getShortDescription() ?></div>
Do the same for description field et voila...
Editing Only a CSS File Method |
Ever create a list for product descriptions, or a list for another page to realize that it isn’t working correctly? Not a pro at CSS? No problem!
This will solve the problem for some who are using a wysiwyg editor with bullet lists that do not show on the front end.
FTP |
You need to FTP your way to where the css files are for your design.
The path you take should look something like this:
skin/frontend/YOUR_INTERFACE/YOUR_DESIGN/css/
Downloading |
Open up boxes.css file in notepad (or any html editor you may use) and add at the bottom of that file (do not delete anything):
- .product-specs ul li {list-style-type: disc; list-style-position: inside; text-indent: 10px; }
- .product-specs ul li ul li{list-style-type: disc; list-style-position: inside; text-indent: 20px; }
- .short-description ul li {list-style-type: disc; list-style-position: inside; text-indent: 10px; }
- .short-description ul li ul li{list-style-type: disc; list-style-position: inside; text-indent: 20px; }
- .product-specs ol li {list-style-type: decimal; list-style-position: inside; text-indent: 10px; }
- .product-specs ol li ol li{list-style-type: decimal; list-style-position: inside; text-indent: 20px; }
- .short-description ol li {list-style-type: decimal; list-style-position: inside; text-indent: 10px; }
- .short-description ol li ol li {list-style-type: decimal; list-style-position: inside; text-indent: 20px; }
Uploading |
After adding the coding to your CSS file, reupload that file to the correct directory.
See The Changes |
You can now use <ul> <ol> and <li> in your short descriptions and your product descriptions.
Trying to change a non product page? No worries. Create your html for your lists and before publishing place <span class=”product-specs”> at the beginning of the list html and </span> at the end of the list html.
It should look like this:
- <span class="product-specs">
- <ul>
- <li>One</li>
- <li>Two</li>
- <ul>
- <li>Three</li>
- <li>Four</li>
- </ul>
- </ul>
- </span>
End Result |
- One
- Two
- Three
- Four

