The standard way of editing a theme is by using the template editing tools available in the AdminCP. They provide easy access to templates & CSS and don't require any special setup.
To begin editing a theme, navigate to Customization -> Themes in the AdminCP, and then click the code icon to the right of the theme you wish to edit.
Note: If the theme you wish to edit was originally created with the easy editor, the code icon will instead appear in the dropdown menu for the theme.
This is what you'll see:
1. File listing
The sidebar lists the available templates/CSS files in this theme. In the template list, templates are grouped first by application, and then front/global, and finally by section.
- front - Used on the public side
- global - Used on both the public and admin side
Four different icons may be shown to the right of each item in the list to denote its status:
- M - This file was modified in a previous version of the IPS Community Suite and may be out of date
- M - This file was modified in the current version of the IPS Community Suite
- I - This file is being inherited from a parent theme. Changes in the parent theme's file will be reflected here too
- C - This file is unique to this theme (i.e. it has been added manually)
You can switch between templates and CSS files with the tabs at the top of the sidebar. Both types of file can be open at once in the editor.
2. Editor
The main editor window is a tabbed, syntax-highlighted editor allowing you to edit both templates and CSS files at the same time. Open a tab by clicking a file in the sidebar; close a tab by clicking the X in the tab.
If a file has unsaved changes, a bulletpoint will be shown in place of the X.
3. Search
Easily locate a particular template or CSS file by searching for it. This field searches both the name and template contents.
4. Revert
If the currently-selected file has saved changes (i.e. it is different from the default theme that we ship with the software), the Revert button will be available. Clicking it will revert the file back to its default status - any customizations will be removed from it. This is often useful after an upgrade where a file may be out of date. In those situations, reverting a file and then manually reapplying the necessary customizations is the best course of action.
5. Variables
Most templates have variables passed into them by the backend code; these variables are often used to output data, or control the display in other ways.
Clicking the Variables button shows you the variables being passed for the selected template, so that you are aware of what data is available to the template.
Note: Don't add, change or remove variables from this dialog unless you are developing an addon and aware of what you are doing. Changing the variables here will cause errors because it will no longer match what the backend is passing to the template engine.
6. Editor preferences
The editor preferences dropdown contains a handful of options controlling how the editor appears. You can set these up to suit your own taste.
7. New file
The New button allows you to add custom HTML templates and CSS files to this theme. This is often a good idea to keep your changes isolated from the default templates/css files, which enables easier upgrading for sites using the theme. We cover this more in the Best Practices step of this guide.
Report Guide