Content styling and templates

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!

7 Replies to “Content styling and templates”

  1. Hi,Neville,
    I am really enjoying surfulater. I use it on a daily basis. I do have likes and dislikes with both formats. I prefer the older format within the template with thicker lines between the cells. I do like the thinner lines and borders outside of the templates of the new format. I prefer the darker font from the older version but the size of the new font is good. Keep up the good work…I am looking forward to the additional templates and flexibility.
    Judy R.

  2. Hi Judy,
    Thanks for the feedback. I’ve been mulling over the best way to introduce the new styles the past few days and your comment helped me to make some decisions. You will be able to retain the current style, use my new style or make your own and switch between them at any time.

    This will add another menu item I wasn’t planning, but it gives absolute freedom, so its worth it.

  3. Congratulations Neville! This sounds like a really impressive improvement!!

    I am very much looking forward to using the multiple templates: but I think I’d really like to be able to chose different templates for the same article type at the same time. Sort of adding a defaultTemplate to the article’s data.

    That way all my graphics WebArticles could use one web template and all my software WebArticles could use a different one.

  4. I just wanted to voice my agreement with Perry’s comment on the blog here.

    There is a reference in your `content styling and templates’ posting to templates for EXISTING articles changing whenever the default template for an article-type is changed.

    IMO, this ability would certainly come in handy for some users, particularly those who have assembled a large number of articles using a template that is not ideal for them, but at some point I think there should either be the ability to a) change the default template for an article-type without causing existing articles using that article-type to change to the new default, or B) choose from a list of available template-types whenever a new article is added, and have the selection apply only to the current article.

  5. Perry & RS, thanks for the comments.

    I don’t think I’ve got the user interface sorted out correctly yet. I’ve been focusing on getting the underlying elements in place.

    Articles that are created indirectly such as from the Web or the Clipboard will need a way to specify which templates to use. For Articles created directly (Article|New Article etc.) you will simply choose from a larger selection.

    Changing the template for an existing article should just change that one Article.

    These are my current thoughts. 😉

  6. Hi Neville:

    I’ve mentioned this before somewhere, but I think Article Types should be grouped in Article Classes. I think that would help with the interface when the number grows (especially when users can create their own easily).

    Of course changing the template of existing articles would greatly benifit with the addition of muti-select in the Article Tree View. 🙂

Comments are closed.