Documentation
Developing the Theme
How to change colors & install Prepros

How to change colors & install Prepros

Theme Development

Edger works over SCSS, the major improvement about this, is the possibility to change main and secondary color easily.

If you want to change the main color you must follow the next steps:

  1. Unzip wp-edger.zip (this is the theme only file) and remember where is the folder location.

  2. Install a SASS compiler, we recommend you to use Prepros 7, you can download it here.

  3. After installed you must see a window like this (just click continue trial):

    Free Trial is unlimited

  4. Click on Add Project on the left bottom side.

    Add Project Button location

  5. Search for Edger folder (where you already unzipped the project).

  6. Click on Config icon → Refresh, this will load Prepros 7 Config file inside theme, so everytime you save a SCSS or JS file, it will be minified and saved into edger/assets/dist folder.

    Refresh will ensure all dynamic files are properly assigned

  7. Open edger/assets/scss/_settings.scss file and change the color that you want, example:

    SCSS variables example

  8. After you save settings file, you will see a notification if there isn’t any error:

    Green Success message

  9. Zip Edger Folder and reupload into your Ghost Installation.

💡
IMPORTANT: if you don’t see the success message, go to Prepros and navigate to assets/scss/critical-css.scss and click “process file” and do the same for main.scss file.

Click critical-css.scss and main.scss and Process File

You can double check if all is working properly on the Logs tab.

Ensure both files are compiled on the “Error log”

Developing the ThemeTheme Optimization