Introduction to-concrete-5

Concrete5 CMS Manual
2013
www.letsnurture.com , info@letsnurture.com ,
+91-79-40095953 , 312, Kalasagar Mall , Satadhar Cross Roads, Ghatlodiya - 380061
Brief Introduction:
Concrete5 uses jQuery for almost all our JavaScript needs. It uses Zend libraries for complicated stuff like
internationalization and caching. It uses MySQL, but through the ADOdb Database Abstraction Layer.
Sure our in-context editing is easy, but concrete5 has a really powerful advanced permissions system, a
flexible data objects model and built-in helper classes as well. Developers have built concrete5 to be
easy to understand at a glance, but super powerful once you open the hood.
 Firstly, for building website using Concrete5 cms, you need to download setup from
www.concrete5.org/developers/downloads/
 After downloading, install it into your local Apache server.
 When creating your first theme, installing Concrete5 with sample content can be helpful.
System Requirements:
 PHP 5.2.4 or greater (PHP >= 5.3 recommended)
 PHP Modules: CURL, zip, mcrypt, openssl, GD (with freetype), mysql, mbstring
 PHP settings (primarily for file uploads) post_max_upload_filesize = 20, post_max_size = 20, php
memory limit to 64 (More may be needed for memory intensive operations, such as upgrading.)
 MySQL 5.x or higher.
 Apache/IIS (Apache recommended)
Following sites can be built with concrete5 cms
 Online magazines and newspapers.
 eCommerce sites.
 Extranets and Intranets.
 Government web sites.
 Small business web sites.
 Non-profit and organization web sites.
 Community-based portals.
 Church, club and team web sites.
 Personal or family homepages.
 Marketing focused sites for a corporation.
 Any school, college or university web site.
 Many online communities.

2013
 Anything else you can dream up!
Concrete5 Directory Structure
When you first start working with Concrete5, you may notice that the root file structure and the file
structure under the Concrete directory are very similar. The directories under the root are designed to
hold modifications you add to your Concrete5 site. For example, if you install a new theme for
Concrete5, you would upload the files for that theme to the Packages directory in the root. The
directories located under the Concrete subdirectory are where the core C5 files are kept. In most
instances, you will never have to edit files located in this area.
See the screenshot below to know how core files are located under Concrete directory.

2013
Theme Development (from scratch):
Once Concrete5 is installed, you can follow the following steps to take a static HTML & CSS site and turn
it into a working concrete5 theme.
 Create a folder inside your root themes folder (not the concrete themes folder) and name it
whatever you like.
Inside your theme folder, create a text file called description.txt. Inside there, on the first line you
will put the title of the theme, and on the second line include a brief description of the theme.
Line1: Your Theme Name
Line 2: Your Description
 Next, give it a thumbnail. Make it 120x90px like the one below and save it as thumbnail.png in the
theme directory. Below is the thumbnail image for the core theme Greek Yogurt.
 Copy in your default html file and rename it to default.php. You can now apply your theme at this
point. You won't have any editable areas, but it just serves to demonstrate how easy it is to get
started.
 Before the closing head tag, include:
<?php Loader::element('header_required'); ?>
This grabs a file called header_required from the concrete elements directory which inserts the page
title, the content type, and the character set.
And Right before the final body tag, we will include:

2013
<?php Loader::element('footer_required'); ?>
This grabs a file called footer_required.php. This will include the concrete5 tracking code if you enable it,
and many javascript assets are included in the footer as well so that page load speeds are quicker, as the
page will load prior to the javascripts, not having to wait for them to load visual page content.
NOTE : Both of these lines header_required and footer_required are required.
 Now, copy over the styles section of the site. Then, in your theme template, add this code to
dynamically grab the location of the style sheet. In this instance, it would look like this:
<link rel="stylesheet" href="<?php echo getThemePath(); ?>/styles/layout.css" />
This is a function that says "I want to get the path of the current theme in front of the path
styles/layout.css. Now it will update to get the css correctly.
 We can now change the title of our site and pages dynamically, as we included the header_required
element into our theme. Now we will start making certain elements of this theme dynamic by
adding areas and global areas to them.
 First we will add some areas that are visible throughout the entire site, called "global areas". Let's
add a global area inside the #header div.
<?php
$a = new GlobalArea('Site Logo');
$a->display();
?>
since this is a global area, adding content to this area will be used throughout the site where this area is
included in the page type template. For standard areas, the content in the area would only appear on
that particular page instance, and not on other pages of the same page type.
 You can create another global area where the unordrered list for the header navigation appears
called 'Header Nav'.
 Now find where the main content container is in the current theme. Delete all the content in there
and add a concrete5 area instead. Note: This is not a global area, just a standard area, as it will vary
from page to page.
<?php $a = new Area('Main');
$a->display($c); ?>

2013
 This is the standard c5 main area name, and it's good to standardize that, because if you activate a
theme without a main area, the content will not appear. Now that you can add content, headers
and links through the content block.
 Onto the footer,make footer a global area just like we did with the header using snippet of code
shown above, just with different blockname.
 You can add as many Global & standard area blocks as you want using code shown above.
 In order to make new page types, you could just duplicate the default.php page type, but you can
save a lot of code and make it more consistent if you put the header and footer code into elements
header.php and footer.php.
 First create header.php and paste in all the html and php from the top of your default page
downward that is the same on every page type of your site. (You will also delete this code from
default.php).
 Now create the file footer.php. That will contain everything in the footer of your site that is
consistent from site to site. Again, delete that footer code from the default.php.
Now include the following snippets of code where you deleted the header code and footer code,
respectively:
<?php $this->inc('elements/header.php'); ?>
<?php $this->inc('elements/footer.php'); ?>
 Now, move on to creating Right Sidebar page type template file. First copy your default.php page
type and rename the copy right_sidebar.php (note - it's important to only use underscores for
separation). Look at your html template and remove what doesn't pertain to the right sidebar layout
and copy in the html and add it in our new right sidebar template. Delete the contents of the sidebar
and main area except for the container itself and add new areas inside there, like so:
<?php $a = new Area('Main'); $a->display($c); ?>
<?php $a = new Area('Sidebar'); $a->display($c); ?>
That will make the area inside of the sidebar and main container html live so that we can add blocks
to them.

2013
 Now,you need to add the right sidebar page type to c5. Once you've added it, you can apply the
page type to a page by going to a page and selecting "design" from the edit menu. You can now add
blocks to the right sidebar and main area in that page type.
 Now move onto making the home page type. Copy the default.php and make a copy of it and name
it home.php. Let's delete everything except the header and footer includes, and create the home
page type in the same fashion that we created the right sidebar page type by copying in the html
and hollowing out the relevant containers and putting areas in their place. Now let's go to the home
page of the site and give it the home page page type.
 Once applied, you'll see the header and footer areas, but nothing in between. So let's fix that. Let's
copy some of the html straight from the template into our page type. For instance, we create and
editable area where the home page image should go like so:
<div class="fl_left">
<?php $a = new Area('Home Image'); $a->display($c); ?>
</div>
 Now we can add in images (or anything) to that area through the CMS. Basically we want to find all
the sub "containers" and turn them into areas with unique names .
 When you add an image, you can set the footprint to match your dimensions exactly by setting Max
Width and Max Height and "force exact image match",
 We can add links to pages through the content editor, and add the class particular to these link tags,
in this case a paragraph class called "readmore". This will make them appear in the same manner
that they do in the theme.

2013
How to access Dashboard:
For adding/editing blocks, nav-items, pages, sign in into Dashboard using this url,
your_site_root/index.php/login/
You will see this one editing bar on top of your dashboard page, since you have included dynamic
header
 Hitting on Dashboard button given on right hand side will lead you to the full dashboard view as
shown below.

2013
 Now go to themes, you will see the list of currently available themes of your website.
 Click on the Install button given on right to your theme (bottom of the list) name.

2013
Your theme will be added installed themes, as shown in the screenshot below.
 You can see currently ‘greek yogurt’ theme in activated, hit ‘Activate’ button to activate your theme
as shown.

2013
 To enter in Editing mode, go to ‘Edit->Edit this page’ as shown in the screenshot below.

2013
 You will enter in Editing mode & get an screen which shows all the editable areas(see screenshot
below).
The areas highlighted with red dotted line are editable areas. You can click on any area which you want
to edit.
 If you have added Global areas into file using code mentioned in same manual,
You will be able to add/edit blocks to those areas.

2013
How to add a block
 You can add blocks to the areas you created.
 Click on any editable area you want to edit, select on ‘Add block’ option as shown in screenshot,
select the mode of data you want to add ( auto-nav, content, html, file, image, google map etc)
How to add a page
 Clicking on ‘Sitemap’ option given in dashboard, you will be redirected to a screen where all the
pages of website will be listed.
You can add a page by using ‘Add page’ , choose page type, enter page name, description & other
details, then click on ‘Add page’ as shown in screenshot below..

2013
How to add a page type
 In Full dashboard view , you will see ‘Page types’ option. Click on It and you will have a list of all page
types available in website.
You can add a page type if you want by clicking on ‘Add a page type’ option (shown on screenshot
below).

2013
 Enter data as shown below and hit ‘Add’.
 Now you can see you page type list added in default page types.

Introduction to-concrete-5

More Related Content

What's hot (20)

Viewers also liked (17)

Similar to Introduction to-concrete-5 (20)

Recently uploaded (20)

Introduction to-concrete-5