Book Image

concrete5: Beginner's Guide - Second Edition - Second Edition

Book Image

concrete5: Beginner's Guide - Second Edition - Second Edition

Overview of this book

concrete5 is an open source content management system (CMS) for publishing content on the World Wide Web and intranets. concrete5 is designed for ease of use, and for users with limited technical skills. It enables users to edit site content directly from the page. It provides version management for every page and allows users to edit images through an embedded editor on the page. concrete5 Beginner's Guide shows you everything you need to get your own site up and running in no time. You will then learn how to change the look of it before you find out all you need to add custom functionality to concrete5. concrete5 Beginner's Guide starts with installation, then you customize the look and feel and continue to add your own functionality. After you've installed and configured your own concrete5 site, we'll have a closer look at themes and integrate a simple layout into concrete5. Afterwards, we're going to build a block from scratch which you can use to manage a news section. We're also going to add a button to our site which can be used to create a PDF document on the fly. This book also covers some examples that show you how to integrate an existing jQuery plugin. concrete5 Beginner's Guide is a book for developers looking to get started with concrete5 in order to create great websites and applications.

Related Content you might be interested in

Current Title:

Small book image
concrete5: Beginner's Guide - Second Edition - Second Edition
Apr, 2013 | 324 pages
No titles found
Table of Contents (19 chapters)
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Pop Quiz Answers
Pop Quiz Answers
Free Chapter
1
Installing concrete5
Installing concrete5
Preparing for installation
Installing Bitnami
Time for action – installing Bitnami WAMP stack
Downloading concrete5
Time for action – downloading the latest version
Creating an empty MySQL database
Time for action – creating a MySQL database
Installing concrete5
Time for action – installing concrete5
Time for action – disabling caching
Time for action – enabling pretty URLs
Summary
2
Working with concrete5
Working with concrete5
Getting familiar with concrete5
Time for action – logging in to concrete5
Adding new blocks
Time for action – adding new blocks
Time for action – editing existing blocks
Time for action – exiting edit mode
Working with the dashboard
Time for action – changing the site's name
Adding more pages
Time for action – adding pages to create a news section
Time for action – adding blocks to a new page
Managing page defaults
Time for action – adding default blocks to a page type
Time for action – adding blocks to existing pages
Moving and sorting pages
Time for action – moving and sorting your pages
Splitting content into columns
Time for action – creating a multi-column layout
Copying blocks using the clipboard
Time for action – copying the block using the clipboard
Working with stacks
Time for action – working with stacks
Styling with design and CSS
Time for action – styling your blocks
Summary
3
Managing Permissions
Managing Permissions
Managing basic permissions
Time for action – adding groups
Time for action – adding users
Time for action – assigning sitemap permissions
Time for action – granting file manager permissions
Time for action – granting edit access
Time for action – creating a protected website
Time for action – granting partial dashboard access
Time for action – restricting access to blocks
Working with the advanced permission mode
Time for action – activating the advanced permission mode
Time for action – removing permissions to change permissions
Time for action – setting subpage permissions
Summary
4
Managing Add-ons
Managing Add-ons
Introduction to add-ons
Time for action – installing an add-on
Time for action – uninstalling an add-on
Time for action – installing an add-on manually
Working with theme add-ons
Working with block add-ons
Packages
Summary
5
Creating Your Own Theme
Creating Your Own Theme
Starting with a new layout
Converting HTML and CSS to a concrete5 theme
Time for action – creating the concrete5 theme header
Time for action – creating the concrete5 theme footer
Time for action – creating a page template
Time for action – creating more page templates
Installing your theme
Time for action – installing theme
PHP constants and functions
Time for action – getting a list of available constants
Time for action – listing all available functions
Time for action – checking for edit mode
Time for action – hiding content from anonymous visitors
Time for action – restricting numbers of blocks per area
Time for action – inserting a block wrapper in an area
Working with page attributes
Time for action – using attributes to set background picture
Time for action – accessing attribute data from a template
Inserting blocks in templates
Time for action – replacing the header area with a template block
Time for action – finding autonav block properties
Time for action – specifying block templates in an area
Applying a theme to a single page
Time for action – creating a single page layout
Time for action – adding variables to handle login errors
Creating customizable themes
Time for action – creating a customizable theme
Summary
6
Customizing Block Layouts
Customizing Block Layouts
Custom templates to modify a block layout
Thumbnails in a page list
Time for action – adding thumbnails to a page list
Time for action – restricting thumbnails to a custom dimension
Block template folder
Time for action – creating a template folder
Picture pop-ups in a content block
Time for action – building a lightbox gallery
Adding a Gravatar picture in the guestbook
Time for action – adding a Gravatar picture to the guestbook
Avoiding duplicate code in a custom template
Time for action – including an existing template
Transforming a slideshow into a gallery
Time for action – creating a gallery template for a slideshow
Time for action – adding a slideshow gallery
Slideshow using file attributes
Time for action – adding file attributes to our slideshow
Time for action – using file attributes in the gallery
Using advanced tooltips in the content block
Time for action – creating advanced tooltips
Summary
7
Adding Site Navigation
Adding Site Navigation
Introducing the autonav block
Time for action – undoing autonav block integration
Adding navigation images
Time for action – creating page attributes for navigation pictures
Time for action – creating a block picture navigation template
Adding a CSS3 hover effect
Time for action – creating a CSS3 transition autonav template
Building a drop-down navigation
Time for action – creating a SooperFish template
Sliding mobile navigation
Time for action – building a mobile navigation
Summary
8
Creating your Own Add-on Block
Creating your Own Add-on Block
Building a product information block
Time for action – creating the database structure
Time for action – creating the block controller
Time for action – creating the editing interface
Time for action – printing block output
Time for action – installing a block
Time for action – adding a check for mandatory fields
Time for action – adding product categories
Building a product list
Time for action – handling multiple block versions
Time for action – creating the product list block
Creating a picture magnifier
Time for action – creating the picture magnifier block
Creating a PDF-generating block
Time for action – creating the PDF generation block
Creating a simple gallery
Time for action – creating the simple gallery block
Summary
9
Everything in a Package
Everything in a Package
What's a package?
Time for action – creating the package controller
Moving templates into a package
Time for action – moving templates into a package
Moving a theme and blocks into a package
Time for action – uninstalling blocks
Time for action – moving the jQZoom block into a package
Time for action – moving the PDF block into a package
Hooking into core events
Time for action – hooking into an event from a package
Working with maintenance tasks and jobs
Time for action – executing concrete5 jobs periodically
Time for action – creating a job to check for broken links
Injecting header items
Time for action – creating global tooltips
Time for action – integrating a CSS fix in a package
Summary
10
Dashboard Extensions
Dashboard Extensions
Working with the MVC pattern
Adding the broken link interface
Time for action – creating the broken links dashboard extension
Time for action – creating a package model
Time for action – adding a second controller method
Embedding a file editor in the dashboard
Time for action – creating the file editor add-on
Summary
11
Deployment and Configuration
Deployment and Configuration
Deploying a concrete5 site
Time for action – disabling pretty URLs and the cache
Time for action – transferring MySQL databases
Time for action – transferring files to the server
Time for action – updating the configuration file
Time for action – setting file permissions
Updating production configuration
Time for action – installing a translation file
Time for action – getting PHP information
Time for action – measuring site performance
Where to go next
Summary
Index
Index

Time for action – creating a template folder

Follow these steps to create a folder for your templates:

  1. Create a new folder in blocks\page_list\templates called news_2.

  2. Copy the previously created news.php file into this directory and rename itview.php.

  3. Create a new file called view.css with the following content:

    .ccm-page-list {
   border-bottom: 1px solid gray;
   padding-bottom: 20px;
   margin-bottom: 20px;
}
.ccm-page-list a {
   color: #262626;
   text-decoration: none;
}

What just happened?

We've created a folder instead of a single file for our template. While view.php is mandatory, there are lots of optional files you can use. Within a template in the templates folder, the following are the files included by concrete5 in the header:

  • view.js

  • view.css

  • js/<anything>.js

  • css/<anything>.css

The following screenshot shows you an example of this structure:

Pop quiz – how to include CSS and JavaScript files

Q1. If you created a template for the content block found at the following...

Previous Section
End of Section 7
Next Section