Mr Site

Targeting specific versions of IE with CSS

Normally if you wanted to target a version of IE you would just add and extra CSS file in the <head> and call it a day. However Storefront is generated dynamically so here is the recommended way of fixing all those IE bugs.
Jump into the dev tools and select the theme you want to add the file to, then select file > add file. Give it a name and extension such as ie_hacks.css. To add it to your theme open the Settings file and simply drag the IE CSS file into the files box (chrome only at the moment)
Here is the CSS with explanations:
/*
WOAH, this is the Internet Explorer CSS hacks file.
Here is how to target specific versions of the troublesome bugger:
IE-6 ONLY
* html #element {
 background:#000;
}
IE-7 ONLY
*+html #element {
 background:#000;
}
IE-8 ONLY
#div #element {
 background:#000\0/;
}
IE-7 AND IE-8
#div #element {
 background:#000\9;
}
Go to http://www.css-tricks.com/how-to-create-an-ie-only-stylesheet/ if you need more info
*/
html .tooltip {
    background:#000\9;
}
html .featTbl_impact_1 .arrow-e {border-left-color:#000\9;border-left-width:1em;border-left-style:solid;}
html .featTbl_impact_2 .arrow-e {border-left-color:#000\9;border-left-width:1em;border-left-style:solid;}
html .featTbl_impact_3 .arrow-e {border-left-color:#000\9;border-left-width:1em;border-left-style:solid;}
html .featTbl_impact_4 .arrow-e {border-left-color:#000\9;border-left-width:1em;border-left-style:solid;}
html .featTbl_impact_5 .arrow-e {border-top-color:#000\9;border-top-width:1em;border-top-style:solid;}
html .featTbl_layouts_1 .arrow-e {border-right:1px solid #f00;}

9 months ago

Changing thumbnail sizes

All product thumbnail grids use the same sized images, which you can find in calculate.less.css.

You can change the height of your thumbnails by finding and adjusting the following lines of CSS:

/*    Product images */
    @ThumbnailSpacing:5px;
    @ThumbnailHeight:260px;
    @ThumbnailImageHeight:@ThumbnailHeight - 80px;
    @thumbnailborderwidth:1px;
    @thumbnailimagebottommargin:10px;

The width of the thumbnail is determined by the number of columns you’ve set up for your grids further down in the calculations part of the calculate.less.css, and these widths are affected by the width of the theme, padding of the theme, width of the widget, padding of the widget, and spacing between the thumbnails - so technically you shouldn’t hard-code the thumbnail width, as the SDK calculator will work this out for you.

// Uber calculator v1.0 (RC)
// .BuildSDK(“Container Width”, “Block size allowed for wrap class”, “Thumbnails allowed in each row”, “Internal container padding”)

This explains the build function and the accepted values.

An example of how this works should make things a little clearer:

.StorefrontWidget.WrapClass4{.BuildSDK(@ColumnTwoWidth, 1, 4, (2 * @ColumnTwoPadding);}

Whenever you drop a widget into a section of the site, it is given a WrapClass size, and everything is calculated on the container it is situated. So, for a large 4 block widget dropped into ColumnTwo (the center column), we’re telling the calculator that we want 4 thumbnails in a row.

If you’re not sure of what you’re doing here, just leave the default values. Of course, changing thumbnail sizes will require the thumbnail images to be adjusted also. So if you find that you have a lot of white space around your images after you’ve adjusted your grid, you’ll need to adjust the X and Y value of your thumbnail crop values.

9 months ago

Values for updating your dropdown menu in calculate.less.css

9 months ago

Modifying the menu

The menu for Storefront is highly customisable when you have access to the SDK theme. The following lines of code should explain exactly what is going on:

/* ———————————————————————————————————————————————————-*/
/*     Top navigation */

    //    Set the width of the dropdown menu
        @DropdownWidth:200px;

    //    Set the number of columns you want in your menu
        @numberofcolumnsindropdown:1;

    //    Set a spacing between the columns
        @spacingbetweencolumns:0px;

    //    Set the width of the top level item description
        @parentmenuitemdescription:200px;
            //    You can turn this on here (block / none)
            @showtoplevelitemdescription:none;

    //    Lets calculate the menu…
        @columnwidth:(@DropdownWidth / @numberofcolumnsindropdown) - @spacingbetweencolumns;

The @DropdownWidth value and @numberofcolumnsindropdown value will give you the overall desired width of your dropdown. If you increase the number of columns and the dropdown width, the javascript in the back-end will ensure all of your menu items line up accordingly into their desired columns.

You also have a number of other settings that can change the way your menu looks, however the above two settings should suffice.

You can find these settings in the calculate.less.css file, along with settings for widgets and general theme sizes.

9 months ago