This is the documentation for concrete5 version 5.6 and earlier. View Current Documentation

You've probably noticed that when you install a theme, it isn't applied to pages like Login, Register, etc-- they keep their default concrete5 look:

default look

To give your users a more unified experience, you might want to make these pages look similar to the rest of your site. Here's the theme I've got installed at the moment:

activated theme

Check out your view.php and make sure it's ready

Essentially, we'll be telling these pages to use your theme's view.php instead of concrete5's default view. So before we get started, take a look at your theme's view.php and make sure it includes all of the following:

1) A call to include your header:

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

2) The special innerContent call that is used to display single page content:

<?php 
print $innerContent;
?>

3) A call to include your footer:

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

Your view.php likely has a few other items, like container divs and other common elements, but these three tags are the bare-bones essentials that every theme's view.php should have.

Edit site theme paths

Once you've made sure your theme's view.php is in order, Check out /config/site_theme_paths.php. Inside, you'll find a commented-out chunk of example code that lets you specify a custom view layer for each single page. Remove the comments to enable the code. Then, change the second argument of setThemeByPath to match the handle of your theme (in this case, "lazydays"). Your site will now make the login, page_forbidden and register pages use the single-page styles from your theme:

$v = View::getInstance();

$v->setThemeByPath('/login', "lazydays");
$v->setThemeByPath('/page_not_found', "lazydays");
$v->setThemeByPath('/register', "lazydays");

To see all the single pages you can theme in this manner, check out the files in /concrete/single_pages. You'll find other pages here that you might want to style-- like the Maintenance Mode page, your Page Not Found / 404 page, etc. Each can be added, like those shown above, by changing the first argument of setThemeByPath to match the handle of the page you're working with and setting the second argument to the handle of your theme.

Here's what our login page looks like now:

themed login page

Get validation working

Now let's get form validation working. To load the validation helper, you'll need to add some code to view.php. This differs depending on the version of concrete5 you're working with, but essentially does the same thing.

In concrete 5.4.2 and later, add this code just before your print $innerContent snippet:

<?php Loader::element('system_errors', array('error' => $error)); ?>

In earlier versions of concrete5, you'll need to add some slightly different code (see this thread for more info):

<?php  if (isset($error) && $error != '') { ?>
        <?php if ($error instanceof Exception) {
      $_error[] = $error->getMessage();
   } else if ($error instanceof ValidationErrorHelper) { 
      $_error = $error->getList();
   } else if (is_array($error)) {
      $_error = $error;
   } else if (is_string($error)) {
      $_error[] = $error;
   } ?>
        <ul class="ccm-error">
   <?php  foreach($_error as $e) { ?>
            <li><?php echo $e?></li>
        <?php  } ?></ul>
<?php } ?>

Now we've got the standard validation working for our Login page!

themed login page

Our register page is looking good as well:

themed register page

And so is our "Page Not Found" / 404 page:

themed 404

That's it! We've successfully skinned our login, register and page_not_found single pages.

Bonus Tip: fix odd concrete5 button behavior when logged in

If you're logged in as admin and seeing a weird, fat background on the checkbox elements, like this:

weird button css

Try adding this fix, customizing #content to match your own container div:

#content div.ccm-button { background: none; /* hide c5 artifacts from buttons on login/register/etc. pages */ }

Many thanks to Jordan Lev for his helpful pointers on this topic.

Loading Conversation