How to Customize Style - duhdugg/preaction-cms GitHub Wiki

After running yarn build or yarn dev-client for the first time, a copy of src/style/index.template.js will be created at src/style/index.js. You can edit this file to customize styling.

By default, the file looks like this:

import 'bootstrap/dist/css/bootstrap.min.css'
import 'react-quill/dist/quill.bubble.css'
import 'react-quill/dist/quill.snow.css'
import './cms.scss'

You can replace the Bootstrap and/or Quill themes with your own files. You can also import more CSS, SCSS, and/or SASS files.

Once your edits have been made, rebuild the client with yarn build.

Path-Specific Styles

The body element will always have a class which reflects the current path. For example, navigating to /foobar/one/ will give the body element a class of path-foobar-one-. You can use this to create page-specific styles.

Example

You can use wildcard attribute selectors to apply styles to a path, and all of its subpaths. Let's say you want a grey background for all pages under /foobar/. This may include /foobar/, /foobar/one/, /foobar/one/alpha/, /foobar/two/, etc.

Your src/style/index.js file may look like this:

import 'bootstrap/dist/css/bootstrap.min.css'
import 'react-quill/dist/quill.bubble.css'
import 'react-quill/dist/quill.snow.css'
import './cms.scss'
import './foobar-pages.css'

In this example, we create a new file at src/style/foobar-pages.css, which looks like this:

body[className*='path-foobar-'] {
  background-color: #ccc;
}

Favicon

To add a favicon, you should put your icon files at public/icon/icon.svg and public/icon/icon.png. If both are present, the svg will be preferred by browsers which support it. You will need to run yarn build after updating these icon files.

Tracking Changes

You may wish to remove or modify src/style/.gitignore and/or public/icon/.gitignore in your fork or local branch after customizing the style or icon.