O'Reilly logo

PrestaShop 1.3 ThemingBeginner’s Guide by Hayati Hashim

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action — Modifying the global.css for the element theme

This is the area where you need to apply what we have learned in editing CSS. As an example, you would have to modify the New Products block to make it look right in the front office.

  1. Use Firebug or the Web Developer extension and check the items that require "tweaking".
  2. You will know from the Inspect Element feature in Firebug that the New Products block is controlled by certain lines in the global.css file.
  3. Go to /themes/element/css to check out the global.css file.
  4. Go to line number 734, and edit the following line:
    /* block products (new, viewed, etc...) on left and right column */
    div.products_block {float:left;}
    div.products_block ul {float:right;}
    
  5. Change it to:
    /* block products ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required