Saturday, 14 August 2010 23:12

Setup Control Panel Icons & Toolbar

Want to setup a cool iPhone style Control Panel? Follow these few simple steps and customize your cpanel for your mobile hompage.

We'll use 2 of Joomla's default mod_mainmenu modules with Menu Images to create these icons

cpanel

Step 1:

Log into your Admin panel on the backend. From there go to Extensions -> Template Manager

Step 2:

Click on tapthemeiphone to edit the TapTheme iPhone template parameters.

Step 3:

Click On for the Homepage Control Panel option and Save

Step 4:

Go to Menus -> Menu Manager and click New to create a new menu

Step 5:

Enter this info:

Title: Control Panel
Menu type: Control Panel Menu
Description: Control Panel Menu

SAVE

Taptheme Control Panel

Step 6:

Go to Menus -> Control Panel and create all the menu items you'd like to appear in your mobile cpanel.

Step 7:

While editing a menu item you can select your Menu Image under Link Type Options

Control Panel Icon Images:

IMPORTANT: Cpanel Icon Images must be square jpg images. 

The size of icons will depend on the device as listed below.

- 57px x 57px.png (low res version for iPhones before the iPhone4)
- 114px x 114px.png (high res version for iPhone4)
- 72px x 72px.png (this is an iPad version just in case iPad visitors bookmark your site)
- 48px x 48px.png (this is an Android version)

These images must be uploaded to your images/stories directory. We provide all the images from the demo in your mobile_source.zip Fireworks png file, but you can create any jpg image. The image must not include the rounded corners or shine, TapTheme iPhone does this automatically.

The Demo Site icons are not included. we aren't allowed to redistribute the icons. You can download them for free yourself though. The iPhone icons are from the Tango Desktop Project.

Example Icon:

example-icon

Step 8:

Go to Extensions -> Module Manager

Create a new Menu module called Control Panel with the following settings:

Show Title: No
Enabled: Yes
Position: mobile-1 (if TapTheme iPhone isn't your default template you MUST type this directly into the select box)
Menu Assignment:  Only on pages selected, clear all and only check Home under Main Menu

Basic Options:  Control Panel

SAVE 

Taptheme Control Panel Module

Control Panel Menu Assigment

Control Panel Basic Options


 

Toolbar Icons Menu

Repeat the steps above for an additional menu. When creating the new menu (step 5) use this info and use "mobile-2" as the position for the module:

Enter this info:

Title: Toolbar
Menu type: Toolbar Menu
Description: Toolbar Menu

Last modified on Tuesday, 10 April 2012 21:44

Related Video

Control Panel for Joomla 1.5
Control Panel for Joomla 1.5