Build Your Own Gibbon Theme
Time 7 hrs

Difficulty Intermediate
Prerequisites Advanced Web Design
Departments Human Technologies
Authors Ross Parker
Groupings Individual
Pairs
Minimum Year Group None

Blurb

Like many systems, Gibbon is themeable, meaning we can change its appearance without needing to reprogramme it. In this unit you will apply the HTML and CSS skills you learned in Web Design 101 to build your own Gibbon theme.

License

This work is shared under the following license: Creative Commons BY-SA-NC

Outline

The Pitch
Why should I bother learning this?
  • You use Gibbon every day. Why not make it your own, and produce a theme for anyone to use?
Resources
What is needed to run this unit?
  • Laptop
  • Internet access
  • Web server software (e.g. MAMP)
  • Text editor (e.g. TextWrangler, Atom)
  • Firefox, the browser with the best developer tools.
Interdisciplinary Links
Do not try and force this. What areas of other subjects might this reflect and/discuss language. For IB, links with ToK.
  • Links to DCVT in terms of visual literacy, design, etc.
Teacher Reflection
What was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used?
  • In 2014-15 a student (Max Sze) tried this for the first time, and produced a really nice theme (Seafarer), which was subsequently hosted on gibbonedu.org and used by a lot of ICHK students.
Credits
Any CC attribution, thanks, credit, etc.

This page requires you to be logged in to access it. Please login and try again.
5 mins
Make It Yours
The Pitch
  • You use Gibbon every day. Why not make it your own, and produce a theme for anyone to use?
  • If you do a good job, your theme can be hosted on gibbonedu.org, installed at ICHK and shared with the world.
  • Max Sze (Year 9, 2014-15) did exactly this when he produced Seafarer:

35 mins
Setting Up Your Dev Environment
Hands On
  • When software developers work, they use a development (or dev) environment. This includes the software needed to write and run the project they are working on.
  • To install the stack of software necessary for web development and website deployment, refer to this document.
  • An image editor will also be useful: you can use Acorn, which is pre-installed on your Mac laptop.
  • Finally, we need a web browser with the tools to support a developer: Firefox. Make sure you have the latest version installed. If you want, you can even get the fancy Developer Edition.
30 mins
Installing Gibbon
Hands On
  • With your dev environment ready, you can now install Gibbon by doing the following:
    • Download and unzip Gibbon from gibbonedu.org.
    • Move the unzipped version of Gibbon to /Applications/MAMP/htdocs on your computer.
    • Point your web browser to http://localhost, and you should be able to access your Gibbon installation.
    • Follow the on screen instructions to install Gibbon, setting:
      • Database server to localhost (because your web server, Apache, and database server, MySQL, are on the same machine)
      • Database name to anything you like (avoid spaces, capitals, etc)
      • Database username to root (this is Linux-speak for super user or admin)
      • Database password to root (this is the default for MAMP, and not very secure)
      • Opt to include demo data, as this will make it easier to use the system.
  • Once the installation is completed, use the link provided to get back to your Gibbon install's login screen.
  • Make sure you can login to your new system.
10 mins
Making Your Theme
Getting Started
  • Your theme, will start off as a copy of Gibbon's Default theme.
  • Go to /Applications/MAMP/htdocs and go into your Gibbon folder.
    • From now on, we will call this folder [absolutePath]
  • Go into [absolutePath]/themes
  • Copy the Default theme folder, and change it's name to the name you want for your theme.
  • Go into [absolutePath]/themes/[yourTheme] and open the file called manifest.php in your text editor
  • In manifest.php, set:
    • Name to the same name as the folder containing your theme (they MUST be the same).
    • Description to a brief intro to your theme
    • Version to 1.0.00 (this will be the first version you release when the theme is ready)
    • Author to your name
    • URL to your website, or leave it blank if you do not have a site.
  • Save manifest.php, and close it.
5 mins
Installing Your Theme
Almost Ready
  • To activate your theme, login to your Gibbon installation, and go to Admin > System Admin > Manage Themes.
  • Find your theme in the list, and click on the install button.
  • Once your theme is installed, set it as the active theme to make it the default for all users.
325 mins
Customising Your Theme
Doing It
  • Your theme consists of a CSS stylesheet ([absolutePath]/themes/[yourTheme]/css/main.css) and a set of images ([absolutePath]/themes/[yourTheme]/img).
    • These files can be edited in your text and image editors.
  • In your theme, you might want to customise the following:
    • Background image, which you can simply replace with a new image (remember it should be a CC image, and you should attirubte in the [absolutePath]/themes/[yourTheme]/credits.txt file)
    • Fonts, which you can edit in main.css by looking for options such as font-family, font-size, font-weight, etc.
    • Colours, which you can edit in main.css by looking for options such as color, background-color, opacity, etc.
    • Layout, which you can edit in main.css by looking at where div elements are set up. Important divs include wrap, wrapOuter, header, contentWrap, etc.
    • Icons, which can be found in the img folder (remember any icons you use should be CC licensed, and attirbuted in the [absolutePath]/themes/[yourTheme]/credits.txt file).

  • A good way to find out which pieces of CSS to edit is to use Inspect Element in Firefox.
  • When you are viewing a page, and wish to change a certain element, right click on the element, and select Inspect Element:

  • If you view the image above in full size (click on it), you will see I have right clicked and inspected the Admin link in the main menu bar.
  • The red arrows show us that this is an <a> element (a link) within a <li> element, within a <ul> with id="nav". In CSS, we could refer to this link, and other links in the same position using the code:
    • ul#nav li a { }
    • By putting this in main.css, with our desired CSS options in between { and }, we could change the way it looks.
    • However, by looking on the right side of inspect element we can see some details are already set on line 257 of main.css, so this is where we should head to edit the style.

  • As you can see, CSS is tricky, but once you find your feet, it is mostly easy to find out how to make changes.
  • Allow yourself plenty of time to play around with CSS, and don't get frustrated. Ask for help if you need.
  • A final warning: don't edit any files outside your theme folder! If you think you need to change anything in Gibbon's Core, best speak to your teacher.
10 mins
Evidence
Finishing Up
  • Take a short video screenshot of you using your Gibbon theme, and submit this as your evidence for this unit.
Records 1-2 of 2
Unit Students

Gladys
Shared on 13/09/2019

Charlotte
Shared on 18/08/2017
Powered by Gibbon v27.0.00dev

Founded by Ross Parker at ICHK Secondary | Built by Ross Parker, Sandra Kuipers and the Gibbon community
Copyright © Gibbon Foundation 2010-2024 | Gibbon™ of Gibbon Education Ltd. (Hong Kong)
Created under the GNU GPL | Credits | Translators | Support