aMember Pro Docs

Themes and Templates

Default Themes

aMember shipped with two themes - Default Theme and Solid Color Theme

Both themes has configuration options and you can customize it a bit - you can upload your logo, choose color, and put some text to header and footer.

You can switch themes at aMember CP -> Configuration -> Setup/Configuration (User Page Theme)

and then adjust some configuration at

Default Theme:

aMember CP -> Configuration -> Setup/Configuration -> Default Theme

Solid Color Theme:

aMember CP -> Configuration -> Setup/Configuration -> Solid Color Theme

Templates Syntax

aMember Pro v4 uses PHP-syntax based templates, like the 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:

DirectoryUsed for
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/adminadmin-side templates
application/default/themesuser-side themes
application/default/themes-adminadmin-side themes

Themes

aMember Pro allows you to create your own custom theme. You can copy any template, image or CSS from the application/default/views folder to your theme folder and it will override the default theme. Your custom theme will only override aMember's default theme if your theme is enabled. This is the recommended way to customize the look and feel of aMember Pro, because this way your custom theme will not be overwritten by upgrades and it is easy to determine exactly which files were modified.

You need to copy to your theme folder only template files that you want to change.

It is not necessary to copy all files from default theme to your theme folder. aMember will check template in your theme folder first and if not find it then fallback to default folder.

Often you need to edit only one file: layout.phtml

Create your own theme : quick todo

  • Create folder amember/application/default/themes/bob/ (use only lowercase letters and digits for folder name)
  • Go to aMember CP -> Configuration -> Setup/Configuration : enable bob theme
  • Create file amember/application/default/themes/bob/public/css/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>
    <html>
        <head>
            <title><?php p(isset($meta_title) ? $meta_title : $title) ?></title>
            <?php $this->printLayoutHead(); ?>
        </head>
        <body>
            <?php echo $this->placeholder('body-start'); ?>
            <div class="am-layout am-common">
                <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">
                        <?php include $this->_script('_content.phtml'); ?>
                    </div>
                </div>
            </div>
            <div class="am-footer">
            </div>
            <?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('_content.phtml'); ?>

    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, that you have a good idea of how to create templates, you can start the real customization of your theme and 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, you do not need to upload the file layout.phtml; likewise, if you do not need CSS customization you do not need to upload the CSS file.

Modify aMember templates if you have "Use wordpress theme" enabled

  1. Create folder /amember/application/default/views/wp-themes/YOUR_WORDPRESS_THEME_FOLDERNAME

    For example if you use default wordpress twentyeleven theme, create /application/default/views/wp-themes/twentyeleven folder.

  2. Copy layout.phtml file from /amember/application/default/views/wp-themes/default to /amember/application/default/views/wp-themes/YOUR_WORDPRESS_THEME_FOLDERNAME

  3. Copy /amember/application/default/views/wp-themes/amember.php to /amember/application/default/views/wp-themes/YOUR_WORDPRESS_THEME_FOLDERNAME/amember.php

  4. Edit /amember/application/default/views/wp-themes/YOUR_WORDPRESS_THEME_FOLDERNAME/layout.phtml and change this line:

        include dirname(__FILE__)."/../amember.php";

    to

        include dirname(__FILE__)."/amember.php";

  5. Make modifications to /amember/application/default/views/wp-themes/YOUR_WORDPRESS_THEME_FOLDERNAME/amember.php (which is default layout file for all aMember pages).

  6. If you want to alter other amember pages or styles copy template files from /amember/application/default/views/ to /amember/application/default/views/wp-themes/YOUR_WORDPRESS_THEME_FOLDERNAME/

← PayoutsSite css file →