Customizations#
This page outlines the basics of customizing Pegasus to meet your application’s needs.
Personalize your landing page#
Pegasus ships with a stub landing page, however most projects will want to highly customize their landing page. Unless you are planning on building a marketing site on a different platform, this is likely one of the first things you’ll do.
To modify the default landing page, simply edit the ./templates/web/landing_page.html file
and make any customizations you like.
If you want to start from Pegasus’s example landing page, then just copy the contents of
./templates/pegasus/examples/example_landing_page.html into the landing page file.
Note that Pegasus’s own landing page is only available in the Bulma CSS version. For Bootstrap builds we recommend starting from a landing page option or themes from the web, for example here or here.
Update the logged-in experience#
After you’ve tweaked your landing page, you’ll likely want to dive into the nuts and bolts that make up your app.
To modify the logged-in default page, edit the ./templates/web/app_home.html file to your liking.
Styles#
Customizing styles requires setting up the front-end build pipeline.
Both Bootstrap and Bulma are designed to be customized to your needs.
To change styles, edit the generated site-<framework>.scss file in assets/styles with any custom styles you want
and run this command to rebuild them:
npm run build # or "dev" or "dev-watch"
As a simple, impactful change to get started, you can set the following variable to change the primary color/theme across the site:
$primary: #2e7636; // change primary color to green
Just make sure to put this change at the top of your file before the @import statements!
More details on customizing themes can be found in the CSS docs.
Javascript#
The project uses a webpack build pipeline to compile the javascript files.
For more details on how it works see the front-end documentation.