search

Automattic / musictheme

A theme for bands and musicians that uses an experimental Gutenberg layout.
GNU General Public License v2.0
87 stars 11 forks source link

readme

Music

The Music theme is an exploration of how Gutenberg can transform theme design and development. It is intended as a work in progress, at least until v1 of the new editor (and maybe beyond).

Contributors: Automattic
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Description

Music is an experimental Gutenberg-powered theme. It's based on design mockups shared in a blog post on Themeshaper.

A demo is available at https://musictheme.mystagingwebsite.com

Installation

  1. If it is not already installed, you'll need the Gutenberg plugin on your site. In your admin panel, go to Plugins > Add New. Search for "Gutenberg" to install and activate.
  2. In your admin panel, go to Appearance > Themes and click the Add New button.
  3. Click Upload and Choose File, then select the Music theme's .zip file. Click Install Now.
  4. Click Activate to use your new theme right away.

FAQ

How do I change the default page header colors?

In the page editor, you can change the page header color by selecting a color template from the Post/Page Attributes section of Document Settings:

Document Settings

Alternatively, you may select the "Hide Page Header" template to hide the post header altogether, and use a full-width cover image block as your page header instead.

How do I change the background color for cover image blocks?

The default background color for cover image blocks is pink, but there are a few color variations available. To use them, open the block settings and enter one of the following colors into the "Additional CSS Class" field:

How do I compile the stylesheets?

If you're modifying stylesheets in the Music theme, you'll want to work from the Sass files, and have Node-Sass auto-compile the CSS stylesheets.

  1. Run npm install to install dependencies (You'll only have to do this once).
  2. Run npm run build to compile the CSS once, or npm run watch to have it compile changes whenever you modify a sass file.

Credits