Customizing the Site Theme

From ZebraDots Support

Jump to: navigation, search

Contents

[edit] Overview

You can customize your ZebraDots Website by altering a few files. The level of customization you wish to achieve can be as minor as editing a few images, or as major as writing a custom theme using HTML and PHP code. There are no limits to what you can do with your ZebraDots website, other than your imagination.

[edit] Important Note

ZebraDots Website 2.0 was not designed to create themes, but rather to allow you to edit a themed website. The information provided on this is provided as a guide for those who are comfortable and familiar with certain basic web editing skills. ZebraDots cannot provide technical support for PHP, HTML, CSS, photo editing software, or any other topic mentioned here − if you are not familiar with these topics, we recommend you select an existing theme, rather than modifying a new theme.

As with anything, the level of customization you wish to achieve is up to you. Those with a working knowledge of PHP, HTML and CSS will have absolutely no problem customizing their themes in any way they choose. Some customizations are trivial − while other customizations may require a level of knowledge that you aren't yet ready to tackle.

This document uses the term theme and the term template interchangeably.

[edit] What Theme Am I Using?

Before you start editing, you need to find out which template you are using. To determine the template that your website is using:

  1. Log in to The Website Manager
  2. Click the Edit Website icon
  3. Click Settings
  4. Scroll down the to "Default Settings" section and see the value for the Template field

(Please note that you can set any individual page to use any template you choose, but this is the default template for all pages, so this is the one we will assume you want to edit.)

[edit] Accessing Your Theme's Files

Your website is a collection of files that reside on a hosting server. Inside this group of files is a folder called templates. The templates folder contains may folders, each named after a separate template.

For example, if your template is allcss, then you will find the files for your template in this folder:

  • templates/allcss/

To edit these files, we will use the built-in file explorer:

  1. Ensure that your popup blocker is disabled
  2. Log in to The Website Manager
  3. Click the File Explorer icon to see your website's files
  4. In either the left or the right pane, click on the templates folder to view the list of installed themes
  5. Click on the name of the template you are currently using
  6. You are now viewing the files that your template is defined by

This folder may contain subfolders as well, such as an images folder that contains all of the images your template was built with.

[edit] Alter the Existing Images (Easy)

This is the easiest way to modify the appearance of your website.

  1. Follow the instructions above to access the folder that contains the image you wish to edit
  2. Click on the image name to confirm to view the images
  3. Determine which image is the one you want to edit
  4. Click the Download icon (a down arrow) next to the name of the target image, and save the image on your Desktop (or in some other location of your choice)
  5. Open Photoshop, The Gimp, or any other photo editor you wish, and then load the image file into the editor
  6. Make your changes to the image, but be careful not to change the dimensions (the pixel size) of the image because this can break your template
  7. Save over the existing file, making absolutely certain that you used the same exact name as the original file you downloaded from the file explorer
  8. Return to the file explorer's menu bar, and click File > Upload
  9. Click Browse and select the newly-edited file that you saved over
  10. Check the Overwrite box and then click Save + Exit
  11. The file will be uploaded and will overwrite the existing image
  12. In your browser, force a refresh, e.g. by pressing F5 or holding SHIFT and clicking the Refresh button
  13. You should see the page reload, and the image you edited should be replaced with the new version that you created

If the image did not change, ensure the following:

  1. Make sure you used the same exact filename − check the directory to see that you didn't upload a file under a very similar name
  2. Click the image from within the file explorer to confirm that it is actually the image you're expecting
  3. Are you sure that your image editing application overwrote the same exact filename you downloaded?
  4. Make certain that you checked the Overwrite box, or else the file will not be overwritten when it is uploaded
  5. Make sure you are viewing the same template that you are editing

This procedure, when executed correctly, works perfectly. If you continue to have trouble, please carefully reread these instructions, and thoughtfully consider each step.

[edit] Change the CSS Stylesheet (Medium)

This is an advanced method of altering your website's appearance. Usually background colors, font colors, font sizes, link colors, and many other settings are controlled by a Cascading Style Sheet, or CSS file. While this method is fairly straightforward for those familiar with CSS and HTML, it can be tricky for beginners.

  1. Follow the instructions above to access the folder that contains the template you wish to edit
  2. Locate the file that contains the stylesheet definitions − usually this file is titled style.css or stylesheet.css (Although it can have any filename, it will usually have the .css extension)
  3. Click the Edit icon (a pencil) next to the stylesheet file
  4. A popup window will appear containing the stylesheet
  5. Click the Text tab
  6. Edit the stylesheet and modify any definitions you wish to change
  7. Click the Exit button to save changes and close the window
  8. Open the website in a separate browser to preview your changes − force your browser to refresh by pressing F5 or hold SHIFT and click the Refresh button (If you don't force the browser to refresh, it will often use the cached version of the stylesheet already in its memory, rather than loading the new version)

ZebraDots Technical Support cannot provide assistance on making the elements of your website appear in a certain way. Every browser interprets HTML and CSS stylesheets differently; this is why standards-compliant browsers are preferred, and creating websites that are identical on every browser is nearly impossible. The art of CSS can be very difficult for beginners, so a CSS reference is a great start.

[edit] Edit the Template File (Advanced)

Modifying the template file is an advanced method of customizing your website's appearance. Templates are a mixture of HTML and PHP, and a wrong move can render your site inaccessible if it generates a fatal error. This method of customization is recommended only for advanced users who are comfortable with web development, although anyone willing to learn can do it. Often, the best way to learn is by jumping right in.

CREATE A BACKUP! Nothing can replace a backup. When you realize you need one, it's usually too late, so create a backup of any files you intend to edit right now!

  1. Locate the template file, usually titled index.php
  2. Use the same methods described above for editing the CSS stylesheet file to make changes to the template file
  3. To remove the attribution to ZebraDots, remove the text in the "index.php" file that reads Created with ZebraDots Software but be careful not to remove any of the HTML tags that are part of the template − if you do not understand what these tags mean, please see this tutorial

[edit] Create a New Template (Advanced)

Advanced users may wish to create a new template folder and copy the files from an existing template into the new folder, to prevent overwriting an existing template. This allows you to edit the site without fear of affecting the existing templates.

If you create a new template:

  • Be sure to edit info.php to reflect the template's new name and location information
  • You may need to open your website's edit mode, click Settings, click the Show Advanced Options button, at the bottom, click Reload Add-ons, check the Templates box, and click Reload to detect the new template you have created − if it doesn't appear in the list of templates, then make sure you've edited info.php and given the new template a unique name, and try again to reload the templates

[edit] Learning More

While ZebraDots cannot provide support or training for using custom HTML and CSS, there are many resources on the net that do:

Retrieved from "http://support.zebradots.com/help/Customizing_the_Site_Theme"
Views
Personal tools