Jump to content

Templates, CSS & JS

Templates, CSS and JS files are the means by which coders can take the default output of the various parts of Pages, and customize them to build unique parts of their site.

Note: only those familiar with HTML, CSS and some PHP should consider modifying their templates. Since they involve editing code, it's easy to break the output of your site unintentionally!


Types of template in Pages

Templates are the key to customizing areas of your Pages website so that they're unique to your site and to your particular use of them. There's three primary types of template you can customize:

  • Database templates
    Databases templates let you change the output of just about every part of your databases. There's four main types of template:
    • Category Index
      The templates that render the category index of a database, and subcategories when browsing the record listing.
    • Listing
      Templates that render the record listing
    • Display
      Templates that render record view itself, including comments & reviews
    • Form
      Templates for the add/edit form, allowing you to customize this form per-database
  • Page templates
    By default, a page will use the suite wrapper, which includes the header, navigation, user bar etc. leaving your page content to control the actual content area. However, you can instead choose to use a custom page wrapper, allowing you to control the entire output of the page. Wrappers are created as page templates, and selected when you create your page.
  • Block templates
    When you create a plugin block showing a feed of data, IPS4 uses a default template. You can however customize this template or create a new one, allowing each block to have a unique appearance.


What can blocks contain?

Blocks can contain the full range of IPS4 template syntax, which affords great flexibility. The data available to each template will depend on its type (for example, a database listing template will receive data from the database category, but a block template will receive data that matches the block's filters), but all templates can access the full underlying IPS4 PHP framework.


Creating & Editing templates

Database and page templates are managed in the Pages template editor, accessed by navigating to Pages -> Templates in the AdminCP and clicking the New button.

Default block templates are also managed in the template editor as above, but can also be customized per-block within the block configuration themselves, by going to Pages -> Blocks in the AdminCP and then editing the block in question. 


CSS & JS files

To fully customize sections created with Pages, it's often desirable to add custom CSS and Javascript. Pages offers a built-in way to write and use these resources and then assign them to a page for use.

CSS and JS resources within Pages are managed by navigating to Pages -> Templates in the AdminCP, and then clicking the CSS or JS tabs in the editor. New resources can be added by clicking the New button.

To assign them to a page, simply select them on the Includes tab when creating or editing a page in the AdminCP.

  Report Guide

  • Create New...