Shortcuts

The template includes a set of shortcuts tabs on the left of the screen (right if the class reversed is added to <body>). The syntax is quite simple:

<!-- Side tabs shortcuts -->
<ul id="shortcuts" role="complementary" class="children-tooltip tooltip-right">

	<!-- Active shortcut -->
	<li class="current"><a href="./" class="shortcut-dashboard" title="Dashboard">Dashboard</a></li>

	<!-- Background shortcut -->
	<li><a href="#" class="shortcut-messages" title="Messages">Messages</a></li>

	<!-- Disabled shortcut -->
	<li><span class="shortcut-notes" title="Notes">Notes</span></li>

</ul>

Note: the classes children-tooltip and tooltip-right are here to enable tooltips (see related section for more details), you may remove them safely if you do not want to use those tooltips.

Icons

The template includes a set of 8 icon classes for most uses:

These icons are served using an image sprite (to reduce the number of file requests), either at standard resolution or at high resolution depending on the device.

Add new icons

If you need to add new icons to the template, you need to add them to the image sprite. Here is a quick guide:

In Photoshop
  1. Find a new icon at resolution 96x96, and idealy a down-sized one of 48x48 (if not available, just resize the big one)
  2. In the template package, open file Shortcuts.psd
  3. You may then do one of the following:
    • Replace an existing icon you don't need
    • Add a new icon line:
      1. Go to menu Image / Canvas size..., and add 140px at the bottom of the image (make sure you clicked one of the upper squares in the position setting)
      2. In the tools panel, find the Slice selection tool (if not visible, hold click on the crop tool), and double click on the large slice, then add 140px to the height
      3. Same thing for the small slice, but this time just add 70px
      Each icon line should be 272x140px for the hi-res icons, and 136x70px for the standard icons
  4. Import/paste your new icon and position it in the first column (use other icons to find correct position)
  5. Duplicate you icon an position it on the side of the first one, in the second column
  6. Select back your first icon (find the corresponding layer) and go to menu Image / Adjust / Desaturate: the icon is now only in grey
  7. Repeat the last three steps for the standard size icon
  8. Go to menu File / Save for the web, select the big slice and save it to the directory img/highres/shortcuts.png
  9. Repeat for the small slice, and save it to the directory img/standard/shortcuts.png
In css/style.css
  1. Find the section relative to shortcuts (you may just search '#shortcuts')
  2. After the existing icons declaration, insert your own icon class, and set the correct background-position
  3. Repeat a few lines below but this time add span to your class name
  4. If you replaced an existing icon, you may just rename the class from the previous icon
In css/768.css
  1. Insert your own class again twice, around lines 234 and 344

If you added or removed a row of icons, you must also edit the following file:

In css/2x.css
  1. Find the section relative to shortcuts links (you may just search '#shortcuts > li > a')
  2. Change the background-size property to match the standard resolution file dimensions