Control Panel Styles¶

External Links¶

To protect the users control panel URL from ending up in web server referrer logs, use Cp::masked_url from the Control Panel Class:

ee()->cp->masked_url('http://www.google.com');

Will result in:

http://example.com/index.php?URL=http://www.google.com

Internal Links¶

Internal control panel links should be generated with the cp_url() helper function which generates control panel URLs based on parameters passed in.

For example, to link to the content_publish controller, pass it in as the first parameter to cp_url():

cp_url('content_publish');

To link to a particular method in a controller, add it to the parameter with a slash:

cp_url('content_publish/method_name');

If the method accepts arguments, they can be passed in cleanly by adding them on the end separated by a slash:

cp_url('content_publish/method_name/5');

If the link requires any other GET parameters, they can be passed in via an associative array in the second parameter:

cp_url('content_publish/entry_form', array('channel_id' => $channel_id));

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

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.

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¶

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

<?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; ?>