First, a list of single pages, that you might want to be able to customize the html for:

• download_file.php
• login.php
• maintenance_mode.php
• members.php
• page_forbidden.php
• page_not_found.php
• register.php
• upgrade.php
• user_error.php

These can be easily be overridden by putting them in your package theme folder, e.g. "package_name/themes/theme_name"

When it comes to customizing the single pages that lives in the single_pages/profile folder, just copying the folder won't work, because the library/view.php doesn't respect the folder.

The trick is to copy the files within the profile folder to your theme directory, but as the theme folder needs to have a file called 'view.php' and the profile folder contains a file with the same name as well, it's important to rename the profile/view.php file to profile.php.

So finally the file configuration within your package theme will be, including the files mentioned above:

• avatar.php
• edit.php
• friends.php
• messages.php
• profile.php
• default.php (page type)
• view.php (usually is used to render single pages)

Next step is to include your themes header.php and footer.php in all single pages that are now overridden in our theme folder. This is done by placing the line

$this->inc('elements/header.php');

directly beneath

defined('C5_EXECUTE') or die("Access Denied.");

at the top of each file and

$this->inc('elements/footer.php');

at the bottom of each file, to make sure your javascripts and stylesheets will be used and the necessary scripts and styles from concrete5 are included.

The profile pages have a sidebar included, that can be overridden and customized by creating an elements/ folder within your package and copying the profile/ folder from concrete/elements to your package elements/ folder. For including this and not the standard sidebar for all your profile pages (avatar.php, edit.php, friends.php, messages.php and profile.php) replace the following line

Loader::element('profile/sidebar', array('profile' => $profile));

with

Loader::element('profile/sidebar', array('profile' => $profile, 'package_name'));

and replace package_name with your custom package name.

One element is left, that you might want to customize the html for, and that is concrete/elements/system_errors.php. Copy it to your package_name/elements/ folder and replace the following line in your package_name/themes/theme_name/messages.php file:

echo $error->output();

with

if (isset($error) && $error->has()) {
    Loader::element('system_errors', array('format' => 'block', 'error' => $error), 'package_name');
}

and replace package_name with your custom package name.

In your package_name/themes/theme_name/edit.php, replace:

$error->output();

with

Loader::element('system_errors', array('format' => 'block', 'error' => $error), 'package_name');

As a last step, we want to get errors displayed at the login and register page, that even when overridden via config/site_theme_paths.php don't display errors on the page, when failed to login or register.

Add the following lines to login.php and register.php somewhere at the top, probably after the "H1" tag:

Loader::element('system_errors', array('format' => 'block', 'error' => $error), 'package_name');

That's it, you're good to go to customize the html for all single pages on the frontend that comes within your package theme, except the install.php, which is only used for installing the system and might not be customized.

Hopefully, this tutorial saves you a lot of time when wrapping your head around how to customize the html for various single pages that are rendered on the frontend of your site.

Happy customizing and best wishes

Ron