Creating concrete5 Themes docx

• You need to download the latest stable version from the following page: http://www.concrete5.org/ • Open that URL in your browser, you'll be shown a screen where you can enter the admi

Creating concrete5 Themes

Create high quality concrete5 themes using practical recipes and responsive techniques

to make it mobile-ready

Remo Laubacher

BIRMINGHAM - MUMBAI

Creating concrete5 Themes

Copyright © 2013 Packt Publishing

All rights reserved No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews

Every effort has been made in the preparation of this book to ensure the accuracy

of the information presented However, the information contained in this book is sold without warranty, either express or implied Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals However, Packt Publishing cannot guarantee the accuracy of this information.First published: January 2013

Production Coordinator

Prachali Bhiwandkar

Cover Work

Prachali Bhiwandkar

About the Author

Remo Laubacher grew up in Central Switzerland in a small village surrounded

by mountains and natural beauty He started working with computers a long time ago and then, after various computer related projects, he focused on ERP and Oracle development After completing his BSc in Business Administration, Remo became

a partner at Ortic, his ERP and Oracle business, as well as a partner at mesch web consulting and design GmbH At mesch – where he's responsible for all development related topics – he discovered concrete5 as the perfect tool for their web-related projects and has since become a key member of the concrete5 community You can find his latest publications at http://www.codeblog.ch/

About the Reviewer

Naume Keculovski was born in 1983 in Macedonia, but grew up in a small village close to Zurich, Switzerland After getting his EFZ degree with a focus

on Application Development, he started working for a small company and gained his first practical web development experience After finishing his internship, he started working for mesch and now builds the best possible web solutions on top

of concrete5, with Remo Laubacher

James Shannon has been actively developing with concrete5 since its early days He's contributed to the core and built a number of c5-powered sites, but mostly uses

it as a framework to build complex web applications Additionally, he's released

a handful of popular packages that augment concrete5's core functionality More generally, he's been developing websites for 15 years using a number of technologies.James' professional expertise is in strategic project management and change

management

James grew up in Southern California and graduated from UC Berkeley He collects certifications, most recently one that allows him to fly planes

I'd like to thank the person most important to me, Julie Talone, and

the one most important to her, Henry

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related

to your book

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy Get in touch with us at service@packtpub.com for more details

At www.PacktPub.com, you can also read a collection of free technical articles, sign

up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library Here, you can access, read and search across Packt's entire library of books

Why Subscribe?

• Fully searchable across every book published by Packt

• Copy and paste, print and bookmark content

• On demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access

Table of Contents

Chapter 1: Getting Started 5

Change the layout and style of your pages, areas, and blocks 22

Design to customize the appearance of blocks and areas 24

Chapter 2: Architecture of concrete5 33

Table of Contents

Chapter 3: Creating Your First Theme 51

Table of Contents

[ iii ]

Chapter 4: Styling Single Pages 83

Chapter 5: Styling the Block Output 95

Chapter 6: Responsive Themes 117

The Creating concrete5 Themes book contains everything you'll need to use your

experience with HTML, CSS, and PHP, to build custom themes for concrete5 You'll also get a first glimpse at more advanced features as well as a few examples showing you how to customize parts of the concrete5 core to uncover the power of this CMS

What this book covers

Chapter 1, Getting Started, describes a few words about the requirements of concrete5 as

well as instructions needed to get an understanding to edit content using concrete5

Chapter 2, Architecture of concrete5, helps you understand a bit more about the internals

of concrete5 for those who want to understand how things are working in concrete5

Chapter 3, Creating Your First Theme, describes the practical part where you'll create

your own theme

Chapter 4, Styling Single Page, helps you learn how to change the look of existing

pages such as the login or 404 page

Chapter 5, Styling the Block Output, covers everything you need to know to change

the output of the block elements, the actual content of a concrete5 site

Chapter 6, Responsive Themes, covers a brief look into responsive techniques and

how they can be integrated in concrete5

What you need for this book

You'll need an environment where you can install and play around with concrete5 This can either be a Windows, Mac, or Linux computer with Apache, PHP,

and MySQL, or even a remote server in combination with a text editor such as Notepad++ and a tool to upload files such as FileZilla

Who this book is for

You don't need to be an experienced programmer to understand this book, but you should have an understanding of web technologies such as HTML and CSS Some experience with a programming language, preferably PHP, is highly recommended, but not needed if you are a quick learner with a good understanding of computers

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information Here are some examples of these styles, and an explanation of their meaning

Code words in text are shown as follows: "The value of $pkg has to match the package directory and theme_book in PageTheme::add('theme_book', $pkg);has to match the name of the theme directory in themes."

A block of code is set as follows:

<?php

$mh = Loader::helper('mail');

$mh->setSubject('Hello lovely World');

$mh->setBody('Have a great day!');

$mh->to('the@world.org', 'The World');

[ 3 ]

New terms and important words are shown in bold Words that you see on the

screen, in menus or dialog boxes for example, appear in the text like this: "There are

some links such as Add Image which are concrete5 specific."

Warnings or important notes appear in a box like this

Tips and tricks appear like this

Reader feedback

Feedback from our readers is always welcome Let us know what you think about this book—what you liked or may have disliked Reader feedback is important for

us to develop titles that you really get the most out of

To send us general feedback, simply send an e-mail to feedback@packtpub.com, and mention the book title via the subject of your message

If there is a topic that you have expertise in and you are interested in either writing

or contributing to a book, see our author guide on www.packtpub.com/authors

Customer support

Now that you are the proud owner of a Packt book, we have a number of things

to help you to get the most from your purchase

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to

have the files e-mailed directly to you

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes

do happen If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us By doing so, you can save other readers from frustration and help us improve subsequent versions of this book If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and

entering the details of your errata Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list

of existing errata, under the Errata section of that title Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media

At Packt, we take the protection of our copyright and licenses very seriously If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy

Please contact us at copyright@packtpub.com with a link to the suspected

Getting Started

concrete5 is a powerful content management system which is not only easy to use,

but also powerful when you want to customize the look of a site and extend it with functionality In this chapter, we'll start by looking at concrete5 from the user side You'll learn about the basic ideas behind concrete5 as well as its most used tools to manage your site and content as you go

Getting your own concrete5 site

If you already have a site of your own, you can skip this part For those without

a concrete5 site, you can start by checking out the trial option on the official site: http://www.concrete5.org/about/trial/ On this site, you can get your demo site up and running with just a few clicks There is no need to download, install, or configure anything While this is perfectly fine to get acquainted with concrete5, you won't be able to change the files of the system If you want to get a first impression,

go for it, but if you want to play around with the code and layout of your site, make sure you get your own site up and running

In case you want to run your own site, there are official hosting packages where you get your concrete5 installation without any worries Check the different packages here:http://www.concrete5.org/services/hosting/

As concrete5 is an open source CMS, you can, of course, run everything on your own server The most-used platform is definitely LAMP (Linux, Apache, MySQL, and PHP) There are a lot of people who run concrete5 on different platforms such as Microsoft IIS While it's usually not a problem to get concrete5 running as long as the platform supports PHP and MySQL, LAMP is the only officially-supported platform

If possible, make sure you work with Apache on Linux as it's also the platform where you're most likely to get support in case something doesn't work as expected

Getting Started

You can find information about the installation process, as well as a number of tutorials for different platforms, on the following page:

http://www.concrete5.org/documentation/installation/installing_concrete5/

Quick installation guide for those who have worked with PHP web applications before:

• You'll need a working LAMP environment

• You need to download the latest stable version from the following page: http://www.concrete5.org/

• Open that URL in your browser, you'll be shown a screen where you can enter the administrator's credentials as well

as the information needed to connect to the database Put the correct values in each field and confirm them by clicking

on the Install concrete5 button.

Start working with concrete5

Once you have a running concrete5 site, you can log in to your site by clicking on

the Sign In to Edit this Site link at the bottom of the page If you already installed a

different theme, you might not find that link, as some people remove it to keep their layout as clean as possible If that's the case, you can use the following URL, or if that's not working either, the second URL:

• http://www.your-site.com/login/

• http://www.your-site.com/index.php/login/

Keeping URLs nice and clean

The two preceding links point to the same page but one has an ugly index.php in it That's because all requests are redirected through that file Luckily, it's not difficult to get rid of that concrete5 can

Chapter 1

[ 7 ]

In the dashboard, enter pretty in the little search bar at the top of the page and

select the Pretty URLs item On the screen which appears, check the only checkbox

and save the changes This is shown in the following screenshot:

After you're logged in, you'll see an almost identical view of your site, there's just one major change Now there's a toolbar at the top, allowing you to access the dashboard as well as the editing options related to the current page:

Dashboard to manage concrete5

While you edit most of the content of a concrete5 site in the in-site editing mode, there's still a dashboard where you can manage a lot of different things If you want

to create a new user, group, manage your files, or change some permission, this is where you want to go

Getting Started

The dashboard has two parts, a small part where you can see the most-used

functions Just hover over the Dashboard button and it will show up:

At the bottom, there's a View Full Dashboard link which will show you the entire dashboard You can also get to the same screen by clicking on the Dashboard button

at the top The entire Dashboard screen is shown in the following screenshot:

Managing dashboard favorites

In each screen of the dashboard, you'll find an icon looking like a star

at the top-right corner, seen in the following screenshot If you click

on it, you'll mark that screen as a favorite All of those screens will be

listed in the dashboard menu which appears when you hover over the

Dashboard button This makes it easier to access often-used functions.

How to edit content

This is the part where concrete5 differs a lot from most classic content management systems Many traditional systems have a clear distinction between the frontend and backend

If you edit content by selecting the object you'd like to amend in a tree-like structure and see some fields structured like a database application you'll see a different concept There's an in-site editing mode in concrete5 where you can update almost any content in a layout which looks a lot like the actual site, thus making it easier to actually understand the changes you're making

Getting Started

You've already seen the toolbar at the top of every page As you might have expected,

the Edit button is what we need The button has a menu which appears if you just

hover over it You'll see a small panel where you have a few functions to use, as seen below:

We'll use some of them later in this book, but to give you a first impression about what's here, the following is a short explanation for each item:

• Edit this Page: You want to change the content and not just look at it? Click

on this button

• Add a Sub-Page: This is the button you need if you want a new page

underneath the current page There's another way to manage the structure of your site, which we'll look at later in this chapter

• Properties: A page has properties, such as a name or a meta description used

by search engines as well as custom properties, for example, a background color you want to add to change the color per page We'll create our own custom attribute later in this book

• Versions: Once you change some content, concrete5 will automatically create

a new version This feature allows you to see all previous versions and even offers you the ability to compare them and go back to an older version

• Delete: You don't need that page anymore? Delete it! You can restore pages

that you've accidentally deleted in the site map Display system pages there

and you'll find an item called trash where you'll find the deleted pages.

• Design: A page can have different layouts, single column, two columns, and

a lot more This is where you can change the layout We'll also create some of

Chapter 1

[ 11 ]

• Speed Settings: There's a lot of caching functionality in concrete5 to improve

the performance Unless you have a big and complex site, leave these settings the way they are

• Permissions: If you want to hide your vacation photos, concrete5 lets you

easily set permissions to keep things private

• Move/Copy: In case you want the current page to appear somewhere else on

your site

What are blocks

In concrete5, you can insert many different elements, starting from simple HTML

content to videos and even small games by using blocks There's pretty much no

limit with blocks

In other words, almost all content you place on your site is wrapped using a block When someone wants you to add a picture, you'll need to select a block If you want

to add a guestbook, you need to insert a block

You can see a list of all installed blocks if you navigate to http://www.your-site.com/index.php/dashboard/blocks/types/ To get you a quick overview, here's a list of all the default blocks, including a small description of their basic usage:

• Auto-Nav: This is what you need to add navigation to your site By using this block, you make sure that new pages automatically appear in the navigation once you add them to the sitemap

• Content: Probably the most used block, based on the HTML editor

TinyMCE, this allows you to add formatted text, including links to other pages as well as embedded pictures There are plans to replace TinyMCE with Redactor, but TinyMCE will probably be kept in the code to maintain backward compatibility

• Date Navigation: This block groups a specified set of pages by their date, mostly useful for blog-like sites

• External Form: If you need a custom form you can use this block, but please note, you'll need to write PHP code to actually use it

• File: You can add links to files using the Content block as well, but if you just want one file download, this block is easier to use

• Flash Content: Not very popular these days, but if you still want to embed your Flash file, use this block

• Form: In addition to the External Form block, this block allows you to build

a basic form without any knowledge of web technology such as PHP or JavaScript

• HTML: For those of you who still want to hack their own HTML snippets into some pages This block shows you a simple text area to enter your HTML code and nothing else.

• Image: This block allows you to add a picture with an optional on-state picture as well as the option to scale it

• Next & Previous Nav: This block consists of a basic navigation to jump to the next page in the sitemap or chronological order

• Page List: Unlike the Auto-Nav block, this block builds a flat list by using several filter options It has two major usages:

° List all pages of a certain type (for example, all news pages to build

an overview of the latest updates)

° List all pages underneath a page to build a simple sub-navigation

• RSS Displayer: Fetches the latest updates from another site by using an RSS feed

• Search: Inserts a search block with which you can run a full-text search across your site Please note that you need to run a job to index the content

of your site! Type jobs in the intelligent search box, if you click on the first result, you'll find a screen where you can execute several jobs (the search indexer included)

• Slideshow: This block helps display several pictures as a slideshow You can also add a link to each slide, allowing your visitor to navigate away to

a subpage by clicking on a slide

• Survey: Want to find out if your visitors like the new desert recipe you've just posted? Add this block and you'll get the answer in no time!

• Tags: When building a blog, you usually assign tags to each post By using this block, you can list all of the tags and find posts connected to them

• Video Player: Have a look at this block if you want to embed a video on your site

• YouTube Video: If you want to insert a video which is hosted on YouTube, use this block and your visitors get access to your favorite YouTube videos

Chapter 1

[ 13 ]

• Blog Date Archive: Much like the Date Navigation block, but it doesn't display the actual page/post and just links to an overview page where all of the matching pages are shown

Getting more blocks from the marketplace

If you look on the screen where you can see all of the installed block types,

there's also a button called More Add-ons When you click on this button,

you're asked to connect your site to the concrete5.org marketplace This is a step you just need to do once per site After that, you can access the list of add-ons right from the site and install more blocks if needed

What is an area?

In concrete5, you don't specify where a picture or HTML text belongs; you simply define where the content managed by the user is located A place where content can

be placed is called an area.

If you look at the following screenshot, you'll see red rectangles marking a block There are three blocks, one in the main area and two in the sidebar area At the

bottom, there are Add To Main and Add To Sidebar links These links are part of

the areas that let you add new blocks

Getting Started

Adding and updating blocks

While you might want to look at all of the different options, this part is the one you and your clients need the most Let's change the heading of the home page! If

you're not in edit mode yet, click on the Edit button and the layout will change, as

explained in the earlier paragraph

Another change is shown when you click on an existing block Each block has a menu where you can see a few options:

What are these options? They are explained as follows:

• Edit: This is obviously the menu item you need to edit your block Each

block has a different interface where you can update its content There's

an example after this list

• Copy to Clipboard: This is like the clipboard you have in your operating

system, but it's not connected to it It basically copies an instance of a block into a holding place which you can later use to insert a new block with the same content on another page

• Move: Each area can have several blocks and sometimes you want to

change their order This menu item changes the interface to a different

Chapter 1

[ 15 ]

• Design: This menu item lets you use some CSS-design features to change the

border, alignment, font, color, and more

• Custom Template: Each block has at least one template which is responsible

for its output However, a block can have more than one template which allows you to change the output in no time

As we go on, we'll create our own templates for existing blocks to change the

appearance, but for now, we'll just look at the basic editing function

If you click on the block where the heading is, you'll see the preceding menu Click

on the Edit menu item and a new dialog pops up:

This dialog looks different for pretty much each block type, as most blocks have a different purpose as well However, almost all of the blocks are easy to understand, and someone who has worked with computers for a while should be able to use them without any instructions

The Content block you can see in the preceding screenshot is using TinyMCE to

give you a word processor-like interface Compared to the default TinyMCE editor,

there's just one change on the top There are some links such as Add Image which

are concrete5-specific They allow you to embed an image from the concrete5 file manager as well as add a link to another page of your site

Getting Started

After you've changed the heading or content according to your needs, click on the

Save button and you'll see the changes within the page layout At this point, the

changes are visible to you, but as they aren't published yet, website visitors won't see them

Adding a new block is pretty much the same, you look for the area where you want

to add a new block If you want to add another content block to the sidebar, click on

the Add To Sidebar link, as shown on the following screenshot:

You'll see a list of all available blocks Pick the Content block and you'll see the same

block interface again, but this time without any content in it Enter everything you

need and confirm it by clicking on the Add button.

Publishing changes and managing

versions

Once you've updated your content, you probably want to publish the changes at some point You can leave the edited page without publishing it, keeping a draft version of the changes, but let's look at how you can make the changes available to

Chapter 1

[ 17 ]

The button that jumps out at your eyes the quickest is the one you'll probably use the

most in this situation The Publish My Edits button will automatically make all of

your changes available to the public If you want to keep track of your changes, you

can also replace the default text Version 2 with a comment of your own It's just a

comment which will be listed when looking at previous versions, it doesn't have any functionality connected to it

The other two buttons that are only visible in the edit mode are:

• Discard My Edits: Made a mistake and don't want to save the changes at all?

Use this button

• Preview My Edits: This button will save the changes but not approve them

Logged in editors can see and choose to continue editing, but normal users only see the approved version

If you accidentally published a change you didn't want to release yet, don't worry, there's an easy way back! In the menu shown in the preceding screenshot, click on

the Versions link and a new dialog will show up:

Getting Started

There are four buttons available:

• 1: This is the compare versions button If you select two or more page

versions, this button will become active and shows you every selected

version within a tab in a new dialog

• 2: This is the approve button Select a version which isn't approved at the

moment (including older versions) , and this button will be active, allowing you to change the publicly-visible page version Thanks to this button, there's always an easy way back

• 3: This is the copy version button Select one version and this button will

make it possible to copy an existing version into a new one

• 4: This is the delete button Select a page version that isn't approved at the

moment and this button allows you to delete the selected version

Managing files

A site without any pictures or files could look a bit boring, but luckily we have

plenty of options to change that If you navigate to the dashboard, you can see a File

Manager link which will forward you to the default file manager screen in concrete5:

If you're used to working with another CMS, you'll probably have worked with

a hierarchical folder structure known from most operating systems In concrete5,

to use the Upload Multiple button where you can select as many files as you want

and upload them in one bulk operation

We'll use the traditional single file upload Start by clicking on the Choose File

button and select the file you want to upload from your local hard drive After that,

you only need to click on the Upload File button and you'll see another dialog where

you can update the metadata of your new file:

Getting Started

If you click on one of the attributes such as Title, you'll see an input field where you

can update the attribute value Click on the icon on the right-hand side to confirm the changes to the value

There are more attributes in the second tab, Other Properties They all work the

same way Click on the attribute name, update the value, and confirm the change

by clicking on the icon

In the last tab Sets, you have the option to assign your new file to an existing set as

well as a new set which you can create there as well If you upload multiple files

at once, you'll see the same dialog However, if you assign a set after the upload process is finished, you'll assign that set to all of the files This is especially handy

if you upload an entire gallery in one step Just upload all of the files, assign the set with one action, and pull all of the files from that set into a slideshow

Working with stacks

A stack is basically a collection of blocks you can reuse in multiple places on your

site Let's start by creating a new stack You'll easily figure out the idea behind it with this little example! You can use the intelligent search bar at the top which you

can focus by using the Tab key Type Stack and concrete5 will search for all of the choices containing the keyword stack:

Click on the first entry, Stacks In the next screen, type the name of the new stack,

for example, Contact Data in the Name field Hit the Add button, click on the

newly created stack, and you'll be forwarded to the following screen:

Chapter 1

[ 21 ]

In this screen, you can add new blocks by clicking on the Add Block button Adding

new blocks works the same way as always from this point Once you've added all of the blocks you want, you'll need to confirm the changes you've made to our stack by

clicking on the Approve Changes button, seen here:

Click on the Return to Website link at the top-left corner to navigate back to your

home page Go to the page where you want to insert the Contact Data stack, click

on the Add To Sidebar link, and select the Add Stack menu item, as shown in the

following screenshot:

Select the Contact Data stack we created before and you'll see a new dialog In this

dialog, you either insert the entire stack with all of the blocks, or just a single block from the stack This is, of course, only useful if you actually have more than one

block in your stack In our case, select the Add Stack menu item to insert the stack

with all blocks

If you click on the stack again, you'll see a menu which is slightly different from

the menu you see when you click on a block The first item is called Manage

Stack Contents instead of edit If you click on this item, you'll be redirected to the

dashboard page where you've previously managed your stack Here you can add, edit, or remove blocks, and once you approve the changes, the update is visible on all of the pages where this stack has been added

Change the layout and style of your

pages, areas, and blocks

While most of your pages share the same logo as well as certain design elements, the content is quite likely to have a different structure One page might have a sidebar, another page might have three columns, and another one might just have one big picture

In concrete5, there are several ways to arrange your content in different structures Each tool has certain advantages, and depending on your needs, you should pick the right one We'll look at all of these tools in this section, making sure that at the end you'll know the right way to build the page structure you want

Chapter 1

[ 23 ]

Let's have a look at the pretty much self-explanatory screen where you can select the

page types You can open it by hovering over the Edit button in the concrete5 toolbar and clicking on the Design link:

In the upper part of this screen, you can see all available types Each type has a thumbnail assigned to it to give you an impression about the actual structure you're going to assign to your page Select the one you need and confirm it by clicking on

the Save button and you'll immediately see the new layout.

To get a better understanding of page types, look at the following block diagram:

Getting Started

Every page type has an actual template, making sure the content is found in one

or more containers However, not every page type has its own template As just mentioned, sometimes you just need a page type to make a group of certain pages and don't need a different HTML structure, and thus no PHP file

The name of the page type is slightly different from the name of the matching

template If we take the Full Width page type, you'd need to replace all of the spaces

with underscores, convert the text to lowercase, and append php The Full Width

page type becomes full_width.php

If there's no template that matches the page types, concrete5 will simply use

default.php as a fallback This is also why you should try to keep default.php as simple as possible and avoid adding too many fancy things

Design to customize the appearance of blocks and areas

concrete5 has a feature which allows you to change some of the CSS properties without touching a single file The design menu you need to see for this feature can be found in different places There are three different places where this menu can be found:

• Clicking on an existing block

• Clicking on a stack you've inserted

• Clicking on the Add to… link at the end of an area while you're in edit mode

The screen you'll see is always the same, as shown in the following screenshot, but the element and the styles that are applied differ depending on the element where you've opened the design menu

Splitting content in different columns

Sometimes you might need a column structure different from anything you've seen available in the page types You could create a new page type, but if it's a structure you just need once, it's probably better to use the layout feature Let's have a look!

Getting Started

First, you need to navigate to the page where you want to split up the area Change

into the edit mode and click on the Add To… link underneath the area you want to split Click on the Add Layout button and you'll see a dialog like this:

Specify the number of columns and rows you need as well as the spacing between the cells You can later change the width of the columns by dragging handles above

the area If you want fixed widths, tick the Lock Widths checkbox In case you want

to use the same layout again, enable the last checkbox and enter a name You can later select the previously created layouts again After you've added the layout, you'll see more areas, as shown below:

The Layout 1 : Cell 1 and Layout 1: Cell 2 areas work like any other area, they are just half the size of the original Main area Drag the handle in the middle to the

left-hand side or to the right-hand side to change the column widths The layout can be edited, removed, reordered, and locked by clicking on the plus icon at the top-left corner

Chapter 1

[ 27 ]

Creating and managing pages

While the default page structure is okay for a basic site, you'll probably want to have a different site structure In concrete5, you can manage all of your pages in the in-site editing mode, but it's probably easier for most people if they have a hierarchical structure to look at

Luckily, concrete5 offers this as well Hover over the Dashboard button at the top and click on the Full Sitemap link in the little panel underneath the button You'll

be forwarded to a screen where you can see a common tree-like structure of all your pages, as shown in the following screenshot:

In this screen, you have all of the functions you'd expect from a tree-like structure Each node with child elements can be expanded and collapsed While this screen looks rather simple, there are a few hidden functions Click on a node with your left mouse button and you should see a menu such as the one shown in the

following screenshot:

Getting Started

What's available here? The available options are explained as follows:

• Visit: This option opens the page in the current browser window.

• Properties: This option edits the page name, meta title, and any other

attribute you've assigned to your pages

• Speed Settings: This option shows the various caching options to improve

the performance of your site There's usually no need to worry about it unless you have a big site

• Set Permissions: This option shows different options to hide a page from

certain groups

• Design: This option displays a screen where you can change the page theme

for a page or switch the page type

• Versions: This option displays all available page versions It also offers the

option to undo a change by reapproving an old version

• Delete: Tired of that page? Remove it with this function You can restore

pages that you've accidentally deleted in the site map Display system pages there and you'll find an item called trash where you'll find the deleted pages

• Add Page: This option allows you to add a new subpage underneath the one

you've selected

• Add External Link: The site structure you build in the sitemap is directly used

to build the navigation This is the reason why you do not only add pages to the tree, but also external links Want to open http://www.concrete5.org/from your sites navigation? Add an external link!

Adding a new page

Let's have a look at the process for adding a new page to your site If you're not

already in the site map, hover over the Dashboard button at the top and click on the Full Sitemap link.

Click on the page underneath where you'd like to have a new page In this example,

we want to create a new page showing the location of our office:

Chapter 1

[ 29 ]

In the first step, you need to select the page type you want to use as the new page (as shown below) Your choice doesn't really matter much and you can change it at any time if you are not content with your decision: