Introduction to-concrete-5

Concrete5 CMS Manual

2013

www.letsnurture.com , [email protected] , +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.

http://www.concrete5.org/developers/downloads/


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

Health & Medicine

working concrete5 theme

concrete5 site

theme directory

theme folder

concrete5 cms manual

concrete5 directory

theme dynamic

theme development