Getting Unordered/Ordered List Working Correctly

Last modified by kab8609 on Thu, June 24, 2010 17:15
Source|Old Revisions  

Editing CSS & Theme Files Method

Add to your boxes.css:

  1. .product-specs ul li { list-style-type: disc; list-style-position: outside; margin-left: 20px; }
  2. .short-description ul li { list-style-type: disc; list-style-position: outside; margin-left: 20px; }
  3. .product-specs ol li { list-style-type: decimal; list-style-position: outside; margin-left: 20px; }
  4. .short-description ol li { list-style-type: decimal; list-style-position: outside; margin-left: 20px; }
  5. .description ul li { list-style-type: disc; list-style-position: outside; margin-left: 20px;}
  6. .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):

  1.   .product-specs ul li {list-style-type: disc; list-style-position: inside; text-indent: 10px; }
  2.   .product-specs ul li ul li{list-style-type: disc; list-style-position: inside; text-indent: 20px; }
  3.   .short-description ul li {list-style-type: disc; list-style-position: inside; text-indent: 10px; }
  4.   .short-description ul li ul li{list-style-type: disc; list-style-position: inside; text-indent: 20px; }
  5.   .product-specs ol li {list-style-type: decimal; list-style-position: inside; text-indent: 10px; }
  6.   .product-specs ol li ol li{list-style-type: decimal; list-style-position: inside; text-indent: 20px; }
  7.   .short-description ol li {list-style-type: decimal; list-style-position: inside; text-indent: 10px; }
  8.   .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:

  1.   <span class="product-specs">
  2.     <ul>
  3.       <li>One</li>
  4.       <li>Two</li>
  5.         <ul>
  6.           <li>Three</li>
  7.           <li>Four</li>
  8.         </ul>
  9.     </ul>
  10.   </span>

End Result

  • One
  • Two
    • Three
    • Four



 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs