Bit by bit I’m working on making it easier for folks to create their own Surfulater article templates. Once I’ve finished laying the groundwork and updating the existing styles and templates I’ll be ready to put a release out and write a strep-by-step guide to making your own templates. This is all a precursor to having template editing capabilities built-in to Surfulater.
The first step in this process has been to review the styles that are currently used by the templates and ensure they are sufficient to cater for the varied templates you are likely to want to create. This requires some guess work on my part as my crystal ball is currently out for repairs. With some guidance, I’ve refined and I’d like to think improved on the current look. By styles I’m referring to things like borders, fonts, margins and the like.
These images show what I’ve produced so far. The main differences you will see include a thinner border around the record, thinner more subtle borders between cells, the use of different colored borders, a different and smaller font used for field labels, and the focus rectangle and edit background color going all the way to the edge of the cell.
New look – plain
Current look – plain
New look – with focus
Current look – with focus
New look – editing
Current look – editing
The differences are subtle but I feel offer a cleaner and tighter look. I’m undecided about changing the color of the field label text. Of course this is something you can change, but seeing that most people won’t bother, a sensible default is needed.
These screen shots show a Folder, which is all I’ve worked on so far. However I’ve updated the code so that article and folder templates can use different styles.
The final screen shot I want to show is with the Content Elements set to hide Field Labels and Edit Pencils. With these settings in the current release you loose ability to collapse and expand articles as the [+] [-] image disappears. It also isn’t all that clear where one record ends and the next one starts, when you are viewing all articles in a folder. To resolve both of these issues I’ve added a new narrow column that includes the expand/collapse image and runs the full height of the article. This color alternates from article to article, making the visual separation much clearer.
I have to say that I find writing CSS and HTML a frustrating experience. It just isn’t something I do enough of, for it to become second nature. I’m also graphically challenged, which doesn’t help. With that in mind if anyone knows of any designers with a keen eye and good CSS skills, I’d welcome being put in contact with them.
From here I’ll be enhancing the template system to enable you to use multiple templates for each individual type or category of template. For example you will be able to have say three different templates with completely different layouts for the Web Template and switch between them at any time. Existing articles will be displayed using whatever template is selected at the time. When a new article is created that uses the Web Template, the current template from the three available will be used. This not only lets you have a custom layout and look, but more importantly it lets you customize the fields that are used. For example you may want to add some new fields and remove or rename some of the default fields. All with the flexibility of switching templates for content that already exists.
Ok I’m done. Do let me know what you think of the new styles I’ve shown above. Maybe you like things just the way they are now!