Tutorials – Learning Composr

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

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

Code Book, part 2 (Front-end)
Item has a rating of 5 (Liked by KingBast)

The programmer's guide for Composr development. Front-end development.
1st January 2006
Core Doc; Difficulty: Expert

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

Restricting image widths responsively

CSS examples and discussion regarding the nuances of restricting image widths in thE CSS.
6th May 2017
Auxillary Doc; Difficulty: Expert

Customise Styling of Panels via CSS

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

Customising Menu Styles

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

Change / Remove background image

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

Removing Banner Addon

Remove banner addon from Composr CMS
by Manoj
Tags: Addon, Banners, CSS
20th July 2017
Auxillary Doc; Difficulty: Regular

Diagnosing AJAX issues

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

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

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

Customising buttons via CSS

Customise button border colour, apply shadow effect by editing 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

Customising menu icons

How to replace a default menu icon with a custom one.
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

Customising Result Tables Via CSS

Customising styles for texts appearing within a table layout.
by Manoj
20th July 2017
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

Managing cookies

Managing cookies through Google Chrome Developer Tools.
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

Page specific CSS edits

Set page or block specific changes by editing the CSS.
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

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

Identifying JavaScript issues: The Console

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

Editing List Styles Via CSS

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

Adjusting fixed width wrapper

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

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

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