Guest User - Log In

Frequently Asked Questions

How do I add my logo at the top, change the background photo, and customize my website template?

The difference between templates and content

It's important to understand the difference between your website's template and its content. Take a look at the images below:

This is how your new website might appear to a visitor

Green: Template area; Pink: Page content

The pink content area is what is unique to each page. This is the content that you edit when you make changes to your website. The green template area remains uniform throughout the site, and does not change from page to page.

The benefit is that the template, once chosen, cannot be modified (or destroyed by careless editing) through the usual page editing process. Because the website editor only affects the pink area, you can't modify it without changing templates or editing your template.

Changing your template

The easiest way to change the way your site looks is to switch to a different template:

  1. Log in to edit your website
  2. Open the Settings section
  3. Find the Template dropdown menu
  4. Choose a different template name and click Save
  5. Open your website in another browser tab, or if it's already open, click your browser's Refresh button to view the new template

Replacing your template's images

The next easiest way to modify your chosen template is to replace the images in it. For example, you may want to replace the top image with your logo. These steps will require a basic understanding of photo editing and browser usage. Generic guidelines are provided:

  1. Open the Admin-Tools section
  2. Click cwsoft-addon-file-editor
  3. Click the List of available templates to expand it
  4. Click on the name of the selected template (e.g. "Nautica02 Liquid")
  5. A list of the template's files will be shown
  6. From here, you can download an image to your computer and modify it (e.g. in Photoshop)
  7. Keep the same dimensions when editing an image, unless you know what you're doing!
  8. Upload the image and overwrite the old one
  9. Refresh the page in your browser to see the results -- bear in mind that template changes may take a few minutes to show up

These instructions describe a WebsiteBaker addon module called CWSoft Addon File Editor. If you don't already have it, this addon can easily be installed through the Add-ons section when logged in to your website.

Modifying an existing template (CSS/HTML/PHP)

If you understand HTML, you can modify the template in any way you want. WebsiteBaker's powerful templating system allows any design to be implemented in one single file, in a very easy-to-understand PHP markup (which you can simply avoid if you're not comfortable with).

All of the template files can be modified using the built-in editor provided by the CWSoft Addon File Editor mentioned above. The editor even provides syntax highlighting. The primary files you will want to edit are:

  • index.php (The main template file, consisting of HTML and PHP code)
  • style.css (Or similar name; controls the CSS stylesheets for the template)

NOTE: Please be aware that caching modules in use on the server may result in delayed changes to template files, particularly CSS files. Changes to the template may take several minutes to be seen through your browser. You can mitigate this delay by preparing your template files locally, then applying the changes once they are ready.

Those who understand CSS can take things a huge leap further and modify the template stylesheet for enhanced customization and layout tuning. CSS makes it much easier to apply changes to all text content on your site. For example, if you find yourself changing font sizes in the editor every time you create a page, then you would greatly benefit from using CSS to define how you want the text on every page to look. Then you won't have to manually change it every time, because it will be perfect on every page. By modifying images and performing minor HTML or CSS tweaks, a template can be transformed into a whole new design that you won't even recognize.

For the skilled PHP developer who understands HTML, CSS, and PHP, WebsiteBaker is a dream come true -- a simple but powerful engine that can be customized in limitless ways to display content blocks in any way you wish. PHP completes the skill set to bring a template to the next level -- but it isn't necessary to edit a website template.

Zebradots template design services

Configuring your template is a one time, once-and-it's-done process. After you get it looking nice, you won't be changing it after that. It's the page content that you will be modifying, not your template.

For this reason, it may make sense for you to enlist the help of Zebradots' professional graphic designers to construct a template for you using your logo or photo to give you a brand identity, or an attractive interface for your organization's website. Let us know if you're interested in having us produce a custom template for you.

 Last updated Mon, Oct 8 2012 7:00am