In this course you will be taken through all of the steps required to theme, customize and brand your FirstClass Web Services module.
Give your FirstClass installation an identity.
Branding is Important
A strong brand begins with a thoughtfully executed and implemented visual identity.
The components of visual identity (logo, colour palette, typefaces and graphic elements) are the basic visual building blocks of a brand. Each element helps identify and differentiate an organization. When applied consistently, a well-executed identity will do more than identify, it will become synonymous with the values, mission and voice of the organization.
Of course, brands are not made overnight. The relationship an organization’s identity creates with the audience is the result of thoughtful and consistent application.
Consistency establishes familiarity – providing the audience with a comfortable reference point for hearing the organization’s message.
Content and Overview
If you are a FirstClass Administrator or Graphics Designer or Web Administrator for your organization then this is a course for you.
In this course you will build a theme for a fictional company and along the way learn the skills required to build a color palette, modify images and customize CSS to change the default FirstClass Theme into one that will better identify the Web Services install with our company.
There are 29 video lectures, each with accompanying resources or links to provide you with everything you need to customize your own site. You will start by learning how to configure a local copy of web services then jump right in by creating a color palette and base theme using jQuery Theme-Roller. You will use GIMP to customize graphics to match your theme and learn how to modify and test CSS colors using Chrome's developer tools.
Students completing this course will be ready to customize and give their own instances of FirstClass Web Services an identity.
The instructor strongly recommends using Google Chrome as your default browser and as a result will be using it in all lectures. A number of useful, free Chrome plugins will be discussed.
A brief introduction to how the various clients connect to the FirstClass server and customization possibilities.
An introduction to the three different flavors of FirstClass Web Services (Macintosh, Windows and Linux) and how to configure it to connect to your FirstClass Server.
Windows uses a batch file to start FirstClass Web services while the Macintosh and Linux versions of fcws come with a utility called fcwsctl which allows you to quickly start, stop and check the status of your fcws server via the terminal. This lecture will show you how to start and stop the server and how to configure fcws on the Macintosh as it does not come preconfigured by default.
The default theme for fcws is 'firstclass' but a number of other themes are provide as examples. In this lecture you will learn how you can change the default theme.
In this lecture you will learn how to load an existing theme into jQuery-ui ThemeRoller and see which elements apply to the different content areas of the fcws interface.
Link to jQuery-ui ThemeRoller Site
Link to Sublime Text 3 Web Site
Generating a color palette to work from is one of the most important steps in customizing fcws. In this lecture you will discover some tools that can help you discover the right colors for your site.
Link to colorful web site
Color palette for AudioTronics
In this lecture we will begin customizing our fictional AudioTronics site by building and saving a color scheme in jQuery-ui ThemeRoller and applying it to our local instance of fcws.
AudioTronics Color Palette - Take 2
In this lecture we will check out the images folder and discover which one can and should be modified and which ones can be left alone.
Change out the brand image to identify your instance of fcws with your company logo.
Two sprite images need to be modified to match the color scheme of your theme. In this lecture the instructor will show you how to use GIMP to modify the sprites.
Following up on modifying the sprite images, this lecture will complete the image modifications by looking at the other images that can be modified.
A brief introduction to CSS and how you can use chrome's developer tools to modify CSS colors on the fly and see the changes in your fcws theme.
Learn about the custom.css file and how you can use it to permanently apply your color overrides to the fcws theme.
Begin your customization with the login form on the login page.
A continuation of modifying css for the root pages.
Use the Suggested CSS Changes.css file as a starting point for testing modifications to your theme.
Add a transparent graphic to the home screen.
Add a background color and graphic to the login page.
Learn the ideal format and size for a fcws icon and how to install on fcws.
If you have created icons for the legacy FirstClass desktop and web application, learn how you can extract these for use on fcws.
Install a shell script on Mac or Linux to retrieve a range of icons from your legacy FirstClass server.
Install Curl on Windows and use a batch script to retrieve a range of icons from your legacy FirstClass server.
Learn which of your theme elements apply to FirstClass GO, the mobile fcws client for iOS, Android and Windows mobile.
Learn how to add graphics to fcws that will change the FirstClass GO mobile login screen.
Learn how content is archived and restored when fcws goes through a minor or major upgrade.
I have been a teacher, administrator, technology director and software developer for over 30 years. For 7 years I was a Senior Services Engineer for FirstClass/OpenText where I was responsible for developing and delivering instructional materials for the FirstClass product suite. I also created over 100 tutorial videos that are available on YouTube on the OTFirstClass YouTube channel.
I have a passion for learning and teaching and currently travel around the world teaching others how to develop software for use with the FirstClass platform.