Important: This website is now read only (except to admins) to comply with the UK Online Safety Act. Composr CMS is in the process of migrating to a new Constitutional governance model and Bazaar development model, with functionality of the old website (constructed by ocProducts Ltd, the prior copyright holder, a UK company) spread between GitLab and the new website (which has no connections to the UK).
Home → Tutorials
Tutorials – Learning Composr
Code Book, part 2 (Front-end)
The programmer's guide for Composr development. Front-end development.
1st January 2006
Core Doc;
Difficulty:
Expert
Mobile design
This tutorial explains both Composr's mobile mode and responsive design techniques.
1st May 2015
Core Doc;
Difficulty:
Regular
Using Inspect Element in Chrome
Developer tool for casually testing HTML and CSS changes.
Auxillary Doc;
Difficulty:
Regular
Guide to web technologies (including HTML, CSS, and JavaScript)
This tutorial is an introduction to the main standard web technologies that Composr is built upon.
1st May 2009
Core Doc;
Difficulty:
Regular
Adjusting fixed width wrapper
Adjusting fixed width by editing global.css
Auxillary Doc;
Difficulty:
Regular
Customising Menu Styles
Customise menu background colour, selection colour and border.
Auxillary Doc;
Difficulty:
Regular
Customising buttons via CSS
Customise button border colour, apply shadow effect by editing CSS.
Auxillary Doc;
Difficulty:
Regular
Changing the Font and Colour Styles via CSS
How to change font and colour styles by editing the CSS.
Auxillary Doc;
Difficulty:
Regular
Editing List Styles Via CSS
Editing list styles, changing bullet icon image.
Auxillary Doc;
Difficulty:
Regular
Customising menu icons
How to replace a default menu icon with a custom one.
Auxillary Doc;
Difficulty:
Regular
Editing Link Styles via CSS
Customise the link styles by editing the CSS
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
Customise Styling of Panels via CSS
Change panels background colours by editing the CSS
Auxillary Doc;
Difficulty:
Regular
Customising Result Tables Via CSS
Customising styles for texts appearing within a table layout.
Auxillary Doc;
Difficulty:
Regular
Page specific CSS edits
Set page or block specific changes by editing the CSS.
Auxillary Doc;
Difficulty:
Regular
Restricting image widths responsively
CSS examples and discussion regarding the nuances of restricting image widths in thE CSS.
Auxillary Doc;
Difficulty:
Expert
HTML & CSS: Design and Build Web Sites
A full–color introduction to the basics of HTML and CSS.
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.
Auxillary Doc;
Difficulty:
Regular
Copying and pasting content into the editor
Copy and paste content into the WYSIWYG editor through different methods.
Auxillary Doc;
Difficulty:
Regular
Diagnosing AJAX issues
Diagnosing AJAX issues through the Google Chrome Developer Tools.
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.
Auxillary Doc;
Difficulty:
Regular
Removing Banner Addon
Remove banner addon from Composr CMS
Auxillary Doc;
Difficulty:
Regular
Change / Remove background image
Edit or remove the background image of a Composr website.
Auxillary Doc;
Difficulty:
Regular
Identifying JavaScript issues: The Console
Identifying JavaScript issues using Inspect Element developer tool.
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.
Auxillary Doc;
Difficulty:
Regular
Designer themes, implementing a clean-room design
This tutorial is a deep-end introduction to Composr for web designers.
1st February 2011
Core 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
A symbol is missing: CSRF_TOKEN . This usually happens when Comcode is written without placing template/PHP code within a code tag.
Copyright ©
ocProducts Ltd , 2025. All rights reserved. Composr was formerly known as ocPortal.
Did you know? Composr is ready to use “out-of-the-box” but also the most flexible CMS for non-programmers out there.