Concrete5 Theme Development Essay

  • First, turn off all caching in the Dashboard.

  • Find your favorite HTML theme – or build it yourself (or grab it from a designer.)

  • Create a directory for your theme in the directory. In your theme's directory (e.g. ), create a thumbnail.png file (120x90) that is a good representation of it. Next, create a new file with the title of the theme on the first line, a description of it on the second.

  • Copy your theme's assets into the directory.

  • Go into Dashboard > Pages and Themes > Themes and your theme should show up as awaiting installation. Install the theme.

  • Activate the theme from the same Themes dashboard page.

  • Then go to the home page. It's blank – because we haven't yet created any templates. Let's do that now.

  • The one file every theme needs is . This template is used any time a page that has a specific page template can't find a file in the theme's directory that matches the template's handle. Copy the of Urbanic into the theme directory, change it's name to , and see what happens.

    (Note: you can also name this file "full.php" – since that's the handle of the page template used by the home page.)

  • Load the home page again. Content shows up but none of the assets are loading. That's because the paths to the assets need updating.

  • Copy all js, css, fonts, images directories into the theme's directory.

  • Go into and prefix all references to scripts, CSS and images.

    So:

    becomes

  • Add the required PHP to the header and footer of your page.

    Add:

    in the HEAD tag (and make sure to remove title, various meta tags used by concrete5.)

    Add:

    right before the closing body tag.

    If you've done this correctly, when you refresh the page, you should see the concrete5 edit bar.

  • We need to add a container DIV with the proper classes around the content in the page, in order for panels to be able to shift content around.

    Add a DIV around the content of the page (typically right after the opening of the body tag and before the closing of the body tag) and give it this class

  • Fix any CSS issues where the theme you've chosen might conflict with the concrete5 theme.

  • Now we can make editable areas. Choose some content that you want to remove in order to make editable, and replace it with this:

    That will make your first editable area – and you'll be on your way!

  • Code Recap

    The following are examples of the code that was used in the movie, to setup editable areas, and make a template editable.

    Add an area named "Main Content 2" to a page

    Make a template editable

    Remove the title tag from a template, and replace it with this:

    Additionally, for concrete5.5 and above, make sure you add the line

    right before the closing body tag.

    Common area and template names

    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:

    And to insert it into a line that originally says:

    Add it like this:

    Step by Step review of ScreenCast
    by BrotherPhil

    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



    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

    Loading Conversation

    One thought on “Concrete5 Theme Development Essay

    Leave a Reply

    Your email address will not be published. Required fields are marked *