Modifying our new theme  - Page 2

Having made a copy of the themes directory we are now going to set up a new cascading stylesheet(css) file within our theme directory

Why am I doing this?
I don’t want to work on the default global css file, its very large and has a lot of CSS rules so that will make it confusing and complex to edit. By taking this approach  of adding rules to my new file as I go along I can make changes on a gradual basis and easily test, knowing that due to cascade order -because our gloablNew.css file will come after the default global.css file- it will override the rules in this file.

If we find issues as we develop our css rules, at any point I can remove global.css or my new globalNew.css file completely and just look at the styling based on either style sheet. I also have the benefit of being able to compare CSS files should we find a rendering problem with changes we have made that is not apparent on the default themes css file. However because I still have the css rules from global.css accesses by default most of the time I can ensure I will still see all modules displayed using the default Prestashop style sheet making development much easier

Overall, as I say, there does seem to be  a lot of CSS rules in Prestashop. It’s a shame that the CSS for a module could not be added only when that Module is used, this would help reduce out file size and complexity. However this might mean linking each module to its own CSS file and with some rules having to exist in the global file in any event, this would present other challenges.If you know you will never use a given module you can of course remove the css from our gloablNew file as needed

Adding a new Style sheet to our theme

Firstly make copy of global.css and rename copy to globalNew.css. Then remove all rules from this file except those for our main blocks with the dimensions we have dicussed . (If you want to avoid the time in doing this, you can also download this globalNew.css file from here).

Now upload this file to your new themes/css directory.

Next we will add the link to our new css file. To do this open Header.php which is located in your Prestashop root directory.

Copy the line $css_files[_THEME_CSS_DIR_.'global.css'] = 'all'; and paste this directly below, then change global.css to gloablNew.css making sure this line comes after global.css. You code should look like this;

/* CSS - second  link to gloablNew added by DE*/
$css_files[_THEME_CSS_DIR_.'global.css'] = 'all';
$css_files[_THEME_CSS_DIR_.'globalNew.css'] = 'all';

Save the file.

Many designers like to use different stylesheets for typography, layout and branding. I am no exception, but for this exercise we are simply going to use our one extra stylesheet.

The first thing I want to do is apply my dimensions for my main columns and divs that are now part of our  layout document that we discussed in the previous page. Our left and right columns will be 191px wide , and the #page div will be 968px wide. We will also add a white background to #page

Open globalNew.css and add the following rules under /* global layout */ around line 80;

/* global layout */

#page {   
width: 968px; background: #fff;
    margin: 0 auto 2px auto;
    text-align:left; padding: 0 5px;}

#left_column, #center_column, #right_column {
    float:left;}

#left_column {
    clear:left;
    width:191px;
    padding-right: 15px;}

#center_column {width: 556px;}

#right_column {
    width: 191px;
    padding-left: 15px;
}

Next I want to change the default background color used on BODY so I can see visually where teh #page finishes during the build as well as the font to font-family: Arial, Helvetica, Sans-Serif; and the size used to 12pixels. Personally I like a slightly larger default font size. Leading will also be set at 150% or 18pixels. Later we will also use  a default bottom margin of 18pixels so we know the exact height each line will occupy.

Pixels not ems!

Some designers will scream “don’t use pixels” you cannot resize type. Well, for the last 4 years I used ems, but now with browsers supporting page zoom and only Internet Explorer not supporting text resizing in pixels (may may be resolved in IE8) I feel going back to pixels is perfectly OK. Actually, I think most people who need to see the page bigger will prefer page zooming anyway. It is extremely hard, especially with eCommerce sites to keep a design looking right when a visitor just increases text sizes alone. (If we are targeting people who need text sizing –we can of course add a style sheet switcher, where we can still check the layout at increased sizes and adjust that specific style sheet to deal with any layout issues

With CSS, remember that leading is added to the top and bottom of your type. This means 12px type with 18px line-height (leading) will add 3px to the top and bottom (3 + 12 + 3). By understanding our default type height we can be more precise with images, know that if we want 4 line of type to sit exactly next to an image we can make the image 72px height (4 x 18px). To account for the 3px above the first line of text we can also add 3px of top margin. This way we avoid type sitting partly below the bottom of the image but still next to it

Having changes by Default type to 12px, I recheck the layout. Immediately I can see the product page now has a problem, the description box (div) to the right is now below the main image. Why has this happened? What is happening is that someone has set the margin in ems. Our increase in type size has increased this margin which now means we would have to increase the #centre_column and #page by 2px to fix this. But using ems for margins in combination with fixed widths is a very bad idea and with floats we are just asking for trouble. We will therefore change this margin to pixels in our globalNew.css. (Note: If you are using my downloaded globalnew.css file you will find I have already made the changes to the margin. If not you need to complete the following;

#centre_column has a width of 556px. Inside this we have

#primary_block #pb-right-column
{float:left;
width:310px;
}

and inside this we have

#primary_block #image-block {
border:1px solid #D0D1D5;
height:300px;
width:300px;
}

To the right, but also inside we have

#primary_block #pb-left-column {
float:left;
margin-left:1.1em;
width:233px;
}

So if our primary block is 310px and the #primary_block #pb-left-column is 233px, that’s 543px. Our margin-left is taking our default text size of 12px and multiplying this by 1.1, giving 13.2. If we add these figures together we have 556.2px. As the centre_column is 556px wide it no longer fits so float down below the product image. So we need a margin_left of 13px to fit precisely (556 - 543). But we will set this to #margin_left 12px  giving us 1px of breathing space.

Change (as indicated in bold) the margin from 1.1em to 12px

#primary_block #pb-left-column {
float:left;
margin-left:12px;
width:233px;
}

Having saved the file, now we test the page in the browser so we can see everything looks fine on the products page. (PS.I can see that there is a seperate problem with search box in the header-our smaller #page width means this no longer fits and has dropped down-but we will deal with this later, when we start to style the header)

Now, before we add these css rules for the products page into our globalNew.css file, we will take a look at the borders being applied. We have borders applied in two places and I only want to see this around the image so will remove this from #primary_block #image-block and add this to #primary_block #image-block img in our globalNew.css. (There may be a reason why its in two places – but we will cross that bridge when we come to it)

OK, around line 724 under the heading /* product.tpl */ add the following rules back to your globalNew.css file and then save.

#primary_block #pb-left-column {
float:left;
margin-left:12px;
width:233px;
}

#primary_block #image-block {
height:300px;
width:300px;
}

#primary_block #image-block img { border:1px solid #D0D1D5;}

(Remember that global.css will still apply rules where there is nothing in our globalNew.css file to override these)

Next we are going to look at the graphic design for our eCommerce store.

Page 3 >>

Pages | 1 | 2 | 3