ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Skin templates and Skins
  • Overview
  • The project includes no page template
  • The project includes a page template but you do not want to keep it
  • The project includes page templates that you want to keep
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Warning
This help page presents the steps to use skins in a project. This help page refers to projects created with WEBDEV 15 or earlier.
Overview
The skins are used to standardize the visual aspect of a site and they allow you to easily change style.
An existing project (developed with an earlier WEBDEV version for example) can be easily adapted to use the skin elements. This allows you to easily change the entire project skin or the color palette.
Some adaptations are required in the following cases:
  • your project does not use page templates.
  • the styles of the style sheet do not use the standardized names required to load the skins.
Several cases may occur:
The project includes no page template
The following method is used to adapt a project without page template:
  1. Change the general style of the project and choose one of the skins.
    1. On the "Project" tab, in the "Project" group, click "Description".
    2. Select the "Skin" tab.
    3. Choose a skin and a color palette.
  2. Create a new page template with a preset template that looks almost like the existing site.
    1. Click in the quick access buttons.
    2. The creation window appears: click "Page" then "Page template".
    3. In the window for creating a new page template, select the template of your choice.
  3. If controls are found in each page of your project, they can be grouped in the page template.
  4. Associate each project page with the created page template. To do so:
    1. Open the page in the editor.
    2. On the "Page" tab, in the "Description" group, expand "Templates" and select "List of templates used".
    3. Select the former template and click the "Delete" button.
    4. Confirm the deletion.
    5. Click the "Add" button.
    6. Choose the page template based on the skin created at step 2.
    7. Answer "Yes" to the following question: "Do you want to update the page properties from this template?". Therefore, any modification made to the skin or to the color palette of the project will be automatically applied to the template then to the page.
  5. Change the style of the controls found in the existing pages for a style found in the project skin.
  6. Reorganize the controls of each page if necessary.
The project includes a page template but you do not want to keep it
The following method is used to adapt a project without keeping the existing page templates:
  1. Change the general style of the project for one of the skins.
    1. On the "Project" tab, in the "Project" group, click "Description".
    2. Select the "Skin" tab.
    3. Choose a skin and a color palette.
  2. Create a new page template with a preset template that looks almost like the existing site.
    1. Click in the quick access buttons.
    2. The creation window appears: click "Page" then "Page template".
    3. In the window for creating a new page template, select a "Blank" base. Validate.
    4. Copy/Paste the controls found in the former template.
  3. Change the style of the copied controls for a style found in the project skin.
    1. For each control found in the template, select "Choose a WEBDEV style" from the popup menu.
    2. In the list of styles, uncheck "Project styles" to display the styles of the skin only.
    3. Choose a style for the control.
    4. Validate the window.
  4. Reorganize the template controls if necessary.
  5. Change the page template for the existing project pages. For each page:
    1. Open the page in the editor.
    2. On the "Page" tab, in the "Description" group, expand "Templates" and select "List of templates used".
    3. Select the former template and click the "Delete" button.
    4. Confirm the deletion.
    5. Click the "Add" button.
    6. Choose the page template based on the skin created at step 2.
    7. Answer "Yes" to the following question: "Do you want to update the page properties from this template?". Therefore, any modification made to the skin or to the color palette of the project will be automatically applied to the template then to the page.
  6. Change the style of the controls found in the existing pages for a style found in the project skin.
  7. Reorganize the controls of each page if necessary.
The project includes page templates that you want to keep
The following method is used to adapt a project while keeping the existing page templates:
  1. Change the general style of the project for one of the skins.
    1. On the "Project" tab, in the "Project" group, click "Description".
    2. Select the "Skin" tab.
    3. Choose a skin and a color palette.
  2. Use the project skin in each page template. For each page template:
    1. Open the page template in the editor.
    2. Select "Description" in the context menu of the page template.
    3. In the description window, select the "Style" tab.
    4. Select (if necessary) the skin and the color palette of the project by using the browse button and by choosing "None" in the windows for custom skin and for custom color palette.
  3. Change the style of the controls found in each page template of the project for a style found in the project skin.
    1. For each control found in each template, select "Choose a WEBDEV style" from the popup menu.
    2. In the list of styles, uncheck "Project styles" to display the styles of the skin only.
    3. Choose a style for the control.
    4. Validate the window.
  4. Reorganize the template controls if necessary.
  5. Change the style of the controls found in the existing pages for a style found in the project skin.
  6. Reorganize the controls of each page if necessary.
Minimum version required
  • Version 15
Comments
Click [Add] to post a comment

Last update: 05/26/2022

Send a report | Local help