Theme configuration

Create your own journal

Establish a publication series for your institution or start a magazine – the possibilities are endless. Simply adjust layout and style to fit your needs.

You can configure your theme by adding custom styles and tweaking template files.

The starter pack comes with default CSS styles, that can be adjusted with a custom stylesheet. For bigger adjustments, a modification of the original SCSS theme might make sense.

Adding custom styles

Using CSS

The stylesheet, the paper uses is defined in config/meta.yaml.

styles:  theme/styles/sample-journal.css

Adjust the stylesheet according to your needs or start with a blank stylesheet. You can also overwrite the theme's styles by importing the theme stylesheet into a custom stylesheet that is then added to meta.yaml.

theme/styles/custom.css

/*************************************************************+/
/*                                                            */
/*         Custom styles for graphite publication             */
/*                                                            */
/*************************************************************+/

// Import sample journal theme
@import 'sample-journal.css';

// Add your custom styles below

Create you own theme

If you want to create your own theme, you can use the graphite theme starter.

Clone the starter pack:

$ git clone https://github.com/crosssenses/graphite-theme-starter

Overwrite template files

To adjust graphite's html templates that define the navigation or template partials such as the article top, you can overwrite these files by adding them to your custom journal folder.

The file structure neets to follow this pattern:

graphite/jinja2/

jinja2
│
├── base.html
│
├── horst
│   ├── article_top.html
│   ├── footer.html
│   ├── frame.html
│   │
│   ├──  plugins
│   │   ├── article_top_aside.html
│   │   ├── article_top.html
│   │   ├── …
│   │   ├── [plugin]_aside.html
│   │   ├── [plugin]_pre.html
│   │   ├── [plugin].html
│   │   └── …
│   │
│   ├── render
│   │   ├── …
│   │   ├── full.html
│   │   ├── section.html
│   │   ├── single.html
│   │   ├── three.html
│   │   ├── two.html
│   │   └── …
│   │
│   ├── report.html
│   ├── share.html
│   └── tab_content.html
│
└── nav.html

To overwrite one of these templates, create a jinja2 directory in the root folder of your graphite project next to the individual paper folders.

_YOUR_ROOT_FOLDER_/jinja2/

Example

To adjust the expanding top navigation

• copy the content of graphite/jinja2/nav.html

• paste the content into _YOUR_ROOT_FOLDER_/jinja2/nav.html (same level and identical name)

• and adjust to your fit.

Note

These adjustments will be applied to all papers in the project folder. Paper-specific adjustments – so far – require individual projects.