I had a client ask a question this week, and I thought the question and answer deserved a blog post. The client is getting ready to start a new WebDev project and was asking me about “style templates” and how to view the available ones and chose one for his new project.

That turns out, as so many things do, to be a much more complicated question and answer than you would expect. Let’s start with some definitions as they related to WebDev.

Skins

The first element to select for your project is a Skin. This is done on the Skin Styles tab of the project description window.

The skin sets the general look and feel of your site, it includes a style sheet with preset WebDev and CSS styles for setting, colors, fonts, etc. for all the controls and also includes  a set of preset page templates.

Technically you can specify the skin at the page level as well,

Palette

On the same tab of the project description, you also select a palette. This is a collection of complimentary colors to use for your site. I mentioned that the Skin includes styles that define the colors, what they actually define is Palette entries, such as Text (General 1), Background (Title 3), or  Border (Button 2). This allows you to reference those Palette entries in your styles, and then easily change the colors of your site, but using a different palette or changing the color associated with one of the entries in the Palette.

WebDev Styles

This is where the bulk of your “work” will be done. For each control type (Static, entry, combobox, checkbox, table, etc) you can define/select a WebDev style, this style specifies the fonts, colors, background, borders, shading and a variety of other settings. It also refers to a “base” CSS style, we will cover that a bit more next.

CSS Styles

CSS styles are normal web CSS (Cascading Style Sheets). But before you get to excited about them, when creating your site you have to use WebDev controls to define the styles of your controls. Most of what you define on a WebDev control, gets translated into CSS for the web. PCSOFT has been making a lot of advanced toward supporting standard web technologies, and CSS is a big part of that. But you still have to work with WebDev styles for your controls, you can reference CSS styles but in my experimenting I have found that to be cumbersome and not very efficient, so for my basic look and feel of the site I just work with WebDev styles and don’t worry about defining CSS styles to reference in the WebDev styles.

Please understand I am still using CSS, and most of the settings I make on my WebDev Styles are CSS settings, by clicking on the More Settings link in the Style editor.

Which takes you to this screen where you have a incredible number of settings that you can adjust

Templates

There are actually page templates and control templates. Page templates can either be preset page templates, that are included with the skin you choose or page templates you create. Either way the page template defines the general layout of a page, and can include standard elements such as the navigation menu, logos, headers, etc.

Control templates allow you to create a specific control template for things such as a standard combobox that you use on many pages.

But how do you put all this in to use?

First of all the bad news. I suspect the original question was really asking about templates, like those that you can download from a number of sites on the web, that provide: WordPress, Joomla, Bootstrap, etc. templates. These templates tend to be a group of pages, that provide a cohesive collection of pages to create a basic “brochure” type website with a standard look and feel.

We don’t really have anything quite like that in WebDev. But if you think about it, you can easily understand why. Those templates are for creating static informational style sites. With WebDev you are more than likely creating an interactive business application style site, so there is a lot less standardization.

So how do you proceed? Well step one is to decide on a general look and feel for your site. I always recommend taking a look at some of the most popular business application sites out there. Such as Quickbooks Online, Sales Force, etc. It is important to remember we are talking about web applications, not static sites. Once you have some inspiration for what you want your site to look like the next step is to select a Skin and Palette that gets you close to that general look.

To be perfectly honest the main things I get from Skins is a starting point for a color palette and the base font settings. The preset page templates are all the same and none of them are what I use for my sites. If you want to take a look at the existing skins and preset templates, you can either open one of the smaller example sites. like WW_PreciliaTShirts, or just create a test project and create a couple of pages using the preset templates. Then simply go into the project description and change the skin and or palette and then see the effect on the pages, fonts, etc.

Tips / Tricks

Below are some random tips, tricks etc. that I have compiled from my experiences using WebDev.

• Start with a Skin that uses the font and sizing that are similar to what you want. This will prevent you from having to make so many adjustments in the next steps.
• TIP: If you want a feel for how “modern” the existing Skins are, they are actually named using the version they were released with. If you look in your Personal/Skins directory, you will for instance see that Chloe was release with v15 and Material design was release with v21
  
• Once you have found a palette that is close to the color scheme you want, then duplicate that palette and create a palette specific for the project you are working on. This will allow you to adjust the palette later and only effect this project.
  • The Elements in the palette give you some logical associations for where to use those colors. You can use them for anything in the project, but keep them in mind encase you do adjust the palette later, you don’t want unintended consequences.
• Once you have the Skin and Palette selected, the next step is to create the a page template that defines the standard layout of the site. Such has heading, footer, logo, navigation, etc. I general do this but starting with one of the preset templates and then adjusting the zones to what I want. I actually general end up with a few different page templates.
  • Base Template
    • This doesn’t have anything but the basic zones for header, footer, logo placement etc.
    • All other templates are based on this template so if I change it all the other templates are also adjusted.
  • External Template
    • For the marketing, public viewable side of the site.
  • Internal Template
    • For the application side of the site, once the user is logged in that contains the navigation etc.
  • Depending on the project, I sometimes have different templates for the Admin versus the consumer side of the site, etc.
• Once I have a page template, I then create what I call the Interface test page. This is just a page with a representation of the basic controls (Static, Edit, combobox, etc.) as well as examples of the page layout, navigation, etc. This allow me to flesh out the design with the client before doing any “real” development.
• NEVER use the standard WebDev Styles included with the skin. When you drop a control on the page it will use one of the standard styles fro that control, like EDT_Simple. The issue with this is, you can not modify these styles, so if you decide later that edit controls need bold captions or something, you would need to adjust every control individually. So as I an developing the Interface test page, I am also create by “normal” control styles, so I will select on of the standard control style that is close, tweak the settings to be exactly what I want, and then save those settings as a new Control style. This are called “project styles” instead of “skin styles” By the time I have the interface test page done I have most of my normal WebDev control styles defined as well. As I continue to develop the site more and more styles will be create for specific unique situations I come up with. But since every control in my site is based on a project style, I can adjust those project styles later and it will change all the controls based on that style.

Hopefully this has given you a general understanding of how the design elements and terminology of Webdev relate to one another. Unfortunately I don’t think it answered the originally question the way the client was wanting it to. But once you have done the leg work to define your basic layout look and feel, I think you will find the tools to allow for very efficient development.

If you really want a site that looks like one of those bootstrap templates available on the web, there are way to incorporate those designs into your site, but that is a very advanced topic and is best achieved by “rebuilding” the template into WebDev using the standard WebDev features where possible.

 

 

 

 

• WEBDEV
• WX