An explanation of how the inline editing functionality deep within Composr works.
by Chris
Tags:
Design & Themeing
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
Inline editing in Composr
(
)
()
Tempcode programming
()
()
You'll be shocked at how much themeing control you can muster using Tempcode. Learn all about it...
by Chris
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.
by Rajesh
Themeing your site
()
()
Our key themeing tutorial - how to re-theme your site, by changing CSS, templates, and theme images.
by Allen
Tags:
Design & Themeing
Using Inspect Element in Chrome
(
)
()
Developer tool for casually testing HTML and CSS changes.
by Manoj
Mobile design
()
()
This tutorial explains both Composr's mobile mode and responsive design techniques.
by Chris
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
Theme Lifecycle
How the files in a theme are managed, from initial theme creation, through upgrades.
by Chris
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
Tags:
Design & Themeing
Tips: Block permissions and visibility
Examples of how to hide blocks based upon context.
by Paul
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
Tags:
Design & Themeing
Adding random quotes to the header
This video will show how to add random quotes to your Composr site's header.
by Chris
Tags:
Design & Themeing
Managing cookies
Managing cookies through Google Chrome Developer Tools.
by Manoj
Editing Link Styles via CSS
Customise the link styles by editing the CSS
by Manoj
Adding 3rd party social sharing buttons
Adding some social sharing buttons using AddToAny.
by Chris
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
Tags:
Design & Themeing
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
Tags:
Design & Themeing
Customising buttons via CSS
Customise button border colour, apply shadow effect by editing CSS.
by Manoj
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
Tags:
Design & Themeing
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.
by David
Making a new theme
An illustrated step-by-step tutorial on making a new theme.
by Jean
Tags:
Design & Themeing
Adjusting fixed width wrapper
Adjusting fixed width by editing global.css
by Manoj
Changing the Font and Colour Styles via CSS
How to change font and colour styles by editing the CSS.
by Manoj
Diagnosing AJAX issues
Diagnosing AJAX issues through the Google Chrome Developer Tools.
by Manoj
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
Tags:
Design & Themeing
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
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
Authoring Tool Accessibility Guidelines 2.0 - Composr version 10.0 compliance
A formal description of Composr's compliancy with the ATAG accessibility standard.
by Chris
Creating a filtered & styled catalogue
A quick & dirty video showing the creation of a catalogue that can then be styled and filtered.
by Chris
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
Tags:
Design & Themeing
Customising Result Tables Via CSS
Customising styles for texts appearing within a table layout.
by Manoj
Install a Theme in Composr
This tutorial shows how to install a third party theme on your website.
by Steve
Tags:
Design & Themeing
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
Tags:
Design & Themeing
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
Tags:
Design & Themeing
Designer themes, implementing a clean-room design
This tutorial is a deep-end introduction to Composr for web designers.
by Chris
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
Tags:
Design & Themeing
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
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
Tags:
Design & Themeing
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
Tags:
Design & Themeing
Customising Menu Styles
Customise menu background colour, selection colour and border.
by Manoj
Theme management
Theme management in Composr CMS: installing new themes, exporting a theme, deleting themes, and where to make theme edits.
by Rajesh
Tags:
Design & Themeing
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.
by David
Customising menu icons
How to replace a default menu icon with a custom one.
by Manoj
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
Tags:
Design & Themeing
Introduction to web design
This tutorial is an introduction to the artistic side of web design.
by Chris
Tags:
Design & Themeing
HTML & CSS: Design and Build Web Sites
A full–color introduction to the basics of HTML and CSS.
by Jon
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
Tags:
Design & Themeing
Editing List Styles Via CSS
Editing list styles, changing bullet icon image.
by Manoj
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
Customise Styling of Panels via CSS
Change panels background colours by editing the CSS
by Manoj
Page specific CSS edits
Set page or block specific changes by editing the CSS.
by Manoj
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).
by Chris
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
Tags:
Design & Themeing
Copying and pasting content into the editor
Copy and paste content into the WYSIWYG editor through different methods.
by Manoj
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.
by Matthew
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
Tags:
Design & Themeing
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
Tags:
Design & Themeing
Releasing a theme
A short tutorial explaining how to share a theme with other Composr webmasters, by exporting it as an addon.
by Chris
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
Tags:
Design & Themeing
A fully custom logo
How to switch out the default logo to something completely custom (i.e. without using the Logo Wizard).
by Chris
Tags:
Design & Themeing
Adding a TeamSpeak block
How to add a TSViewer block to a Composr CMS site's left panel, and then make some style changes.
by Chris
Fixed-width layouts
A very practical tutorial showing how to created a fixed-width layout, and how to change the site header.
by Chris
Tags:
Design & Themeing
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
Tags:
Design & Themeing
Change / Remove background image
Edit or remove the background image of a Composr website.
by Manoj
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
Tags:
Design & Themeing
Identifying JavaScript issues: The Console
Identifying JavaScript issues using Inspect Element developer tool.
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.
