Advanced Navigation | concrete5 Beginner's Guide

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

concrete5 Beginner's Guide

4.1 (10)

concrete5 Beginner's Guide

4.1 (10)

Overview of this book

concrete5

concrete5

Credits

Credits

About the Author

About the Author

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Preface

Free Chapter

Installation

Installation

Preparing for installation

XAMPP installation

Time for action – installing XAMPP

Downloading concrete5

Time for action – downloading the latest version

Creating an empty SQL database

Time for action – creating an empty SQL database

Installing concrete5

Time for action – installing concrete5

Time for action – enabling pretty URLs

Summary

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

The dashboard

Adding more pages

Time for action – adding pages to create a news section

Time for action – adding blocks to new page

Page defaults

Time for action – adding default blocks to a page type

Page commands

Time for action – moving and sorting your pages

Splitting content into columns

Time for action – creating a multi-column layout

Scrapbook

Time for action – putting your addresses in a scrapbook

Design and CSS

Time for action – styling your blocks

Summary

Permissions

Permissions

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 – creating a protected website

Time for action – setting task permissions

Time for action – granting partial dashboard access

Advanced permission mode

Time for action – activating the advanced permission mode

Time for action – setting time based page visibility

Time for action – setting sub-page permissions

Time for action – using block permissions

Time for action – restricting allowed blocks for an area

Summary

Add-ons

Add-ons

What's an add-on?

Time for action – installing an add-on

Time for action – removing an add-on

Time for action – manually installing an add-on

Theme

Blocks

Packages

Summary

Creating Your Own Theme

Creating Your Own Theme

The 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 – list 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 block wrapper in area

Working with page attributes

Time for action – using attributes to set background picture

Time for action – accessing attribute data from a template

Block in templates

Time for action – replacing header area with template block

Time for action – finding autonav block properties

Time for action – specifying block template in area

Applying theme to single page

Time for action – creating single page layout

Time for action – adding variables to handle login errors

Creating a customizable theme

Time for action – a creating customizable theme

Summary

Customizing Block Layout

Customizing Block Layout

Custom templates to modify block layout

Thumbnails in a page list

Time for action – adding thumbnails to a page list

Time for action – restricting thumbnail dimension

Time for action – restricting thumbnails to a custom dimension

Template folder

Time for action – creating a template folder

Picture pop-ups in content block

Time for action – building a lightbox gallery

Gravatar picture in 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

Auto-hide news page list

Time for action – creating an auto-hide page list

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

Advanced tooltip in content block

Time for action – creating advanced tooltips

Summary

Advanced Navigation

Advanced Navigation

Autonav introduction

Time for action – undoing autonav block integration

Images in the navigation

Time for action – creating page attributes for navigation pictures

Time for action – creating block picture navigation template

CSS3 hover effect

Time for action – creating a CSS3 transition autonav template

Drop-down navigation

Time for action – creating SooperFish template

Hierarchical tree navigation

Time for action – building a file explorer-like navigation

Dynamically loading content

Time for action – dynamically loading concret5 content using jQuery

Time for action – direct link with dynamic content

Summary

Creating Your Own Add-on Block

Creating Your Own Add-on Block

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 – adding check for mandatory fields

Time for action – adding product categories

Product list

Time for action – handling multiple block versions

Time for action – creating the product list block

Picture magnifier

Time for action – creating the picture magnifier block

PDF generation block

Time for action – creating the PDF generation block

FTP gallery

Time for action – creating the FTP based picture gallery

Summary

Everything in a Package

Everything in a Package

What's a package?

Time for action – creating the package controller

Moving templates into package

Moving themes and blocks into the package

Time for action – moving jQZoom block into the package

Time for action – moving the PDF block into the package

Hooking into core events

Maintenance tasks and jobs

Time for action – execute 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 CSS fix in the package

Summary

Dashboard Extensions

Dashboard Extensions

MVC—model view controller

Broken link interface

Time for action – creating the broken links dashboard extension

Time for action – creating package model

Time for action – adding a second controller method

File editor embedded in the dashboard

Time for action – creating the file editor add-on

Summary

Deployment and Configuration

Deployment and Configuration

Deployment

Time for action – disabling pretty URL and cache

Time for action – transferring a MySQL database

Time for action – transferring files to the server

Time for action – updating the configuration file

Time for action – setting file permissions

Configuration

Time for action – installing a translation file

Time for action – getting PHP information

Summary

Pop Quiz Answers

Pop Quiz Answers

Chapter 1: Installation

Chapter 2: Working with concrete5

Chapter 3: Permissions

Chapter 4: Add-ons

Chapter 5: Creating Your Own Theme

Chapter 6: Creating Your Own Add-on Block

Chapter 9: Everything in a Package

Index

Index

CSS3 hover effect

While CSS3 isn't well supported yet, it allows us to do things for which we previously needed JavaScript. The use of JavaScript would have been possible for most effects as well, but we're going to look at a CSS3-only effect to get a quick impression to see how easy it is to integrate upcoming web technologies. Make sure you're using an up-to-date browser like Chrome 6 to see the effect.

The effect we're going to use is just a bit more than a classic CSS hover effect which you've probably used before. It starts with something like this:

a {
  color: silver;
}
a:hover {
  color: black;
}

Such a CSS file would display all the links in silver and, when you hover over them, in black. With CSS3, things get a bit fancier, but let's create the new template; we'll see how it looks very quickly.

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

concrete5 Beginner's Guide

Search

Your notes and bookmarks