I was creating a template the other day and found a few things that copy/paste commands would help with. I was testing out the system by creating a Football Roster style template. I'd just added the ability to change the opacity on an elements background, and wanted to create a basic template to see how it looked.

After I'd made it and went to check it out, I realised the black text didn't look so good. The template has a bunch of fields, and it was pretty frustrating changing each one, especially when I wanted to change the font color, size and weight for each one, each time. If you know what you want from the beginning you can easily just clone a base element so they are all the same, but if you change your mind later, there was nothing to make the task easier.

I wanted to add keyboard shortcuts to the workshops, and also wanted a way to copy the formatting of an element and paste it too another. I had in mind a similar functionality to the format paste thingy from excel, but wanted to be able to copy some of the formatting, not just all. So I've come up with a system that lets you copy certain groups of formatting, and combine multiple copies as well.

The template workshop already splits formatting into logical groups such as fonts, background, padding, alignment, position, size and borders. So I assigned a key to copy each one seperately. I also wanted a way to combine these copy commands, so the control key is used as a modifier that adds the copied format to whatever has already been copied. This then lets you combine different formats, even from different elements, and then paste them to another element. Combined with the TAB key moving through elements, it seems to make for a pretty quick way to change a lot of fields.

I'm going to use this a bit more to see if its usable, and not too confusing. I'm a little bit worried that it may not be that intuitive to use. I'll be using it a bit more when I create some templates next week, so hopefully I'll get a better feel for it then.


I've added the full list of keyboard shortcuts below:

Template shortcuts
The following shortcuts work when the template has been selected by clicking on any element or the template background:
[ tab ] - cycles through elements.
[ shift ] + [ tab ] cycle backwards through elements.
[ g ] - Show/hide template grid.
[ u ] or [ z ] - Undo.
[ r ] - Redo.

Element shortcuts
The following shortcuts work on the currently selected element:
[ arrow key ] - Move element 1 pixel in the arrow direction (Up, down, left or right).
[ delete ] - Remove the element from the canvas
[ a ] - Copy all formatting.
[ b ] - Copy the background formatting.
[ c ] - Add a clone of the currently selected element to the template.
[ d ] - Copy the position & alignment formatting.
[ e ] - Copy the border formatting.
[ f ] - Copy the font formatting.
[ h ] - Copy the height.
[ p ] - Copy the x and y position.
[ s ] - Copy the size (height and width).
[ t ] - Copy the title.
[ v ] - Paste whatever is currently copied.
[ w ] - Copy the width.
[ x ] - Copy the x position.
[ y ] - Copy the y position.

Element shortcut modifiers
[ ctrl ] + [ arrow key ] - Move element 10 pixels in arrow key direction.
[ ctrl ] + [a, b,d,e,f,h,p,s,t,w,x,y] - Adds the copied format to the previously copied format. eg, press [ h ] to copy the height, then press [ ctrl ] + [ w ] to add the width. Select another element and press [ v ] to paste both the height and width to it. Do it as many times as you need, across multiple elements.