Tutorials – Learning Composr

Mobile design
Item has a rating of 5 (Liked by KingBast)

This tutorial explains both Composr's mobile mode and responsive design techniques.
by Chris
1st May 2015
Core Doc; Difficulty: Regular

Guide to web technologies (including HTML, CSS, and JavaScript)
Item has a rating of 5 (Liked by KingBast)

This tutorial is an introduction to the main standard web technologies that Composr is built upon.
1st May 2009
Core Doc; Difficulty: Regular

Tempcode programming
Item has a rating of 5 (Liked by KingBast)

You'll be shocked at how much themeing control you can muster using Tempcode. Learn all about it...
by Chris
1st September 2008
Core Doc; Difficulty: Regular

Themeing your site
Item has a rating of 5 (Liked by KingBast)

Our key themeing tutorial - how to re-theme your site, by changing CSS, templates, and theme images.
by Allen
1st August 2008
Core Doc; Difficulty: Regular

Using Inspect Element in Chrome
Item has a rating of 5 (Liked by Chris Graham)

Developer tool for casually testing HTML and CSS changes.
by Manoj
20th July 2017
Auxillary Doc; Difficulty: Regular

Don't Make Me Think: A Common Sense Approach to Web Usability

Since Don't Make Me Think was first published in 2000, hundreds of thousands of Web designers and developers have relied on usability guru Steve Krug's guide to help them understand the principles of intuitive navigation and information design. Witty, commonsensical, and eminently practical, it's one of the best-loved and most recommended books on the subject.
by Steve
2nd January 2015
Auxillary Doc; Difficulty: Novice

Theme management

Theme management in Composr CMS: installing new themes, exporting a theme, deleting themes, and where to make theme edits.
by Rajesh
13th March 2017
Auxillary Doc; Difficulty: Novice

Changing the Font and Colour Styles via CSS

How to change font and colour styles by editing the CSS.
by Manoj
20th July 2017
Auxillary Doc; Difficulty: Regular

About Face 3: The Essentials of Interaction Design

Effective and practical tools you need to design great desktop applications, Web 2.0 sites, and mobile devices.
by Alan
2nd January 2015
Auxillary Doc; Difficulty: Expert

Managing cookies

Managing cookies through Google Chrome Developer Tools.
by Manoj
20th July 2017
Auxillary Doc; Difficulty: Regular

Designed for Use: Create Usable Interfaces for Applications and the Web

Explanations of how to make usability the cornerstone of every point in your design process, walking you through the necessary steps to plan the design for an application or website, test it, and get usage data after the design is complete. He shows you how to focus your design process on the most important thing: helping people get things done, easily and efficiently.
by Lukas
2nd January 2015
Auxillary Doc; Difficulty: Regular

Adjusting fixed width wrapper

Adjusting fixed width by editing global.css
by Manoj
20th July 2017
Auxillary Doc; Difficulty: Regular

Introduction to web design

This tutorial is an introduction to the artistic side of web design.
by Chris
1st May 2009
Core Doc; Difficulty: Regular

The Design of Everyday Things

Even the smartest among us can feel inept as we try to figure out the shower control in a hotel or attempt to navigate an unfamiliar television set or stove. When The Design of Everyday Things was published in 1988, cognitive scientist Don Norman provocatively proposed that the fault lies not in ourselves, but in design that ignores the needs and psychology of people.
by Donald
2nd January 2015
Auxillary Doc; Difficulty: Novice

Inline editing in Composr

An explanation of how the inline editing functionality deep within Composr works.
by Chris
1st January 2018
Auxillary Doc; Difficulty: Expert

Editing List Styles Via CSS

Editing list styles, changing bullet icon image.
by Manoj
20th July 2017
Auxillary Doc; Difficulty: Regular

Theme Lifecycle

How the files in a theme are managed, from initial theme creation, through upgrades.
by Chris
1st November 2014
Core Doc; Difficulty: Regular

Making a new theme

An illustrated step-by-step tutorial on making a new theme.
by Jean
1st May 2012
Auxillary Doc; Difficulty: Novice

Themes 101 - replacing the header

A live themeing tutorial showing how to change the header. Note that this was for an older version so is quite outdated.
by Allen
2nd January 2015
Auxillary Doc; Difficulty: Regular

Customising buttons via CSS

Customise button border colour, apply shadow effect by editing CSS.
by Manoj
20th July 2017
Auxillary Doc; Difficulty: Regular

Identifying JavaScript issues: The Console

Identifying JavaScript issues using Inspect Element developer tool.
by Manoj
20th July 2017
Auxillary Doc; Difficulty: Regular

The Logo Wizard: instant logo generation

The Logo Wizard will help you quickly create a logo for your website, and apply it to the theme currently used on the main website. The logos generated are very simple, so more professional sites will only wish to use the generated logo as a placeholder.
by Rajesh
28th February 2017
Auxillary Doc; Difficulty: Novice

Change / Remove background image

Edit or remove the background image of a Composr website.
by Manoj
20th July 2017
Auxillary Doc; Difficulty: Regular

Browser version requirements

This tutorial details the browser requirements for visitors to a Composr site, determined by the CSS/XHTML/JavaScript in our default theme.
1st August 2008
Core Doc; Difficulty: Novice

Helping improve site accessibility for disabled users

We discuss how to ensure your website remains accessible to people with disabilities (Composr meets WCAG out-of-the-box).
1st August 2008
Core Doc; Difficulty: Regular

JavaScript & jQuery

JavaScript lets you supercharge your web pages with animation, interactivity, and visual effects, but learning the language isn't easy. This fully updated and expanded guide takes you step-by-step through JavaScript basics, then shows you how to save time and effort with jQuery.
2nd January 2015
Auxillary Doc; Difficulty: Expert

Copying and pasting content into the editor

Copy and paste content into the WYSIWYG editor through different methods.
by Manoj
20th July 2017
Auxillary Doc; Difficulty: Regular

Adding a TeamSpeak block

How to add a TSViewer block to a Composr CMS site's left panel, and then make some style changes.
9th February 2017
Auxillary Doc; Difficulty: Regular

HTML5: The Missing Manual

HTML5 is more than a markup language—it's a collection of several independent web standards. Fortunately, this expanded guide covers everything you need in one convenient place.
2nd January 2015
Auxillary Doc; Difficulty: Regular

Customise Styling of Panels via CSS

Change panels background colours by editing the CSS
by Manoj
20th July 2017
Auxillary Doc; Difficulty: Regular

CSS3: The Missing Manual

CSS3 lets you create professional-looking websites, but learning its finer points can be tricky—even for seasoned web developers. This Missing Manual shows you how to take your HTML and CSS skills to the next level, with valuable tips, tricks, and step-by-step instructions.
2nd January 2015
Auxillary Doc; Difficulty: Regular

Composr CMS (Part 1: Templating)

In this first video, I take a look at how I'm using Composr for the NOTS website, focusing on the template system.
by Jacob
17th January 2018
Auxillary Doc; Difficulty: Novice

Changing the ocPortal header image

A live themeing tutorial showing how to change the page header. Note that this was for an older version so is very outdated.
by Chris
2nd January 2015
Auxillary Doc; Difficulty: Novice

A fully custom logo

How to switch out the default logo to something completely custom (i.e. without using the Logo Wizard).
by Chris
13th March 2018
Auxillary Doc; Difficulty: Regular

Creating a filtered & styled catalogue

A quick & dirty video showing the creation of a catalogue that can then be styled and filtered.
by Chris
20th January 2017
Auxillary Doc; Difficulty: Expert

Tips: Block permissions and visibility

Examples of how to hide blocks based upon context.
9th May 2017
Auxillary Doc; Difficulty: Regular

How to Change Your Favicon and Site Logo in Composr

There are two styling elements you will probably want to change when you begin working on your new Composr website. You will need to change the site logo and you will also need to change your website's favicon.
by Steve
1st May 2013
Auxillary Doc; Difficulty: Novice

Fixed-width layouts

A very practical tutorial showing how to created a fixed-width layout, and how to change the site header.
by Chris
1st August 2008
Core Doc; Difficulty: Novice

Editing header style (borders and font style) via CSS

Change heading font size, colour and format for headings. Set border styles by editing the CSS.
by Manoj
20th July 2017
Auxillary Doc; Difficulty: Regular

The Laws of Simplicity (Simplicity: Design, Technology, Business, Life)

Finally, we are learning that simplicity equals sanity. But sometimes we find ourselves caught up in the simplicity paradox: we want something that's simple and easy to use, but also does all the complex things we might ever want it to do.
by John
2nd January 2015
Auxillary Doc; Difficulty: Novice

Universal Principles of Design

115 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions and Teach Through Design. The first comprehensive, cross-disciplinary encyclopedia of design.
by William
2nd January 2015
Auxillary Doc; Difficulty: Regular

Authoring Tool Accessibility Guidelines 2.0 - Composr version 10.0 compliance

A formal description of Composr's compliancy with the ATAG accessibility standard.
10th April 2006
Core Doc; Difficulty: Regular

The Design of Sites: Patterns for Creating Winning Websites

The definitive reference for the principles, patterns, methodologies, and best practices underlying exceptional Web design. If you are involved in the creation of dynamic Web sites, this book will give you all the necessary tools and techniques to create effortless end-user Web experiences, improve customer satisfaction, and achieve a balanced approach to Web design.
by Douglas
2nd January 2015
Auxillary Doc; Difficulty: Regular

Graphic Design School: The Principles and Practices of Graphic Design

Packed with practical guidance and beautifully illustrated throughout, Graphic Design School provides a solid foundation for the design student as well as offering a back-to-basics tool for more advanced designers in search of solutions to graphic problems.
by David
2nd January 2015
Auxillary Doc; Difficulty: Novice

Adding 3rd party social sharing buttons

Adding some social sharing buttons using AddToAny.
by Chris
28th March 2018
Auxillary Doc; Difficulty: Regular

Customising Your Composr Website's Design

How knowledgeable you are in CSS and HTML will determine how detailed a customisation you will be able to make. This tutorial aims to make it easier to find your way around the files you need to edit.
by Steve
1st April 2013
Auxillary Doc; Difficulty: Novice

Page specific CSS edits

Set page or block specific changes by editing the CSS.
by Manoj
20th July 2017
Auxillary Doc; Difficulty: Regular

Editing Link Styles via CSS

Customise the link styles by editing the CSS
by Manoj
20th July 2017
Auxillary Doc; Difficulty: Regular

Emotional Design: Why We Love (or Hate) Everyday Things

Did you ever wonder why cheap wine tastes better in fancy glasses? Why sales of Macintosh computers soared when Apple introduced the colorful iMac? New research on emotion and cognition has shown that attractive things really do work better, as Donald Norman amply demonstrates in this fascinating book.
by Donald
2nd January 2015
Auxillary Doc; Difficulty: Novice

Install a Theme in Composr
Item has a rating of 1

This tutorial shows how to install a third party theme on your website.
by Steve
1st February 2014
Auxillary Doc; Difficulty: Novice

Customising Result Tables Via CSS

Customising styles for texts appearing within a table layout.
by Manoj
20th July 2017
Auxillary Doc; Difficulty: Regular

Supplementary web technologies (media, social networking, etc)

This tutorial will explain and detail some of the features of web technologies that are often forgotten.
by Chris
1st August 2008
Core Doc; Difficulty: Regular

Diagnosing AJAX issues

Diagnosing AJAX issues through the Google Chrome Developer Tools.
by Manoj
20th July 2017
Auxillary Doc; Difficulty: Regular

Releasing a theme

A short tutorial explaining how to share a theme with other Composr webmasters, by exporting it as an addon.
1st August 2008
Core Doc; Difficulty: Regular

HTML & CSS: Design and Build Web Sites

A full–color introduction to the basics of HTML and CSS.
2nd January 2015
Auxillary Doc; Difficulty: Regular

JavaScript: The Definitive Guide

A programmer's guide and comprehensive reference to the core language and to the client-side JavaScript APIs defined by web browsers.
2nd January 2015
Auxillary Doc; Difficulty: Expert

Customising Menu Styles

Customise menu background colour, selection colour and border.
by Manoj
20th July 2017
Auxillary Doc; Difficulty: Regular

Communicating Design: Developing Web Site Documentation for Design and Planning

Successful web design teams depend on clear communication between developers and their clients—and among members of the development team. Wireframes, site maps, flow charts, and other design diagrams establish a common language so designers and project teams can capture ideas, track progress, and keep their stakeholders informed.
by Dan
2nd January 2015
Auxillary Doc; Difficulty: Expert

Changing the login block in the header

Themeing tutorial, putting the login block into the header. Note that this was for an older version so is quite outdated.
by Chris
2nd January 2015
Auxillary Doc; Difficulty: Regular

Customising menu icons

How to replace a default menu icon with a custom one.
by Manoj
20th July 2017
Auxillary Doc; Difficulty: Regular

Designer themes, implementing a clean-room design

This tutorial is a deep-end introduction to Composr for web designers.
by Chris
1st February 2011
Core Doc; Difficulty: Regular

Simplifying and centering the default menu

This is a quick and informal tutorial showing how to re-style the default drop-down menu. In practice you should make your changes in your own theme, not directly on top of the default theme like I'm doing here.
by Chris
13th March 2018
Auxillary Doc; Difficulty: Regular

Using Chrome development tools to help with themeing

This tutorial shows how to use the Google Chrome developer tools to help you with your themeing.
1st September 2015
Auxillary Doc; Difficulty: Regular

Adding random quotes to the header

This video will show how to add random quotes to your Composr site's header.
by Chris
13th March 2018
Auxillary Doc; Difficulty: Regular

Using Composr's WYSIWYG editor

A WYSIWYG (What You See Is What You Get) editor is a document editor where the editor's editing interface roughly mirrors the appearance of the final document. Composr is using CKEditor as Composr's WYSIWYG editor.
20th July 2017
Auxillary Doc; Difficulty: Regular

Themes 201 - building a totally new design

A live themeing tutorial showing how to build a totally new design. Note that this was for an older version so is very outdated.
by Allen
2nd January 2015
Auxillary Doc; Difficulty: Expert

Need better information?

The Composr documentation is user-driven:

  • If you have found documentation problems that you'd like someone else to solve log an issue to the tracker.
  • If you'd like to contribute a chunk of documentation to go into a tutorial, also log an issue to the tracker. As a user, it is possible you may find some useful extra tidbits of information there.
  • If you want to contribute a new tutorial hosted off-site you can submit a link via the button below.
Back to Top