O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating concrete5 Themes

Book Description

Create high quality concrete5 themes using practical recipes and responsive techniques to make it mobile-ready

  • Get to grips with the concrete5 architecture
  • Learn how to create a concrete5 theme
  • Discover how to make a theme responsive to improve it for small devices

In Detail

Creating a concrete5 theme isn't complicated if there’s already a HTML document. There are only very few PHP functions you’ll have to add, but those are powerful and give you a lot of freedom. As you’ll learn to create mobile ready themes, you’ll start to see that there’s almost no limit in what you can do.

"Creating Concrete5 Themes" is a practical, hands-on guide that provides you with a number of examples that will teach you how to create powerful concrete5 themes, change the look of content block elements, and even make your site ready for mobile devices.

"Creating Concrete5 Themes" starts with a few words about the editing concept and architecture of concrete5 and then continues with the creation of a basic theme which gets extended with more and more elements until the theme is mobile ready.

You will learn where to find the information necessary to get your own concrete5 site and then get a quick introduction to understand the idea of the in-site editing concept. We’ll then create a theme which is extended with features and more details as we progress. You’ll also see some examples to show you the process of overriding elements from the core without losing the ability to upgrade concrete5 in the future. Once we’ve customized every element in concrete5 to build a complete theme, we’ll have a look at responsive techniques to make your site ready for small screen devices such as mobile phones and tablets.

Table of Contents

  1. Creating concrete5 Themes
    1. Table of Contents
    2. Creating concrete5 Themes
    3. Credits
    4. About the Author
    5. About the Reviewer
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Getting Started
      1. Getting your own concrete5 site
      2. Start working with concrete5
      3. Dashboard to manage concrete5
      4. How to edit content
        1. What are blocks
        2. What is an area?
        3. Adding and updating blocks
      5. Publishing changes and managing versions
      6. Managing files
        1. Uploading files
      7. Working with stacks
      8. Change the layout and style of your pages, areas, and blocks
        1. Page types
        2. Design to customize the appearance of blocks and areas
        3. Splitting content in different columns
      9. Creating and managing pages
        1. Adding a new page
      10. Adding default blocks to page types
      11. Summary
    9. 2. Architecture of concrete5
      1. The file structure of concrete5
        1. concrete5 updates
      2. Caching for better performance
      3. The distinction of Model-View-Controller (MVC)
      4. The anatomy of a page
      5. The anatomy of a block
      6. concrete5 API and helpers
        1. Helpers
      7. Events to hook into the core
      8. What happens when a page is rendered
      9. Why you might want to build a package
        1. Basic package installer
        2. Marketplace submission
      10. Summary
    10. 3. Creating Your First Theme
      1. Getting started with themes
      2. Creating the first theme
        1. Adding our page type template
        2. Creating the shared header
        3. Creating the shared footer
        4. Adding a theme thumbnail
        5. Installing your theme
      3. Adding CSS files to a theme
        1. Adding main.css
        2. Adding typography.css
        3. Content block styles
        4. Performance perfection when including CSS files
        5. Customizable styles
      4. Adding more details
        1. Global areas
        2. Replacing the header area with a global area
        3. Putting blocks in templates
          1. Finding block properties
        4. Templates for page types
        5. Number of blocks per area
        6. Background picture by page attribute
          1. Creating the attribute to hold our picture
          2. Assigning attribute to page type
          3. Selecting background pictures
          4. Working with attributes in the theme
        7. Page-specific variables
          1. Getting page name and description
          2. Checking the edit mode
          3. Getting the current page type
      5. Summary
    11. 4. Styling Single Pages
      1. What is a single page?
        1. Creating our own single page
        2. Installing single pages
      2. Changing the single page layout
        1. Adding view.php to your theme
        2. Applying the theme to single pages
      3. Overriding the single page's HTML output
      4. Summary
    12. 5. Styling the Block Output
      1. Overriding block templates
        1. Additional block templates
        2. Block templates with CSS and JavaScript
        3. Content block in a box
      2. Overriding blocks in packages
      3. Changing the navigation
        1. Working with the drop-down block template
      4. Creating a portfolio list with filter
        1. Adding portfolio attributes
          1. Creating a page list filter template
      5. Summary
    13. 6. Responsive Themes
      1. Responsive or separate mobile websites
      2. Responsive techniques
        1. Media queries
        2. How to scale pictures
        3. Pictures on high-density screens
        4. Viewport on small-screen devices
        5. Navigation for small screens
      3. Responsive layout implementation in concrete5
        1. Responsive bootstrap CSS
        2. Responsive drop-down navigation
        3. Responsive sidebar navigation
      4. Summary
    14. Index