Book Image

Creating Concrete5 Themes

Book Image

Creating Concrete5 Themes

Overview of this book

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 (13 chapters)
Creating concrete5 Themes
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

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.

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 them later in this book.

  • 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.

  • Google Map: Add this block, supply an address, and your website visitors will be able to see where you live on a well-known Google map.

  • Guestbook/Comments: This block provides a traditional guestbook, mostly used in blog posts, to allow your visitors to post comments. Includes e-mail notification as well as an approval functionality if required.

  • 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.

  • 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.

Tip

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.

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 mode where you can rearrange your blocks. You can also move a block from one area to another.

  • Delete: This menu item removes blocks from the page.

  • 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.

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.