Sidebar

startup_tutorial_and_checklist:design_configuration:specific_html_elements_pre_v71:design_menu

Design Menu

The software's Design Menu gives you the ability add, edit, upload, and delete files and folders that are used by the software to display content on the site. For the purposes of this tutorial, we will just discuss how to access and edit the default software's design related files. In your admin panel, click on the DESIGN menu in the ADMIN MENU. You will see several submenus under DESIGN. The first time you access the DESIGN menu, you will need to go straight to Template Sets.

The software comes with a Default Template Set. However, this template set is not editable. One reason for this is so you can recall the original template files at any time should you need to reset any of your edited templates. See Default Template Set - do not change! for a full explanation.

You will see a button named Create your Main Template Set. Click on this button to generate a working template set that will be built off of the software's default template set. Essentially, you are creating an exact copy of the default template set to work with1). After clicking the button, you will see a popup window which allows you to name your new template set. By default, the field is populated with the text my_templates. You can use that text, or enter your own. For this tutorial, we will reference your newly created template set as my_templates. Click the button and you will have a working template set.

You're now ready to get started. You may notice in the top right hand corner of the screen that you are currently in the Standard Design Mode. We recommend that you stay in this mode for simplicity. The Advanced Design Mode will present you with additional files and controls that will typically be used by programmers only.

Click on the Edit Templates button for your new template set and you should see a page similar to the image below:

The two main folders within any template set are "main_page" and "external".

You will spend most of your time within the "main_page Templates" folder, as this is where the software's templates (.tpl files) are located. You will see that file names for each .tpl will match closely to the page they are assigned to within the software.

Now click on the "external" folder. This folder contains your software's css (stylesheet), javascript and images files.

Click on "main_page Templates" to return to the page that displays your software's .tpl files. Click on basic_page.tpl so that its checkbox is now checked. Then, click the View/Edit button down below. You will be taken to a page that allows you to edit the basic_page.tpl html by using a variety of options. Don't worry about the content for now, as we are just trying to show you where to go to edit a template.

In a nutshell, that is how you will access your template set(s) and prepare to edit your content. Through the rest of this tutorial, we will discuss the layout of the software's main pages and give you a running start on how to change things up.

<< Back to Design Basics Home || Continue to the Basic Page >>

1)
Technically it is not an "exact copy", as it does additional things to the template set that are needed to make software updates a lot easier. So don't create a copy of the default template manually using FTP or other means, always let the software create one for you using the Create Main Template Set tool.
startup_tutorial_and_checklist/design_configuration/specific_html_elements_pre_v71/design_menu.txt · Last modified: 2014/09/25 16:55 (external edit)