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;}
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.
Values for updating your dropdown menu in calculate.less.css
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.
Editing your image sizes
Editing your image sizes using the development tools is relatively easy. We’ve added a few lines of commented code at the end of the common.less.css file in the SDK theme, which will give you the width and height values of all images on your website. Changing these will save the values into the settings of your account, and will re-configure the images on your site.
You’ll find them looking like this:
Template.Product.Thumbnail:230,222
Template.Showcase.Thumbnail:70,70
Template.Showcase.Big.Thumbnail:370,0
Template.Showcase.Zoom.Thumbnail:600,0
Template.VariantProduct.Thumbnail:200,200
Template.Featured.Thumbnail:720,335
Template.QuickLook.Thumbnail:800,800
Template.Category.Thumbnail:265,255
Template.Logo:960,120
X value first, Y value second.
You can also configure the size of the logo you’ll be using on your website - the size that comes standard with the SDK theme is 960 x 120, but this can be changed to any size you prefer.
Image crop sizes in the SDK theme.
You can now find Google Analytics in Storefront. Add your tracking code and sign up to keep tabs on your visitor statistics.
You can find it here: Settings > SEO/Display > Google Analytics
Storefront updates
Our latest updates to Storefront include a number of bug fixes, along with a great deal of UI improvements.
- Introduction of the Storefront wizard; a simple and straight-forward wizard to run customers through the basics of setting up their Storefront. The wizard can be accessed at any time, as many times as necessary by clicking on the ‘Launch wizard’ button on the dashboard.
- Vast real-estate improvements on the Storefront interface. Whether you have a large screen, or plan to update your store on an iPad, our interface will shape itself to fit the medium.
- Faster category, manufacturer, product and order views; we’ve eliminated the need for page refreshes for most actions on these pages, so you can edit your Storefront a whole lot quicker.
- An ‘More options’ button has been added to sections with multiple actions, like products and orders, to keep the layout clean and show you the actions that you normally use.
- Live chat and system links have been shifted to the top of the page, and conveniently shrunk to maximise screen real-estate.
- You can now access your themes by clicking on the ‘Themes’ tab in the main menu, previously it was hidden in the ‘My Storefront’ menu, which has been removed.
- Those of you who use the SDK, we’ve implemented a number of improvements, and you can access the editor via the ‘Developer’ links at the top of the page.
- We’ve also tucked all section help text into a nice tooltip, placed next to the title of each section, so if you ever get stuck, simply hover or click on the help icon.
We hope that all of these updates make a significant change in the way that you use Storefront, and we’re sure it will greatly improve your workflow. There are still plenty of updates to come, so look out for more update posts in the near future.
SDK updates
Hey people. We’ve been hard at work on Storefront, specifically the SDK tools. Here’s a short list of what we’ve got in store:
- Support for external javascript and CSS for all themes
- SDK editor now supports custom widgets (look out for further documentation)
- We’ve implemented a new UI framework for our SDK editor to make things a whole lot easier for you
- Support for external javascript and CSS for widgets (that’s right, you can now add your own custom slideshows or whatever else takes your fancy)
- Theme and widget submission processes are in-place, and we’ll be opening up our development market very soon.
Our API is now powered by HMAC secured Web Service and will be ready for integration with 3rd party software packages. You’ll also soon be able to develop your own widgets based on custom store data, like products, categories, manufacturers, best sellers etc.
More to come as well, that’s just our SDK updates.
