Advanced Theme Development: Part Three


We can also wrap certain built in concrete5 pages in a concrete5 theme. Let’s say we wanted to allow registration and user profiles. Let’s customize the look of the registration page to match our current theme. First let’s turn on Public Registration at /dashboard/system/registration/public_registration/. 


The register page is located at /index.php/login (You’ll have to add a link to that.) Now when we visit the login page, we have the ability to login, but it’s wrapped in the concrete5 core theme. Let’s look into wrapping it in your theme. 

In the root config directory, you can look at the site_theme_paths.php file. Uncomment out some of these lines so that the login page will use your theme and not the concrete5 core theme. Here are the lines to uncomment: 

$v = View::getInstance();

$v->setThemeByPath('/login', "yourtheme");
$v->setThemeByPath('/page_forbidden', "yourtheme");
$v->setThemeByPath('/register', "yourtheme");

Insert the handle of your theme instead of “yourtheme”, so in our case, “darkness”. The layout of these pages once they are changed to your theme might not be exactly perfect, so they might need a bit of fine tuning. One way we can solve the problem of creating styles that only target the login page and not the rest of the site is to head to our view.php and add a custom style sheet that only gets called in on the view by adding this line at the top:

$this->addHeaderItem(‘<style stype=”text/css”>@import “‘. BASE_URL . DIR_REL . ‘/css/core_form.css”;</style>’);

This will look in our CSS overrides directory in the site root for this file, then it will look in the concrete directory. So let’s put a stylesheet called core_form.css in the root css directory with some styles that will make our register page look better. So now we can add some styles, in our particular case to add some top margin to our h3 tags.

div#container h3 {
margin-top: 20px;

We also need to create error support on this page. To do this, we will include a core concrete5 element here and make sure we include the system errors element above our inner content declaration so that errors will display: 

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

This is a core element that understands how to display errors on this page. When you attempt to log into concrete5 and you mess up, c5 passes an error object to the page, and it's up to the page to know how to handle it. Luckily, this element knows what to do with it. We can also style the error output however we like. 

Register could also use a little display love, so let's include some styles in our custom view stylesheet that applies: 

div.clearfix { margin-bottom: 10px; }

That helps space things out, making everything look pretty acceptable. But let’s say we want to get more information about our user when they log in, such as their first and last names. First, we’ll need to create some user attributes. We’ll add two text user attributes (not page attributes) and call them last_name and first_name. 

Now when we register, we will be prompted to enter our last name and first name. We can also order these attributes, so in this case, that last name comes after first name.

Now that we have those attributes in place, we can add some code to the header element of our theme that shows the first name of the logged in user while they are logged in. It’ll make them feel all cozy and welcome, which we want. So we’ll add this code: 

$u = new User(); 
if ($u->isRegistered()) { 
   $ui = UserInfo::getByID($u->getUserID()); ?>
   <div id=”top-welcome”>Welcome <b><?php echo $ui->getAttribute(‘first_name’) ?   >
<?php } ?>

This code instantiates a new instance of the user class, which gives us some information about the currently logged in user. We used the getUserID member of that class to get another object, the UserInfo object. This is where the extended user information lives, including our attributes and all other user attributes. We can use to echo out the user attribute first_name.

Now we’ll add some CSS to get our welcome user text in place: 

#header #top-welcome {
	position: absolute;
	top: -28px;
	right: -5px;
	font-size: 11px;

Now that will appear in the upper right of the site in the header so the user will have a reminder that they are logged in. We use all this stuff for system pages on like login and registration, and none of it is changed in a fundamental way, so those are good examples of how you can really customize the look and feel of these pages fairly extensively.

Recent Discussions on this Topic

Keep Theme Styles from Interfering with concrete5

Can someone please explain this to me, as I have a few sites that I have built where the theme does interfere with the Concrete5 Interface. ----------------------- From C5 Documentation: Keep Theme Styles from Interfering with concrete5 When c…

how to call the controller from theme header

Hi, I am developing web application by using the concrete5, First i try to implement multilingual in single pages, its work sample i attached my screen shots image. pfa. Now i want to this in my theme, how to do this. experts help me. than…

Package attribute

For a new theme I want to have a pagelist install with it which shows up thumbnails of pages, I have this all sorted but I have no idea how to install the 'thumbnail' attribute with my theme, I have looked at other packages but cant find any examples wher…

Location of Installed Themes

I have been searching for an answer to where installed themes get placed after being downloaded and installed from the dashboard. What is the directory? I am trying to design a theme from the skeleton theme: "Stripped" by Steven Braun at …

Custom Maintenance Mode in v5.7

Another day another C5 question.. I have followed 5.7 guidance on customising system single pages (link below) and have had no issues... that is until I got to the maintenance page. The article kind if implies this should follow the same process but I …