Modify the Application Template
Objectives:
- Understand how the application template works
- Modify the template to customize the look and feel of your application
- Customize the home page for your application
Estimated Time to Complete: 20 minutes
Skill level: Beginner
When you created your application, an application template was automatically added for you. The template provides a common color scheme and style sheet for your application, as well as a built-in navigation scheme. By default, each view in your application is displayed within the template.
The template file, template.view, is located in the Themes folder at the root of the File Directory. The template file is a view file, so you can modify as you would a view, and any view can be used as a template.
The Themes folder also contains the default.css file, the cascading style sheet that defines the styles used by your application. You can modify the default.css file to change these styles if you like.
Change the Application Title
You may have noticed that a title for your application appears in the upper left corner of the application template. The default title is based on the name of your application, but let's change it to something more friendly and informative.
* To change the application title, follow these steps:
- Within the Designer, navigate to template.view in the Themes folder. You can navigate to it using the File Directory. Or, select the Page region of the default.view file in the Books folder, and click the Go To button above the Template property.
- Click on the title text.
- Set the HTML property of the element to Fremont Book Club.
Edit the Tab Text
The tabs that appear on the template are Home and Books. Let's change Books to something more descriptive.
* Follow these steps to change the text of the Books tab:
- Click on the Books tab.
- Set the HTML property to Schedule.
 |
The DataWeb ThemePark provides color schemes that you can import into your application.
|
Customize the home page layout
The Home tab in your template.view file links to your home page, which was automatically created for you with your application. The home page is named default.view and lives in the root folder of your application. Let's modify the home page now to further customize your application.
* Follow these steps to navigate to your home page:
- In template.view, select the Home tab.
- In the Properties pane, click the Go To button above the Link to Page property to navigate to your home page in the Designer.
On the home page, you'll notice a Log On box and an Admin box. These were added for you by default when you created your application. Since you will be the only administrator of the site, let's remove these component boxes to make space for other content.
* Follow these steps to remove the component boxes:
- Click anywhere on the body of the page to activate the selection indicator at the bottom of the page. Click the <ws:content> tag to select the column that contains the component boxes.
- Click Delete.
|
If you're using Internet Explorer 5.5, you can edit the text directly on the page in the Designer. |
Change the template for the home page
Now you've deleted the component boxes, but the text on the home page is not left-justified. The home page is using a two-column template, so that the column on the left is preserved even after you delete the component boxes. Let's change the template for the home page now.
* To change the template for the home page, follow these steps:
- Click the top of the view to select the page region, or click the <html> tag in the selection indicator at the bottom of the view.
- Change the Template property setting to template.view.
Customize the text on the home page
Next, let's customize the text on the home page.
* Follow these steps to modify the home page text:
- Display the home page (default.view) in the Designer.
- Select the text that reads "Your Headline Here". To bring up a bigger window for editing, click the wizard icon by the HTML window in the property pane.
- Type Welcome to the Fremont Book Club.
- Click Finish.
| 
