User Manual - Themes & Design

The theme and template system is quite straight forward, allowing you to easily modify the look and feel. This section describes all necessary design aspects, including how to modify them, create your own theme, and integrate any existing website into Envrin CMS. To continue with this section you should have a working knowledge of HTML and CSS.


Theme Library

Themes provide the overall design (header, footer, images, CSS), but not the actual content of the pages. Through the Maintenance->Theme Manager of the administration panel, you can easily search through all available themes, and instantly install any of them. Through this menu, you can also easily create new themes, and even upload them to the Theme Library if you're a web designer wishing to offer / sell your designs.


Create Your Own Theme

To begin creating your own theme, first visit the Maintenance->Theme Manager menu of the administration panel, and complete the small form within the Create New Theme tab. You can select whether to assign the new theme to the public site or member's area, depending on which you're creating a design for. Once created, a new directory will exist at /themes/THEME_ALIAS/ that contains the default theme files, which are explained below.

header.tpl / footer.tpl Files

Each theme contains header.tpl and footer.tpl files, which are automatically displayed as the header and footer of all pages. These files are required, and should always be present. A couple minor requirements of these files are explained below.

  • Place the merge field ~theme_dir~ anywhere needed, which will be replaced with the appropriate path to the theme's directory. This is useful for linking to things such as CSS files, images, etc. For example, if you upload an image to /themes/THEME_ALIAS/images/logo.png, you would link to it using:
          <img src="~theme_dir~/images/logo.png">

  • Use the ~site_url~ merge field anywhere needed, which will be replaced with the installation directory of the software. Good for linking to various pages. For example, if you wanted to link to the registration page you would use:
          <a href="~site_url~/register">

  • Within your CSS, you should define default fonts for the tags: p, h1, h3, as they are heavily used throughout the default templates.
screenshot.png File

Within the theme directory, you should place a file named screenshot.png, which is 300x225 pixels in size, and shows a screenshot of the theme. This is the image people will view when browsing / searching through themes within the Theme Library, and is also the exact same size as Wordpress screenshot images.

Other than the above few requirements the design can literally be anything you would like. There are no other restrictions other than listed above for public site themes. For actual content pages within the site, please see the below section. If you are creating a new design for the member's area, please see the Member Area Themes section below for additional requirements.


Templates / Pages

Templates are the actual contents of the various pages, and can be found within the /data/tpl/ directory of the software. Within this directory you'll notice two sub-directories; /public/ which is for the public web site, and /member_area/ which is for the member's area. These directories contain a bunch of .tpl files, which are the templates / HTML code of all pages that are used. For example, the registration form can be viewed in your web browser at http://domain.com/register, and that template exists at /data/tpl/public/register.tpl. Simply open the desired .tpl files in a text editor, and modify as necessary.


Adding a New Page

You may add a new page to the site by simply creating the desired .tpl file. For example, if you wanted to add an About Us page, create a new file at /data/tpl/public/about.tpl with the contents of the page. Ensure that the first and last lines of the .tpl file are {theme.header} and {theme.footer} respectively. You can then view the new page within your web browser by going to http://yourdomain.com/about.


Executing PHP Code

You can not place PHP code within the .tpl files. Instead, if you need to execute PHP code when a template is displayed, look inside the /data/php/ directory of the software. You will notice there's a corresponding .php file for every .tpl file. Feel free to open the desired .php file and modify the code as needed. Please note, only experienced developers with PHP knowledge should modify the code. If you're adding a new page, and also creating a .php file for it, the last two lines of PHP code must always be as shown below. Otherwise, the template will not display, and you'll only get a blank page instead.

		$template = new Template();
		echo $template->parse();
	

Display Content Based on Login

It's quite easy to change the content displayed depending whether or not a user is logged in, and can be used in any theme files or templates. This can be done using {if} tags such as:

		{if LOGIN === true}
			Yes, logged in as ~username~
		{else}
			Nope, not logged in.
		{/if}
	

Merge Fields

You can display personalized information within templates through the use of merge fields, such as ~username~, or any other variable surrounded by ~ marks. When displaying a template, all keys within the $_POST and $_GET arrays will be treated as a merge field, and replaced with the corresponding value. For example, if within the PHP code you have $_POST['points'] = 642;, then you can place ~points~ merge field anywhere within the template, and it will be replaced with 642.


Member Area Themes

If you're creating a new theme for the member's area, there are a few additional requirements.

  • Within the <head> ... </head> tags you must have the ~header_tags~ merge field, which will be automatically replaced with the appropriate links to Javascript and CSS files depending on the page being displayed.

  • The <body> tag must contain the attribute onload="initializePage();", which initializes the appropriate events for things such as data tables, tab controls, etc. For example:
          <body onload="initializePage();">

  • Just under the <body> tag must be a <div> tag with the below attributes, and the contents being a "Loading, please wait" message. This element is displayed while an AJAX request is being processed.
          <div id="ajaxStatusBox" class="ajaxStatus" style="display: none;"> ... </div>

  • Just under the above <div> tag must be another <div> tag with an ID of hidden_panel, and no contents. This is used when showing a popup box.
          <div id="hidden_panel" style="display: none;"></div>

  • Last, the entire page contents must be surrounded by <div id="wrapper"> ... </div>, so ensure the opening tag is within the header file, and closing tag within the footer file. This is used to opaque the page when displaying a popup box.

style.css File

There are several standardized CSS elements that should exist in any member area theme, and are explained below. Please check the style.css (or /css/style.css) file of your new theme for an example of each CSS element.

CSS Element Description

.ajaxStatus

Small box that is temporarily displayed in the middle of the screen with a "Loading, please wait" message while AJAX requests are being processed.

.opac_body

The element ID "wrapper" is changed to this when a popup panel is being displayed, to opaque the rest of the page.

.page_section

Container that helps separate different page sections.

.section

Small bar that helps separate sections within page sections.

.usermessage_box / ul

Box that's always displayed at the top of the page, and displays any informative messages (ie. success / user error messages).

h1, h3, p

These three HTML tags are used frequently throughout all templates, and should be styled appropriately.

  • h1 = Page Title
  • h3 = Section Title
  • p = Body Font


Component Specific CSS

If you look in the /css/ directory of the software, you will see the default CSS stylesheets for the various standardized components, such as the navigation menu, tab controls, data tables, etc. If you're comfortable using the default CSS that comes with the software, nothing is required on your part, and you can skip this section. However, if you'd like to modify the CSS, simply copy over the appropriate CSS file(s) to the same location within the /themes/THEME_ALIAS/css/ directory. For example, to modify the navigation menu copy the file at /css/menu_strip/default.css to /themes/THEME_ALIAS/css/menu_strip/default.css. Modify the CSS within the new file as desired, and it will be automatically used instead of the default.


Navigation Menu

Within the default member area's header.tpl file, you will see the line:

	{function alias="display_member_area_menu"}

This tag is replaced with the navigation menu for the member's area, as defined by the Settings->Account Settings->Member Areas menu. If desired, you may modify the the CSS design via the file located at /css/menu_strip/default.css (see above). If desired, you may remove this tag, and simply create your own custom navigation menu in whatever way you want. Simply login to the member's area, and get the URL of each menu, so you know where to link to.


Integrate Existing Site with Envrin CMS

Virtually any and all sites can be easily integrated into Envrin CMS with very minimal effort. To integrate your existing site, complete the following steps:

  1. First, go to the Maintenance->Theme Manager of the administration panel, and complete the form within the Create New Theme tab to create a new theme. Select "Public Web Site" for the panel, and once created a new directory will exist at /themes/THEME_ALIAS/. Go ahead and delete the contents of this directory.

  2. Next you need to separate the theme from the website contents. The theme comprises of the actual design aspects (header, footer, CSS, images, etc), and is placed in a separate directory from the content pages. Seperate the site into a header, body, and footer sections, and save the contents of the header and footer into files named header.tpl and footer.tpl.

  3. Modify the header.tpl and footer.tpl files, and place the ~theme_url~ merge field in all places you need to link to the theme's directory. For example, if the theme has a /css/responsive.css file, you would link to it using:
          <link rel="stylesheet" href="~theme_dir~/css/responsive.css" type="text/css">

  4. Modify the header.tpl and footer.tpl files, and place the ~site_url~ merge field in all places you need to link to other pages. For example, if your site contains a /services/seo page, you would link it using:
          <a href="~site_url~/services/seo">

  5. Rename all content pages to have a .tpl extension. For example, if the website has a /services/seo.html page, the file would be renamed to /services/seo.tpl.

  6. Place the tags {theme.header} and {theme.footer} as the first and last lines of every content page. These tags will be automatically replaced with the contents of the header.tpl and footer.tpl files you previously created. Also place the ~theme_dir~ and ~site_url~ merge fields where ever needed within the content pages.

  7. Last, upload the theme itself to the /themes/THEME_ALIAS/ directory on the server. Then upload the content pages to the /data/tpl/public/ directory.

  8. That's it! Visit the installation directory of Envrin CMS (eg. http://yourdomain.com/), and you should see your new web site and theme.