With your theme shell created, and your answers to the quick start theme quiz mapped out, you're now ready to apply the choices you made to your theme. We'll be doing this through a combination of working with the Stylus files in your project source folder, and making additions and edits to your theme's template files.
We'll begin with a rundown of how the Stylus files in your project folder operate, so you know what type of code to add where. We'll then cover implementation of each of the choices laid out in the quick start theme quiz. Finally, you'll be given an example of how to lay a unique visual style over the theme you've created and how to make it fully responsive to any resolution.
This chapter includes:
- Overview of the Stylus project file structure
- Applying the quick start theme quiz choices:
- Default:
- Single or twin column overall layout
- Using the blog cover image as a site, header or sidebar background
- Header height control in single column layouts
- Index & Tag Archive:
- Showing full or trimmed content and featured images / videos
- Zebra striping
- Featured post ordering and styling
- Specifically tagged post styling
- Tag Archive:
- Styling whole tag archive pages differently for specific tags
- Post & Page:
- Post header style in single column layouts
- Post:
- Styling featured single posts
- Styling specifically tagged single posts
- Default:
- Adding unique visual styling:
- Adding icon fonts
- Setting image fallbacks
- Example design: twin column visual styling
- Example responsiveness: twin column design media queries
- Overview of Stylus project file structure
You're about to start applying CSS to your theme, so before we move on, let's take a quick look at how the Stylus files (you'll find in your LearningGhostSource folder) work.
This file imports the other Stylus files of the project, in the order specified therein. The order of import determines that the order code will be written into the actual production style sheet.
This folder contains the modified version of Normalize.css as well as any global variables, functions, and so on that need to be accessible throughout the project.
In this folder, you will find three files, each containing any variables, mixins, functions, hashes, and any other code that is not an actual CSS style. The files are:
typography.styllayout.stylcolor_and_bgs.styl
These files allow you to keep your project clearly organized along purpose-oriented lines. The driving principle is that once your design is complete, you should be able to easily adjust its typography, layout and colors/backgrounds purely by changing the values of variables defined in these three files.
Note the color variables you'll find at the beginning of the colors_and_bgs.styl file. There are five colors already defined which comprise a basic color scheme and you can adjust these variables to easily update your entire site as you go along.
To make it easy to know which file a particular mixin comes from, all typography mixins end in _type(), all layout mixins end in _layout(), and all colors and bgs mixins end in _color().
The files in these folders draw in the information defined in the vars_mixins_etc folder and place it along with other raw CSS into the actual styles that will be written into your style sheet. The three files inside are:
element_defaults.styl: This file outputs style defaults for HTML elements such asbody,img,H1, andH2custom_classes.styl: This file outputs any custom CSS classes defined uniquely to the theme, for example,.blog_title_lgmedia_queries.styl: This file handles media queries used for responsive adjustment to various viewport sizes.
You'll see more about how all these files work in practice as we move into the next section.