Seventies

Introduction

During the lock-down, my hair has progressively got longer, so much so that I’m reminded of the ‘look’ of the 1970’s. This gave me the thought of what would a 1970’s Moodle theme look like? So I decided to make one using a ‘Swatch’ (Please see ‘Essential to Foundation, theme evolution’ July 2019) in my Foundation theme for Moodle 3.8.

Disclaimers

Firefox® is a registered trademark of the Mozilla Foundation – www.mozilla.org/en-US/foundation/trademarks/policy.

Ubuntu® is a registered trademark of Canonical Ltd – ubuntu.com/legal/intellectual-property-policy.

Moodle™ is a registered trademark of ‘Martin Dougiamas’ – moodle.com/trademarks.

Other names / logos can be trademarks of their respective owners. Please review their website for details.

I am independent from the organisations listed above and am in no way writing for or endorsed by them.

The source code presented is written by myself and is GPLv3 licenced. The fonts mentioned have their own open source licence and were downloaded from ‘FontSquirrel’ – www.fontsquirrel.com. You can see / get the changes to my Foundation theme on github.com/gjb2048/moodle-theme_foundation/commit/8ec03ebaca581621f939a111aa08bb8594f6a213.

The result

So after messing around with colours and picking a few fonts we have:

How I created the swatch

After downloading the fonts and putting them in the ‘fonts’ folder of the theme as per ‘docs.moodle.org/38/en/How_to_add_custom_fonts_in_a_theme’ then they can be used in the CSS, in this case the SCSS. The ‘swatch’ in two files, one contains the definitions of the variables that you want to change and the other the changed / additional SCSS you want. Both overrides / add to the core Boost theme Bootstrap and Moodle styles.

Starting with the second ‘bootswatch’ file ‘classes/module/swatch/seventies_bootswatch.scss’ it has the font definitions:

@font-face {
font-family: 'BPscript';
font-weight: normal;
font-style: normal;
font-stretch: normal;
src: unquote("url('[[font:theme|BPscript-webfont.woff]]') format('woff'), url('[[font:theme|BPscript.otf]]')");
}
@font-face {
font-family: 'NimbusMono';
font-weight: normal;
font-style: normal;
font-stretch: normal;
src: unquote("url('[[font:theme|nimbusmono-regular.otf]]')");
}
@font-face {
font-family: 'NimbusMono';
font-weight: normal;
font-style: italic;
font-stretch: normal;
src: unquote("url('[[font:theme|nimbusmono-oblique.otf]]')");
}
@font-face {
font-family: 'NimbusMono';
font-weight: bold;
font-style: normal;
font-stretch: normal;
src: unquote("url('[[font:theme|nimbusmono-bold.otf]]')");
}
@font-face {
font-family: 'NimbusMono';
font-weight: bold;
font-style: italic;
font-stretch: normal;
src: unquote("url('[[font:theme|nimbusmono-boldoblique.otf]]')");
}
@font-face {
font-family: 'Risque';
font-weight: normal;
font-style: normal;
font-stretch: normal;
src: unquote("url('[[font:theme|Risque-Regular.otf]]')");
}
@font-face {
font-family: 'SpicyRice';
font-weight: normal;
font-style: normal;
font-stretch: normal;
src: unquote("url('[[font:theme|SpicyRice-Regular.otf]]')");
}

where you can see use of the ‘[[font:theme|themename.ext]]’ substitution syntax for file serving of the font file within a specific Moodle instance. Using the SCSS String method ‘unquote’ tells the parser not to process the contained text but pass it straight through to the output CSS, where Moodle PHP will then parse it correctly, otherwise it will fail as it is invalid CSS by the SCSS parser. This is followed by the specific changes I want to make:

body {
-webkit-font-smoothing: antialiased;
}
.summary {
font-family: "BPscript", Calibri, Candara, Arial, sans-serif;
}
//
// Code
//
body .syntaxhighlighter {
code,
div {
font-family: $font-family-monospace !important;
}
code {
@include font-size(0.85em, true);
}
}
// Show expand collapse with font-awesome.
.block_settings .block_tree [aria-expanded="true"],
.block_settings .block_tree [aria-expanded="true"].emptybranch,
.block_settings .block_tree [aria-expanded="false"],
.block_navigation .block_tree [aria-expanded="true"],
.block_navigation .block_tree [aria-expanded="true"].emptybranch,
.block_navigation .block_tree [aria-expanded="false"] {
&:before {
color: $primary;
}
}
.block .block-action:before {
color: $primary;
}

then in the ‘classes/module/swatch/seventies_variables.scss’ file we can define the colours and make use of the fonts with the standard Bootstrap font variables (not all of the file is shown):

$primary: #E23B3B !default;
$secondary: #A35BAF !default;
$success: #019AA8 !default;
$info: #0098C6 !default;
$warning: #FFCD42 !default;
$danger: #E53B32 !default;
$light: $gray-100 !default;
$dark: $secondary !default;
// Body
$body-color: $gray-900;
$body-bg: #FFF2E8;
// Links
$link-color: $secondary;
// Fonts
$font-family-sans-serif: "Risque", Calibri, Candara, Arial, sans-serif !default;
$headings-font-family: "SpicyRice", Calibri, Candara, Arial, sans-serif !default;
$font-family-monospace: "NimbusMono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-size-base: 1.2rem;
$font-weight-normal: 500;
$headings-font-weight: 500;
$headings-color: $primary;

The last thing to do is to tell the ‘swatch’ module code of the swatches existence in ‘classes/module/swatch_module.php’ for the ‘swatch’ setting where ‘$choices’ now has ‘’seventies’ => ‘Seventies’’ added to the array so that we can choose our new swatch:

Conclusion

That’s how easy it is to add a new ‘Swatch’ to the Foundation theme!

• About
• Latest Posts

Gareth Barnard

Developer at HRDNZ

Gareth is a developer of numerous Moodle Themes including Essential (the most popular Moodle Theme ever), Foundation, and other plugins such as course formats, including Collapsed Topics.

Latest posts by Gareth Barnard (see all)

• Moodle 4 Security – A Review – 16th April 2024
• A little bit #fab – 16th March 2024
• Static framework – 16th February 2024