Adding Favicon

Adding Logo & Sitename

Changing Color Scheme

Changing Typography

Creating A Page

Adding a image

Adding Assets

Markdown Primer

Understanding Sitemap

Changing Color Scheme

In this section, we will learn about changing color scheme of misty-gray.

misty-gray uses fastn default color scheme. If you wish to update color scheme, choose a color scheme from our [fastn-community] (https://fastn.com/featured/cs/) color schemes.

To choose one of featured color scheme, visit our featured color schemes

How to add color scheme?

To add color scheme to your fastn web sites. Edit your FASTN.ftd file and add color scheme dependency into it.

In the below example, we are using https://fastn-community.github.io/misty-gray-cs/ color scheme.

Add color scheme dependency into your FASTN.ftd file as shown in below example:

-- fastn.dependency: fastn-community.github.io/misty-gray
-- fastn.dependency: fastn-community.github.io/misty-gray-cs

-- fastn.dependency: fastn-community.github.io/misty-gray
-- fastn.dependency: fastn-community.github.io/misty-gray-cs

Lang:

ftd

How to create a global `my-ds` page module for `misty-gray`?

You can create a ds.ftd module inside your fastn package and create your custom my-ds page component.

Let’s learn how to create a module:

Create a new file let’s say ds.ftd.

Here’s what your ds.ftd module would look like:

ds.ftd module

-- import: fastn-community.github.io/misty-gray as ds
-- import: fastn-community.github.io/misty-gray-cs

-- component page:
children wrapper:
optional caption title:
optional body body:
boolean sidebar: false

-- ds.page: $page.title
site-logo: $fastn-assets.files.images.fastn.svg
body: $page.body
sidebar: $page.sidebar
colors: $misty-gray-cs.main

-- end: ds.page.banner

-- ds.page.extra-headers:

-- ds.h3: Heading in sidebar

`<You can add any component like this inside sidebar.>`

-- end: ds.page.extra-headers

-- ftd.column:
spacing.fixed.px: 13
width: fill-container
children: $page.wrapper

-- end: ftd.column

-- end: ds.page

-- end: page

-- import: fastn-community.github.io/misty-gray as ds
-- import: fastn-community.github.io/misty-gray-cs

-- component page:
children wrapper:
optional caption title:
optional body body:
boolean sidebar: false

-- ds.page: $page.title
site-logo: $fastn-assets.files.images.fastn.svg
body: $page.body
sidebar: $page.sidebar
colors: $misty-gray-cs.main

-- end: ds.page.banner

-- ds.page.extra-headers:

-- ds.h3: Heading in sidebar

`<You can add any component like this inside sidebar.>`

-- end: ds.page.extra-headers

-- ftd.column:
spacing.fixed.px: 13
width: fill-container
children: $page.wrapper

-- end: ftd.column

-- end: ds.page

-- end: page

ds.ftd

Lang:

ftd

Click on download icon of above code-block. ds.ftd file will be downloaded. Import this file inside your new .ftd file.

Then use my-ds component to create a new page using it.

-- import: fastn-community.github.io/misty-gray as ds
-- import: <your fastn package name>/my-ds

-- ds.page: This is page title

This is body area. It contains multiple paragraphs.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum.

-- ds.h1: This is heading level 1

This is heading level 1 optional body content.

-- ds.h2: This is heading level 2

This is heading level 2 optional body content.

-- ds.h3: This is heading level 3

This is heading level 3 optional body content.

-- end: ds.page

-- import: fastn-community.github.io/misty-gray as ds
-- import: <your fastn package name>/my-ds

-- ds.page: This is page title

This is body area. It contains multiple paragraphs.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum.

-- ds.h1: This is heading level 1

This is heading level 1 optional body content.

-- ds.h2: This is heading level 2

This is heading level 2 optional body content.

-- ds.h3: This is heading level 3

This is heading level 3 optional body content.

-- end: ds.page

cs.ftd

Lang:

ftd

Click on the download icon of the above code-block. ds.ftd file will be downloaded. Import this file inside your new .ftd file.

Add this file inside your fastn project and deploy or run fastn serve on your localhost. Access your localhost in the browser e.g.http://127.0.0.1:8000/cs/ you will see page colors with Set 3 CS

On this page

How to add color scheme?

How to create a global my-ds page module for misty-gray?

Home

Blog

Landing

Fastn

Changing Color Scheme

In this section, we will learn about changing color scheme of misty-gray.

misty-gray uses fastn default color scheme. If you wish to update color scheme, choose a color scheme from our [fastn-community] (https://fastn.com/featured/cs/) color schemes.

To choose one of featured color scheme, visit our featured color schemes

How to add color scheme?

To add color scheme to your fastn web sites. Edit your FASTN.ftd file and add color scheme dependency into it.

In the below example, we are using https://fastn-community.github.io/misty-gray-cs/ color scheme.

Add color scheme dependency into your FASTN.ftd file as shown in below example:

-- fastn.dependency: fastn-community.github.io/misty-gray
-- fastn.dependency: fastn-community.github.io/misty-gray-cs

-- fastn.dependency: fastn-community.github.io/misty-gray
-- fastn.dependency: fastn-community.github.io/misty-gray-cs

Lang:

ftd

How to create a global `my-ds` page module for `misty-gray`?

You can create a ds.ftd module inside your fastn package and create your custom my-ds page component.

Let’s learn how to create a module:

Create a new file let’s say ds.ftd.

Here’s what your ds.ftd module would look like:

ds.ftd module

-- import: fastn-community.github.io/misty-gray as ds
-- import: fastn-community.github.io/misty-gray-cs

-- component page:
children wrapper:
optional caption title:
optional body body:
boolean sidebar: false

-- ds.page: $page.title
site-logo: $fastn-assets.files.images.fastn.svg
body: $page.body
sidebar: $page.sidebar
colors: $misty-gray-cs.main

-- end: ds.page.banner

-- ds.page.extra-headers:

-- ds.h3: Heading in sidebar

`<You can add any component like this inside sidebar.>`

-- end: ds.page.extra-headers

-- ftd.column:
spacing.fixed.px: 13
width: fill-container
children: $page.wrapper

-- end: ftd.column

-- end: ds.page

-- end: page

-- import: fastn-community.github.io/misty-gray as ds
-- import: fastn-community.github.io/misty-gray-cs

-- component page:
children wrapper:
optional caption title:
optional body body:
boolean sidebar: false

-- ds.page: $page.title
site-logo: $fastn-assets.files.images.fastn.svg
body: $page.body
sidebar: $page.sidebar
colors: $misty-gray-cs.main

-- end: ds.page.banner

-- ds.page.extra-headers:

-- ds.h3: Heading in sidebar

`<You can add any component like this inside sidebar.>`

-- end: ds.page.extra-headers

-- ftd.column:
spacing.fixed.px: 13
width: fill-container
children: $page.wrapper

-- end: ftd.column

-- end: ds.page

-- end: page

ds.ftd

Lang:

ftd

Click on download icon of above code-block. ds.ftd file will be downloaded. Import this file inside your new .ftd file.

Then use my-ds component to create a new page using it.

-- import: fastn-community.github.io/misty-gray as ds
-- import: <your fastn package name>/my-ds

-- ds.page: This is page title

This is body area. It contains multiple paragraphs.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum.

-- ds.h1: This is heading level 1

This is heading level 1 optional body content.

-- ds.h2: This is heading level 2

This is heading level 2 optional body content.

-- ds.h3: This is heading level 3

This is heading level 3 optional body content.

-- end: ds.page

-- import: fastn-community.github.io/misty-gray as ds
-- import: <your fastn package name>/my-ds

-- ds.page: This is page title

This is body area. It contains multiple paragraphs.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum.

-- ds.h1: This is heading level 1

This is heading level 1 optional body content.

-- ds.h2: This is heading level 2

This is heading level 2 optional body content.

-- ds.h3: This is heading level 3

This is heading level 3 optional body content.

-- end: ds.page

cs.ftd

Lang:

ftd

Click on the download icon of the above code-block. ds.ftd file will be downloaded. Import this file inside your new .ftd file.