ExpressionEngine

2.11.9 User Guide

Retired Documentation

You are using the documentation for version 2.11.9. Go here for the latest version or check here for your available upgrades to the latest version.

Control Panel Styles

General Guidelines

Control Panel Constants

  • BASE - Name of control panel file with the users session id
  • AMP - Will render &
  • AJAX_REQUEST - Returns Boolean TRUE if a request was made via an Ajax Request
  • QUERY_MARKER - Renders a query marker (?)
  • APPPATH - Server path to the system/expressionengine directory
  • BASEPATH - Server path to the system/codeigniter directory.
  • PATH_MOD - Server path to the system/expressionengine/modules directory
  • PATH_PI - Server path to the system/expressionengine/plugins directory
  • PATH_THIRD - Server path to the system/expressionengine/third_party directory
  • PATH_JQUERY - Server path to jQuery files at system/expressionengine/javascript/compressed/jquery

Customizing the Control Panel Theme

To modify the default control panel theme, we recommend creating a new theme rather than directly editing default. Create a new theme folder, my_theme for example, and copy the images from the default theme so that you end up with:

  • themes/cp_themes/my_theme
  • themes/cp_themes/my_theme/images

For any PHP or CSS files that are not present in your theme, ExpressionEngine will “fall back” and retrieve them from default instead. This means that your custom theme need only consist of the PHP and CSS files you have actually modified.

As a security precaution, the default theme’s PHP files are not actually located in themes/cp_themes/default but are instead located within the system folder at system/expressionengine/views. If you would like to override any of those files in your own theme, copy them to your own theme’s directory in a views folder, making sure that the copied files maintain the same directory structure in your theme as they do in the views directory. E.g.:

  • themes/cp_themes/
    • my_theme
      • css/
      • images/
      • views/
        • .htaccess
        • _shared/
          • overview.php
          • sidebar.php
        • errors
          • error_general.php

Notice the addition of a .htaccess file. Since the files in the themes folder are publicly accessible, for security you want to disallow direct access to your PHP view files. For Apache v2.2, the contents of this .htaccess file should be:

Order deny,allow
Deny from all

And for Apache 2.4:

Require all denied

This will prevent direct access to your PHP files from a web browser such as http://example.com/themes/cp_themes/my_theme/views/errors/error_general.php, but will not affect ExpressionEngine’s ability to read the files as neeeded, nor of the web browser being able to access the theme’s CSS, images, JavaScript, etc.

Overriding Control Panel Style

ExpressionEngine attempts to load an override.css stylesheet after all others, allowing for easy customization of styling. For example, if you just want to change the color of some elements, your theme might consist of only one CSS file:

  • themes/cp_themes/my_theme/css/override.css

This stylesheet will be loaded just prior to the cp_css_end hook.

Design Snippets

The following are basic design snippets that may be used:

Basic Control Panel Layout

<div id="mainContent">
  <div class="contents">
    <div class="heading">
      <h2 class="edit">Page Title</h2>
    </div>
    <div class="pageContents">
      // Page Content Goes Here
    </div> <!-- pageContents -->
  </div> <!-- contents -->
</div> <!-- mainContent -->

When designing for the module and extension control panel pages, all third-party markup will be rendered in the pageContents div.

Top Right Navigation

image0

Top right navigation is created with Cp::set_right_nav:

ee()->cp->set_right_nav(array(
  'forum_create_new' =>
    BASE.AMP.'C=addons_modules'.AMP.'M=show_module_cp'.AMP.'module=forum'.AMP.'method=create')
);

Table-based Layout

The ExpressionEngine Control Panel makes usage of the Table Class. You may load this library in your controller using:

ee()->load->library('table');

Two default table styles are defined in the Control Panel Library.

  • $cp_table_template
  • $cp_pad_table_template

Example Table-based Layout

The following example is a single table row from the Wiki Module update.php view file.

<?php
    $this->table->set_heading(array(
        array('data' => lang('setting'), 'width' => '50%'),
        lang('preference')
    ));

    $this->table->add_row(array(
        lang('moderation_emails', 'wiki_moderation_emails'),
        form_error('wiki_moderation_emails').
        form_input('wiki_moderation_emails', set_value('wiki_moderation_emails', $wiki_moderation_emails_value), 'id="wiki_moderation_emails"')
    ));

    echo $this->table->generate();
    $this->table->clear()
?>

Submit Buttons

Form submit buttons should be constructed with the CodeIgniter Form Helper. Basic implementation is as follows:

<?=form_submit(array('name' => 'submit', 'value' => lang('submit'), 'class' => 'submit'));?>

Note that in order to use the table based layout sample code you must first load the table library in your module’s method.

Tab Menu

<ul class="tab_menu" id="tab_menu_tabs">
    <li class="content_tab<?=($_current_tab == 'forum_board_home') ? ' current': ''?>">
        <a href=""></a>
    </li>
    <?php if ($reduced_nav == FALSE): ?>
    <li class="content_tab<?=($_current_tab == 'forum_management') ? ' current': ''?>">
        <a href="<?=$_id_base.AMP.'method=forum_management'?>"><?=lang('forum_management')?></a>
    </li>
    <li class="content_tab<?=($_current_tab == 'forum_admins') ? ' current': ''?>">
        <a href="<?=$_id_base.AMP.'method=forum_admins'?>"><?=lang('forum_admins')?></a>
    </li>
    <li class="content_tab<?=($_current_tab == 'forum_moderators') ? ' current': ''?>">
        <a href="<?=$_id_base.AMP.'method=forum_moderators'?>"><?=lang('forum_moderators')?></a>
    </li>
    <li class="content_tab">
        <a rel="external" href="<?=$board_forum_url?>"><?=lang('forum_launch')?></a>
    </li>
    <?php endif; ?>
</ul>

<div class="clear_left shun"></div>
<?php endif; ?>

image1