The programmer's guide for Composr development. Front-end development.
by Chris
Tutorials – Learning Composr
- Addon
- Administration
- Advice & Guidance
- Analytics
- Banners
- Business Development
- Calendar
- Catalogues
- Chatrooms
- Collaboration
- Configuration
- Content
- Contributing
- CSS
- Design & Themeing
- Development
- Downloads
- eCommerce
- Feedback features
- Forum
- Fun and Games
- Galleries
- Installation
- Internationalisation
- Internet Technology
- Introduction
- JavaScript
- Maintenance
- Members
- Mobile
- News
- Newsletters
- Opinion
- Pages
- Performance
- PHP
- Power tools
- Security
- SEO
- Social
- Structure and navigation
- Support
- Third Party Integration
- Upgrading
- Webhosting
- Web standards & Accessibility
- Wiki
Code Book, part 2 (Front-end)
(
)
()
Using Inspect Element in Chrome
(
)
()
Developer tool for casually testing HTML and CSS changes.
by Manoj
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.
by Philip
Mobile design
()
()
This tutorial explains both Composr's mobile mode and responsive design techniques.
by Chris
Customise Styling of Panels via CSS
Change panels background colours by editing the CSS
by Manoj
Adjusting fixed width wrapper
Adjusting fixed width by editing global.css
by Manoj
Customising Result Tables Via CSS
Customising styles for texts appearing within a table layout.
by Manoj
Designer themes, implementing a clean-room design
This tutorial is a deep-end introduction to Composr for web designers.
by Chris
Editing List Styles Via CSS
Editing list styles, changing bullet icon image.
by Manoj
HTML & CSS: Design and Build Web Sites
A full–color introduction to the basics of HTML and CSS.
by Jon
Customising buttons via CSS
Customise button border colour, apply shadow effect by editing CSS.
by Manoj
Diagnosing AJAX issues
Diagnosing AJAX issues through the Google Chrome Developer Tools.
by Manoj
Customising menu icons
How to replace a default menu icon with a custom one.
by Manoj
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.
by Chris
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
Copying and pasting content into the editor
Copy and paste content into the WYSIWYG editor through different methods.
by Manoj
Editing Link Styles via CSS
Customise the link styles by editing the CSS
by Manoj
Removing Banner Addon
Remove banner addon from Composr CMS
Change / Remove background image
Edit or remove the background image of a Composr website.
by Manoj
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.
by Raji
Managing cookies
Managing cookies through Google Chrome Developer Tools.
by Manoj
Changing the Font and Colour Styles via CSS
How to change font and colour styles by editing the CSS.
by Manoj
Restricting image widths responsively
CSS examples and discussion regarding the nuances of restricting image widths in thE CSS.
by Various
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.
by David
Identifying JavaScript issues: The Console
Identifying JavaScript issues using Inspect Element developer tool.
by Manoj
Customising Menu Styles
Customise menu background colour, selection colour and border.
by Manoj
Page specific CSS edits
Set page or block specific changes by editing the CSS.
by Manoj
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.
