Getting Unordered/Ordered List Working Correctly

Last modified by kab8609 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!

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/default/YOUR_DESIGN_NAME/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):

.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;
} 
.shortdescription 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 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>
</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