While the standard template editor is useful for light template editing, for larger, more complex changes, editing with a real IDE is desirable. The IPS Community Suite facilitates this through something called Designer's Mode.
What is Designer's Mode?
Designer's Mode allows you to use a real IDE by exporting all of the templates and CSS files to disk as files, and then reimporting them to the suite when you have finished editing them.
With Designer's Mode enabled, the software will load its theme from this folder, meaning you can edit the files and see the changes as you make them.
Enabling Designer's Mode
The first step is to create a folder called themes in your root community directory (that is, the same place your conf_global.php exists). CHMOD this folder to 777 to enable the suite to write the files.
Next, navigate to Customization -> Themes in the AdminCP. In the toolbar at the top of the page, click the Designer's Mode button. Toggle the setting on after reading the information box, and then save the form. IPS4 will begin writing the theme files to disk.
Once complete, you will see a directory structure similar to this in the /themes folder on your server:
All themes currently installed are exported when Designer's Mode is enabled; the parent folders in this structure are named based on the theme ID. You can cross-reference the theme ID you wish to edit on the theme listing page in the AdminCP while Designer's Mode is enabled:
Each theme folder contains four key parts:
-
/css
The CSS for the theme, grouped first by app, then by location (front/admin/global). -
/html
The *.phtml HTML templates this theme uses, grouped first by app, then by location (front/admin/global) then by section. -
lang.php
A language file into which you can insert any custom language strings your theme requires. They should be in this format:'my_language_key' => "The English phrase" -
/resources
Resources for the theme (primarily images), grouped first by app, then by location (front/admin/global) then by type.
Resources aren't allowed to be larger than 1.5 MB .
Editing templates
When you edit the *.phtml template files exporting by Designer's Mode, you will notice a special tag on the first line of each file that looks like this:
<ips:template parameters="$title,$html,$location=array()" />
This tag is how the software knows which variables belong to this template. It is very important that you do not modify this line in template files, or your theme may break.
Completing Designer's Mode
When you are happy with your changes, you can disable Designer's Mode to import them back into the suite (note that you can enable Designer's Mode again later to continue).
To do this, go back to the theme listing screen at Customization -> Themes, and click the red Designer's Mode Enabled button. When you toggle the setting off, you will see additional settings asking you to confirm that you want to synchronize the changes.
Be sure the Synchronize option is enabled when you save this form, otherwise your changes will be lost.
You can select individual themes to sync, or all of them. You can also choose whether to keep the files on disk or automatically delete them once the sync is done.
Report Guide