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 (new, viewed, etc...) on left and right column */
     div.products_block {float:left;}
     div.products_block ul {float:left;}

6. Then go to line number 763:

   /* Special style for block products in center column */
   #center_column .products_block{color: #595a5e...