Getting Unordered/Ordered List Working Correctly

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

This is an old revision of the document!


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 a 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 {
  2.     list-style-type: disc;
  3.     list-style-position: inside;
  4.     text-indent: 10px;
  5.   }
  6.   .product-specs ul li ul li{
  7.     list-style-type: disc;
  8.     list-style-position: inside;
  9.     text-indent: 20px;
  10.   }
  11.   .shortdescription ul li {
  12.     list-style-type: disc;
  13.     list-style-position: inside;
  14.     text-indent: 10px;
  15.   }
  16.   .short-description ul li ul li{
  17.     list-style-type: disc;
  18.     list-style-position: inside;
  19.     text-indent: 20px;
  20.   }
  21.   .product-specs ol li {
  22.     list-style-type: decimal;
  23.     list-style-position: inside;
  24.     text-indent: 10px;
  25.   }
  26.   .product-specs ol li ol li{
  27.     list-style-type: decimal;
  28.     list-style-position: inside;
  29.     text-indent: 20px;
  30.   }
  31.   .short-description ol li {
  32.     list-style-type: decimal;
  33.     list-style-position: inside;
  34.     text-indent: 10px;
  35.   }
  36.   .short-description ol li ol li {
  37.     list-style-type: decimal;
  38.     list-style-position: inside;
  39.     text-indent: 20px;
  40.   }

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