|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Introducing Themes and More! |
| 4 | +categories: news |
| 5 | +author: Alex |
| 6 | +comments: true |
| 7 | +--- |
| 8 | + |
| 9 | +As you may or may not have noticed, the code club website has had the basic |
| 10 | +facilities for adding your own custom theme to the website. |
| 11 | + |
| 12 | +Well today I'm happy to announce theses themes are ready for general use! Go on |
| 13 | +try it out now, scroll to the bottom of the page you will see a dropdown menu |
| 14 | +under a header called `Change Theme:`. Click on it and you will see (at the time |
| 15 | +of this announcement) 2 themes to choose from. The original theme for the |
| 16 | +website `Code Club Classic` and a new one `Minimal`. |
| 17 | + |
| 18 | +Choosing a different theme will cause the page to reload briefly as your browser |
| 19 | +downloads the new theme but very soon you will be looking at an entirely new |
| 20 | +code club website! |
| 21 | + |
| 22 | +Of course it's not very exciting having only 2 themes to choose from, so I |
| 23 | +invite you to create your own theme and submit it to the website especially |
| 24 | +since there is now... |
| 25 | + |
| 26 | +## A Competition! |
| 27 | + |
| 28 | +As of now the code club is launching it's first competiton! We want you to |
| 29 | +create your own look and feel for the website and submit it to the repository. |
| 30 | + |
| 31 | +We will close submissions at the start of the last hour of the last code club |
| 32 | +this semester. During the last hour of that same code club, all submissions will |
| 33 | +be judged and the winner will be picked as the default theme for all new |
| 34 | +visitors to the website! |
| 35 | + |
| 36 | +## How to submit a theme |
| 37 | + |
| 38 | +Now in this post I won't go through how to actually make your theme but that |
| 39 | +will be coming up in a future tutorial series, so be on the look out for that, |
| 40 | +but this post will tell you how to install and submit your theme once you've |
| 41 | +made it. |
| 42 | + |
| 43 | +Your theme should be consist of a single `.scss` file in the `css` folder and |
| 44 | +any other sass files that make up your theme should be in their own folder in |
| 45 | +the `_sass` folder. |
| 46 | + |
| 47 | +The only thing other than that which you need to do is "install" it. On the |
| 48 | +website we have a file called `_data/themes.yml` which we use to tell the |
| 49 | +website about the themes we have there for it to use |
| 50 | + |
| 51 | +So to install a theme you need to make an entry similar to this one: |
| 52 | + |
| 53 | +```yml |
| 54 | +- name: Minimalist |
| 55 | + shortname: minimal |
| 56 | + version: 0.1 |
| 57 | + author: Alex |
| 58 | + |
| 59 | +``` |
| 60 | +Where `name` is the name that you want displayed on the website when your theme |
| 61 | +is displayed, `shortname` is the name of your `.scss` file in the `css` folder. |
| 62 | +`version` is just some number that represents how well developed you think your |
| 63 | +theme is and of course `author` should be your name so we know who made that |
| 64 | +awesome theme! |
| 65 | + |
| 66 | +Don't worry if you need help installing your theme on the website, there will |
| 67 | +always be someone at code club who will be able to help you. |
0 commit comments