Difference between revisions of "Themes and Templates"

From aMember Pro Documentation
Jump to: navigation, search
(Create your own theme : step by step)
m (Spelling, wording, grammar.)
Line 15: Line 15:
  
 
== 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.  
+
aMember Pro allows you to create a theme. You can copy any template, image or CSS from the ''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.
+
It is the recommended way to customize the look and feel of aMember Pro, as your theme will not be overwritten by upgrades and it is easy to determine exactly which files were modified.
  
 
== Create your own theme : quick todo ==
 
== Create your own theme : quick todo ==
Line 22: Line 22:
 
* Go to ''aMember CP -> Setup'' : enable ''"bob"'' theme
 
* Go to ''aMember CP -> Setup'' : enable ''"bob"'' theme
 
* Create file ''amember/application/default/themes/bob/theme.css'' and looking at ''amember/application/default/views/public/css/reset.css'' and ''amember.css'', add custom styles to the ''theme.css''.
 
* Create file ''amember/application/default/themes/bob/theme.css'' and looking at ''amember/application/default/views/public/css/reset.css'' and ''amember.css'', add custom styles to the ''theme.css''.
After each step control results by looking at user pages.
+
After each step, check the results by looking at user pages.
  
 
== Create your own theme : step by step ==
 
== Create your own theme : step by step ==
In this quick tutorial we will describe how to create new theme named ''mysite''. Theme name must be lowercase.
+
In this quick tutorial we will describe how to create a new theme named ''mysite''. The theme's name must be lowercase.
 
* '''STEP 1.''' Using your favorite FTP client, go to folder '''application/default/themes/''' and create folder '''mysite'''
 
* '''STEP 1.''' Using your favorite FTP client, go to folder '''application/default/themes/''' and create folder '''mysite'''
 
* '''STEP 2.''' Create an html template file '''layout.phtml''' in the '''mysite''' folder
 
* '''STEP 2.''' Create an html template file '''layout.phtml''' in the '''mysite''' folder
Line 69: Line 69:
 
; <?php p($title) ?> : prints page title to HTML header
 
; <?php p($title) ?> : prints page title to HTML header
 
; <?php $this->printLayoutHead(); ?> : prints necessary header codes to HTML header
 
; <?php $this->printLayoutHead(); ?> : prints necessary header codes to HTML header
; <nowiki><div class="am-body"> ... </div></nowiki> : must be outside of your page where you embeds aMember content
+
; <nowiki><div class="am-body"> ... </div></nowiki> : must be outside of the page where you embed aMember content
 
; <?php include $this->_script('_top.phtml'); ?> : includes aMember top page items like language switch, login, logout and member menu items
 
; <?php include $this->_script('_top.phtml'); ?> : includes aMember top page items like language switch, login, logout and member menu items
 
; <nowiki><?php if (empty($this->layoutNoTitle)): ?><h1><?php echo $title ?></h1><?php endif; ?></nowiki> : conditionally displays page title
 
; <nowiki><?php if (empty($this->layoutNoTitle)): ?><h1><?php echo $title ?></h1><?php endif; ?></nowiki> : conditionally displays page title
Line 75: Line 75:
 
; <?php echo $this->_scriptImg('large-alert.png'); ?> : (optionally) prints URL of image '''large-alert.png''' that you may upload to '''application/default/views/mysite/public/img/large-alert.png'''
 
; <?php echo $this->_scriptImg('large-alert.png'); ?> : (optionally) prints URL of image '''large-alert.png''' that you may upload to '''application/default/views/mysite/public/img/large-alert.png'''
  
* '''STEP 3.''' Create a file '''application/default/themes/mysite/public/css/theme.css''' and put the following lines inside:
+
* '''STEP 3.''' Create a file '''application/default/themes/mysite/public/css/theme.css''' and put the following lines inside your code:
 
<source language="css">
 
<source language="css">
 
body { font-size: 16pt; background-color: lightred; }
 
body { font-size: 16pt; background-color: lightred; }
Line 82: Line 82:
  
  
'''Congratulations! Your new theme created!''' If you open any of user-side pages, you will see it uses bigger text size, and red background color. Now, as you've got idea how to create templates, you can start real customization of your theme - change layout template as you want and change CSS styles as you want. Important note - step 2 and step 3 are both optional. If you do not need layout customization, it is not required to upload file '''layout.phtml''', if you do not need CSS customization, you are also not required to upload the CSS file.
+
'''Congratulations! Your new theme has been created!''' If you open any user-side pages, you will see it uses a larger font size, and red background color. Now, as you've got a good idea of how to create templates, you can start the real customization of your theme - change layout templates and CSS styles as you want. Important note - step 2 and step 3 are both optional. If you do not need layout customization, it is not required to upload the file '''layout.phtml'''; likewise, if you do not need CSS customization you are not required to upload the CSS file.

Revision as of 13:28, 19 September 2012

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 the 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 the recommended way to customize the look and feel of aMember Pro, as your theme will not be overwritten by upgrades and it is easy to determine exactly which files were modified.

Create your own theme : quick todo

  • Create folder amember/application/default/themes/bob/
  • Go to aMember CP -> Setup : enable "bob" theme
  • Create file amember/application/default/themes/bob/theme.css and looking at amember/application/default/views/public/css/reset.css and amember.css, add custom styles to the theme.css.

After each step, check the results by looking at user pages.

Create your own theme : step by step

In this quick tutorial we will describe how to create a new theme named mysite. The theme's name must be lowercase.

  • STEP 1. Using your favorite FTP client, go to folder application/default/themes/ and create folder mysite
  • STEP 2. Create an html template file layout.phtml in the mysite folder
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title><?php echo $title ?></title>
        <?php $this->printLayoutHead(); ?>
    </head>
    <body>
        <?php echo $this->placeholder('body-start'); ?>
        <div class="am-layout">
            <a name="top"></a>
            <div class="am-header"> </div>
 
            <!-- sample image from theme folder -->
            <?php echo $this->_scriptImg('large-alert.png'); ?>
 
            <div class="am-body">
                <div class="am-body-content-wrapper am-main">
                    <div class="am-body-content">
                        <?php include $this->_script('_top.phtml'); ?>
                        <?php if (empty($this->layoutNoTitle)): ?>
                            <h1><?php echo $title ?></h1>
                        <?php endif; ?>
                        <!-- content starts here -->
                        <?php echo $content ?>
                    </div>
                </div>
            </div>
        </div>
        <div class="am-footer">
        </div>
        <?php echo $this->render('_popup.phtml'); ?>
        <?php echo $this->placeholder('body-finish'); ?>
    </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
<div class="am-body"> ... </div> 
must be outside of the page where you embed 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'); ?> 
(optionally) prints URL of image large-alert.png that you may upload to application/default/views/mysite/public/img/large-alert.png
  • STEP 3. Create a file application/default/themes/mysite/public/css/theme.css and put the following lines inside your code:
body { font-size: 16pt; background-color: lightred; }
  • STEP 4. Go to aMember Admin Control Panel -> Setup/Configuration, select "mysite" in "User Theme" dropdown and click "Save".


Congratulations! Your new theme has been created! If you open any user-side pages, you will see it uses a larger font size, and red background color. Now, as you've got a good idea of how to create templates, you can start the real customization of your theme - change layout templates and CSS styles as you want. Important note - step 2 and step 3 are both optional. If you do not need layout customization, it is not required to upload the file layout.phtml; likewise, if you do not need CSS customization you are not required to upload the CSS file.