Difference between revisions of "Themes and Templates"

From aMember Pro Documentation
Jump to: navigation, search
(Created page with "== Templates Syntax == aMember Pro v4 uses PHP-syntax based templates, like ones used in [|Zend Framework's Zend_View] or templates used in WordPress. == Finding the templates =...")
 
Line 10: Line 10:
 
;application/default/views/ : '''user-side''' templates
 
;application/default/views/ : '''user-side''' templates
 
;application/default/views/admin : '''admin-side''' templates
 
;application/default/views/admin : '''admin-side''' templates
 +
 +
;application/default/themes : '''user-side''' themes
 +
;application/default/themes-admin : '''admin-side''' themes
 +
 +
== Themes ==
 +
aMember Pro allows you to create a theme. You can copy any template, image or CSS from ''application/default/views'' folder to your theme folder and it will override default theme. Of course, it is effective only when your custom theme is enabled.
 +
It is recommended way to customer look&feel of aMember Pro, as your theme will not be overwritten by upgrades and it is easy to determine which exactly files were modified.
 +
 +
== Create your own theme : step by step ==
 +
In this quick tutorial we will describe how to create new theme named ''mysite''
 +
# Using your favorite FTP client, go to folder '''application/default/themes/''' and create folder '''mysite'''
 +
# (optional) create an html template file '''layout.phtml''' in the '''mysite''' folder
 +
<source>
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
<head>
 +
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
    <title><?php p($title) ?></title>
 +
    <?php $this->printLayoutHead(); ?>
 +
</head>
 +
<body>
 +
<div class="am-body">
 +
     
 +
<?php include $this->_script('_top.phtml'); ?>
 +
 +
<?php if (empty($this->layoutNoTitle)): ?><h1><?php echo $title ?></h1><?php endif; ?>
 +
<!-- content starts here -->
 +
<?php echo $content ?>
 +
<!-- content ends here -->
 +
 +
Here is a sample of theme-based image
 +
<img src="<?php echo $this->_scriptImg('large-alert.png'); ?>">
 +
and you can "override" base images too.
 +
 +
</div><!-- end of div.am-body -->
 +
 +
</body></html>
 +
</source>
 +
 +
This html contains the following important elements:
 +
  ; <?php p($title) ?> : prints page title to HTML header
 +
  ; <?php $this->printLayoutHead(); ?> : prints necessary header codes to HTML header
 +
  ; <div class="am-body"> ... </div> : must be outside of your page where you embeds aMember content
 +
  ; <?php include $this->_script('_top.phtml'); ?> : includes aMember top page items like language switch, login, logout and member menu items
 +
  ; <?php if (empty($this->layoutNoTitle)): ?><h1><?php echo $title ?></h1><?php endif; ?> : conditionally displays page title
 +
  ; <?php echo $content ?> : most important - displays aMember inner page content
 +
  ; <?php echo $this->_scriptImg('large-alert.png'); ?> : (optional) displays an image '''large-alert.png''' that you may upload to '''application/default/views/mysite/public/img/large-alert.png'''

Revision as of 08:06, 5 October 2011

Contents

Templates Syntax

aMember Pro v4 uses PHP-syntax based templates, like ones used in [|Zend Framework's Zend_View] or templates used in WordPress.

Finding the templates

aMember Pro templates are located in the following folders:

application/default/views/public/img/ 
Images
application/default/views/public/css/ 
CSS files
application/default/views/public/js/ 
JavaScript libraries
application/default/views/ 
user-side templates
application/default/views/admin 
admin-side templates
application/default/themes 
user-side themes
application/default/themes-admin 
admin-side themes

Themes

aMember Pro allows you to create a theme. You can copy any template, image or CSS from application/default/views folder to your theme folder and it will override default theme. Of course, it is effective only when your custom theme is enabled. It is recommended way to customer look&feel of aMember Pro, as your theme will not be overwritten by upgrades and it is easy to determine which exactly files were modified.

Create your own theme : step by step

In this quick tutorial we will describe how to create new theme named mysite

  1. Using your favorite FTP client, go to folder application/default/themes/ and create folder mysite
  2. (optional) create an html template file layout.phtml in the mysite folder
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title><?php p($title) ?></title>
    <?php $this->printLayoutHead(); ?>
</head>
<body>
<div class="am-body">
 
<?php include $this->_script('_top.phtml'); ?>
 
<?php if (empty($this->layoutNoTitle)): ?><h1><?php echo $title ?></h1><?php endif; ?>
<!-- content starts here -->
<?php echo $content ?>
<!-- content ends here -->
 
Here is a sample of theme-based image
<img src="<?php echo $this->_scriptImg('large-alert.png'); ?>">
and you can "override" base images too.
 
</div><!-- end of div.am-body -->
 
</body></html>
This html contains the following important elements:
  ; <?php p($title) ?> : prints page title to HTML header
  ; <?php $this->printLayoutHead(); ?> : prints necessary header codes to HTML header
 ;
...
 : must be outside of your page where you embeds aMember content
  ; <?php include $this->_script('_top.phtml'); ?> : includes aMember top page items like language switch, login, logout and member menu items
 ; <?php if (empty($this->layoutNoTitle)): ?>

<?php echo $title ?>

<?php endif; ?> : conditionally displays page title
  ; <?php echo $content ?> : most important - displays aMember inner page content 
  ; <?php echo $this->_scriptImg('large-alert.png'); ?> : (optional) displays an image large-alert.png that you may upload to application/default/views/mysite/public/img/large-alert.png