Customizing the Back-End Manager

Configuring the layout of your page editor

When you finalized your templates, you added Component Columns to specifying which areas contain content that’s editable by the user (Figure 4.1).

Figure 4.1 A quick reminder of what Component Columns look like in your front-end template.

Since the back-end allows for dropping in content into those Component Columns, it would make the most sense if the page editor had a similar layout to your front-end template. Well, it does and you have 100% control over that as well (Figure 4.2).

Figure 4.2 The page editor matches the template layout exactly, with a main content area and sidebar.

To change the layout of your page editor, just follow these quick steps:

  1. Add a new folder under your “tmpl” folder called “layouts”.

  2. Create a new HTML file for each of your templates in this folder (e.g. home.html, content.html, search.html). Add the HTML code of the layout you wish to appear in the page editor for that page type. Add the same tag you added to your templates to define your Component Column, but with an additional TITLE parameter to title your column: [#compColumnComps#].
    <table width="667" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #AAA;">
    	<tr>
    		<td width="432" valign="top" style="background-color: #EEE;">
    		  [#compColumnComps_COLID=1_TITLE=Main#]
    		</td>
    		<td width="235" valign="top" style="background-color: #DDD;">
    		  [#compColumnComps_COLID=2_TITLE=Sidebar#]
    		</td>
    	</tr>
    </table>


  3. Upload your “tmpl/layouts” directory to your WPM installation to see your changes.

The final and simplest step

The back-end management system can also be branded with a logo of your choice to complete the customization of Web Pro Manager. To do so, just follow these simple steps:

  1. Login to the Web Pro Manager (see Chapter 2: Logging In of Web Pro Manager User Guide).

  2. From the Welcome page, Click on System Settings in the sub navigation to proceed to the System Settings page.

  3. Click the Edit button to change the System Settings.

  4. Under Logo (for Manager only), choose a logo image from your local computer. This image must be no larger than 400 pixels in width and 80 pixels in height and must be in PNG format. You should use a transparent background to make the logo feel like an integrated part of the system.

  5. Click Update to save your new logo to the system.