The following are examples of the code that was used in the movie, to setup editable areas, and make a template editable.
<?php
$a = new Area('Main Content 2');
$a->display($c);
?>
Remove the title tag from a template, and replace it with this:
<?php
Loader::element('header_required');
?>
Additionally, for concrete5.5 and above, make sure you add the line
<?php
Loader::element('footer_required');
?>
right before the closing body tag.
Standard area and template names for themes
Just to clarify, for those whose php is a little rusty and couldn't see the coding example in the video too well, the syntax for getThemePath is:
<?=$this->getThemePath()?>
And to insert it into a line that originally says:
<link href="style.css" rel="stylesheet" type="text/css" />
Add it like this:
<link href="<?=$this->getThemePath()?>/style.css" rel="stylesheet" type="text/css" />
1. Find an HTML-based theme you like, download it onto your computer.
2. Rename unzipped folder what you want the theme to be named in C5
3. Create a thumbnail of the website, to fit 120x90 (png format) image size. Place thumbnail image into your renamed theme directory
4. Create a theme description by opening your text editor, create a new file named description.txt. On the first line of this text file, type the name of the theme. On the second line give a brief description of the theme.
5. Rename the main html (index.html, for instance) default.php
6. Open the new default.php file in your text editor
7. Find every relative URL reference in the code and add this Get ThemePath code to tell C5 where to find all of the necessary image, css, and other necessary files.
The old line:
<link href="style.css" rel="stylesheet" type="text/css" />
should now look like
<link href="<?=$this->getThemePath()?>/style.css" rel="stylesheet" type="text/css" />
8. Enable the C5 Menu bar by replacing the Title area of the header with the following code:
<?php
Loader::element('header_required'); ?>
9. Enable C5 Editing by assigning various areas to the C5 Theme. We do this by replacing current "dummy text" within the web design with C5 div headers. For instance, replace the main content area of the html code with this php code:
<?php
$a = new Area('Main Content');
$a->display($c);
?>
(to add this functionality, go to those other areas and replace it with similar code, replacing 'Main Content' with the names of the blocks you wish to place on the page in that location. See http://www.concrete5.org/documentation/developers/pages/themes-2/ for a list of areas and page types for themes.)
10. Open the Concrete 5 website you have been editing.
11. Login. (you may have to add '/login/' to the end of the URL in order to login )
12. Open up the dashboard
13. Click on "Pages and Themes," you should see your new theme, ready to install.
14. Click on Install, and return to "Pages and Themes."
15. Click on activate, then confirm.
16. Click on "Return to Website" at tope of the C5 Menu (on the right hand side)
17. You should be able to click on "Edit Page" option in the C5 Menu bar to edit your website.
18. You may need to do a little more work to make navigation look and work properly, or other sections of the site. But, for the most part, you should have a working form of your new Concrete 5 Website Theme