Tutorials – Learning Composr

Code Book, part 2 (Front-end)
Item has a rating of 5ImageImageImageImage (Liked by Adam Edington)
ImageImage

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

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

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

Mobile design
Item has a rating of 5ImageImageImageImage (Liked by Adam Edington)
ImageImage

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

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

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

Using Chrome development tools to help with themeing
ImageImage

Image
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
ImageImage

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

Customising Result Tables Via CSS
ImageImage

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

Changing the Font and Colour Styles via CSS
ImageImage

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

Customising Menu Styles
ImageImage

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

Adjusting fixed width wrapper
ImageImage

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

Designer themes, implementing a clean-room design
ImageImage

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

HTML & CSS: Design and Build Web Sites
ImageImage

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

Diagnosing AJAX issues
ImageImage

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

Copying and pasting content into the editor
ImageImage

Image
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
ImageImage

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

Removing Banner Addon
ImageImage

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

CSS3: The Missing Manual
ImageImage

Image
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
ImageImage

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

Editing Link Styles via CSS
ImageImage

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

Editing List Styles Via CSS
ImageImage

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

Editing header style (borders and font style) via CSS
ImageImage

Image
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

Change / Remove background image
ImageImage

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

Customising buttons via CSS
ImageImage

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

Restricting image widths responsively
ImageImage

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

Customising menu icons
ImageImage

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

Browser version requirements
ImageImage

Image
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
ImageImage

Image
Change panels background colours 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