I just finished making the D&D Character Sheet template that I've wanted to do for a while. This was actually one of the first template ideas I had after leaving my Character Sheet at home too many times . I wanted a place to put a nice looking character online, so that I could get to it.

Well, here is a mock character I've added just to try out the template. If you'd like to use this one yourself, head on over to widgely and create one.

Anyway, here it is :

Click here to view on widgely.com

Well, about 2 weeks of intensive programming and testing has seen me complete 2 new features for Widgely that I've wanted to do for a while, Template styles and a Rich Text Box Element.

Firstly I'll talk about styles, why I made them, how they are used and what you could use them for. I'll cover the Rich text box in another post, when I get some time

When I started this project, I had this image in my mind about how people would style their content using the site. I wanted them to be able to use a template, but if they didn't like the way it was laid out, or the colors, or whatever, they could just create their own style to override the default one, or use someones else's style. I pictured a drop down list of multiple styles, made by a bunch of different people, which when chosen, changed your contents look straight away.

Now, I'm not sure if I succeeded in making the actual style workshop as user friendly as I'd like, it is definitely a work in progress, and one I'll be improving more and more, but it is still fairly simple to create a new style for an existing template. As for changing styles on a piece of content, that couldn't be simpler.

Changing styles for your content
To change the style that your content uses to display, you just need to go to your home, and click the "view" link for the content you want to style.



You should now see you content displayed, with a few options above it. There is a drop down list of available styles, and a box with the embed code needed to place the content on your website. Choosing a new style using the drop down box will change your content straight away. You can click the "Make this style the default" link to make sure the content is always viewed with the current style.



The embed code area contains the code you can use to embed the content on your website. It uses the currently selected style as the style to embed. The copy code link on your home page will always use the default style you have for the content.

I made this template for my wife, as one of her colleagues was leaving. They were off to London, so I put an appropriate image in the background.

Ive made a mock one here to show - this ones for Ronaldinho from FC Barcelona, who will probably be leaving next season. Ive added all the team-mates I could think of. It would be interesting to see which ones would actually go the farewell lunch

You can also view the finished document at the widgely site here where you can change to the other styles i've created.

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.