Try the Demo

Magento

  • Home
  • Wiki
  • 4 - Themes And Template Customization
  • Css
  • Getting Unordered/Ordered List Working Correctly

Getting Unordered/Ordered List Working Correctly

Last modified by FerdiUSA on Thu, June 24, 2010 18:15
Source|Old Revisions  

This is an old revision of the document!

Table of Contents

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!

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



 

Explore the Wiki

Magento Developer Certification

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs