User Tools

Site Tools


creating_and_adding_custom_pages

Creating and Adding Custom Pages

This tutorial provides step by step instructions for creating and adding custom pages to your Etano site. The tutorial covers 2 scenarios, creating a full width page with no left menu column, and creating a page with a left menu column.

1. Creating a full width page with no left menu column.

You'll need to create 3 files, 1 PHP file, 1 HTML file, and 1 CSS file.

The PHP file

Open your editor and copy and paste the following code:

<?php
/******************************************************************************
Etano
===============================================================================
Software by:                DateMill (http://www.datemill.com)
Copyright by:               DateMill (http://www.datemill.com)
Support at:                 http://www.datemill.com/forum
*******************************************************************************
* See the "docs/licenses/etano.txt" file for license.                         *
******************************************************************************/

require 'includes/common.inc.php';
require _BASEPATH_.'/includes/user_functions.inc.php';
require _BASEPATH_.'/skins_site/'.get_my_skin().'/lang/login.inc.php';

$tpl=new phemplate(_BASEPATH_.'/skins_site/'.get_my_skin().'/','remove_nonjs');

$tpl->set_file('content','mypage.html'); 
$tpl->process('content','content');

$tplvars['title']='My Title'; 
$tplvars['page_title']='My Page Title';
$tplvars['meta_keywords']='your, list, of, keywords'; 
$tplvars['meta_diz']='your page description';
$tplvars['page']='mypage'; 
$tplvars['css']='mypage.css';
include 'frame.php'; 

Then edit the info shown below in BOLD.

$tpl→set_file('content','mypage.html');
$tpl→process('content','content');

$tplvars['title']='My Title'; ← adds title to top of browser
$tplvars['page_title']='My Page Title'; ← adds title to top of html page
$tplvars['meta_keywords']='your, list, of, keywords';
$tplvars['meta_diz']='your page description';
$tplvars['page']='mypage';
$tplvars['css']='mypage.css'; ← adds a link to CSS file
include 'frame.php'; ← wraps the html page with the header and footer

Save it as mypage.php (make sure to include the .php extension or else your file will be saved as a .txt file by default). The upload your new PHP file to the main root directory where the index.php file is located.

The HTML file

This is very simple, open notepad or your favorite editor and leave it "BLANK" and save it as mypage.html (make sure to include the .html extension or else your file will be saved as a .txt file by default).

Then upload it to the directory folder where the other HTML files reside, which is in the skins_site/def/ folder

Now you are ready to add your content to the "mypage.html" file, which can be just standard text or you can include standard html tags and markup as well. Note: you only need to add your page content, all the header and footer HTML is included by the frame file.

The CSS file

Open your editor and copy and paste the following code:

Now copy and paste the following code:

    /* This sets the main content holder to the left of the page when no left menu is desired */ 
    #content_column1 {
    float: none;
    }

Then save it as mypage.css (once again, make sure to include the .css extension or else your file will be saved as a .txt file by default).

Then upload it to the directory folder where the other CSS files reside, which is in the skins_site/def/styles/ folder.

If you want to include any special styling to any of the content in your new page, include your CSS code in this file.



2. Creating a page with a left menu column.

You'll need to create 5 files, 2 PHP files, 2 HTML files, and a CSS file.

The main PHP file

Open your editor and copy and paste the following code:

<?php
/******************************************************************************
Etano
===============================================================================
Software by:                DateMill (http://www.datemill.com)
Copyright by:               DateMill (http://www.datemill.com)
Support at:                 http://www.datemill.com/forum
*******************************************************************************
* See the "docs/licenses/etano.txt" file for license.                         *
******************************************************************************/

require 'includes/common.inc.php';
require _BASEPATH_.'/includes/user_functions.inc.php';
require _BASEPATH_.'/skins_site/'.get_my_skin().'/lang/login.inc.php';

$tpl=new phemplate(_BASEPATH_.'/skins_site/'.get_my_skin().'/','remove_nonjs');

$tpl->set_file('content','mypage.html'); 
$tpl->process('content','content');

$tplvars['title']='My Title'; 
$tplvars['page_title']='My Page Title';
$tplvars['meta_keywords']='your, list, of, keywords'; 
$tplvars['meta_diz']='your page description';
$tplvars['page']='mypage'; 
$tplvars['css']='mypage.css';
if (is_file('mypage_left.php')) {
	include 'mypage_left.php';
}
$no_timeout=true;
include 'frame.php'; 

Then edit the info shown below in BOLD.

$tpl→set_file('content','mypage.html');
$tpl→process('content','content');

$tplvars['title']='My Title'; ← adds title to top of browser
$tplvars['page_title']='My Page Title'; ← adds title to top of html page
$tplvars['meta_keywords']='your, list, of, keywords';
$tplvars['meta_diz']='your page description';
$tplvars['page']='mypage';
$tplvars['css']='mypage.css'; ← adds a link to CSS file
if (is_file('mypage_left.php'
include 'mypage_left.php';
include 'frame.php'; ← wraps the html page with the header and footer

Save it as mypage.php (make sure to include the .php extension or else your file will be saved as a .txt file by default). Then upload your new PHP file to the main root directory where the index.php file is located.

The left PHP file

Open your editor and copy and paste the following code:

<?php
/******************************************************************************
Etano
===============================================================================
Software by:                DateMill (http://www.datemill.com)
Copyright by:               DateMill (http://www.datemill.com)
Support at:                 http://www.datemill.com/forum
*******************************************************************************
* See the "docs/licenses/etano.txt" file for license.                         *
******************************************************************************/

$tpl->set_file('left_content','mypage_left.html');
$tpl->set_var('tplvars',$tplvars);
$tpl->set_loop('search',create_search_form($basic_search_fields));
$tpl->process('left_content','left_content',TPL_LOOP | TPL_NOLOOP | TPL_OPTIONAL);

Then edit the info shown below in BOLD.

$tpl→set_file('left_content','mypage_left.html');

Save it as mypage_left.php (make sure to include the .php extension or else your file will be saved as a .txt file by default). Then upload your new PHP file to the main root directory where the index.php file is located.

The main HTML file

This is very simple, open notepad or your favorite editor and leave it "BLANK" and save it as mypage.html (make sure to include the .html extension or else your file will be saved as a .txt file by default).

Then upload it to the directory folder where the other HTML files reside, which is in the skins_site/def/ folder

Now you are ready to add your content to the "mypage.html" file, which can be just standard text or you can include standard html tags and markup as well. Note: you only need to add your page content, all the header and footer HTML is included by the frame file.

The left HTML file

Open notepad or your favorite editor and leave it "BLANK" and save it as mypage_left.html (make sure to include the .html extension or else your file will be saved as a .txt file by default).

Then upload it to the directory folder where the other HTML files reside, which is in the skins_site/def/ folder.

Now you are ready to add your content to the "mypage.html" file, which can be just standard text or you can include standard html tags and markup as well. If you're unsure try referencing other left html files as it can vary depending on what template you're using.

The CSS file

Open notepad or your favorite editor and leave it "BLANK" and save it as mypage.css (make sure to include the .css extension or else your file will be saved as a .txt file by default).

Then upload it to the directory folder where the other CSS files reside, which is in the skins_site/def/styles/ folder.

If you want to include any special styling to any of the content in your new page, include your CSS code in this file.

creating_and_adding_custom_pages.txt · Last modified: 2017/02/16 12:08 by admin