Customizing

Changing the primary color

Changing the color of the template requires a few steps and has a few options:

Easy option

Note: This method means that you have to overwrite a color in Notion.

The quickest way to change the primary color on this template is to overwrite Notion’s green color with your own custom color, you can do this using the steps below:

Paste the following snippet into your Super site settings > code page > CSS tab

:root {
	--primary-color: #3B9DEF !important;
}

Replace the HEX code with a color of your choice, you can use this tool.
Next, update the Navbar, footer colors in Super to match.

Tip: If using the method above, you could also add the following snippet to update your footer and navbar colors with the same approach, otherwise you can do it manually via the Super settings.

.super-footer, .super-navbar__cta {
  background: var(--primary-color)!important;
}

Slower option

Another option for changing the primary color on this template that doesn’t sacrifice a color in Notion is takes a bit longer:

Update the color manually in Notion on all of the blocks that use a color by right clicking and changing the color settings.
Next, update the navbar, footer colors in Super to match.
To further tweak the color to match a brand color, you can adjust the default value of a color using the code snippet below (replace the name ‘blue’ for the color you chose and apply a custom hex code)

:root {
	--color-blue: #3B9DEF !important;
}

Call to action button

Ascent has an additional feature that lets you turn a link into a call to action button, check out the example below. By default, the background color is set using the --primary-color variable as mentioned above.

Call to action button

For a link to become a button it must be a single bold text block on its own line with a link. You can customise the appearance of the button using the code snippet below. To change it, head to your site settings (cog icon), into the 'Code' page and inside the 'CSS' tab, simply paste the snippet below and update the values to your liking. This will also affect the padding and border radius styles of the Navbar call to action button.

:root {
	--cta-color-text: #FFFFFF!important;
	--cta-color-bg: var(--primary-color)!important;
	--cta-padding: 12px 22px!important;
  --cta-border-radii: 50px!important;
}

Customizing the font

Simply choose a different font in the Site > Theme page.

Customizing illustrations

Customize and embed different illustrations using our free set in partnership with Streamline.

Illustrations

Illustrations can add a bit of color or visual interest to your site that helps build engagement with your users. In combination with a Super template, these free illustrations can quickly bring your new website to life. If you can't find the illustration you need here, look for thousands more at Streamline.

super.so

Customizing icons

You can easily swap out the default illustrations for emojis or custom ones. Notion has a good selection built in that you can change the color of.

Code snippets

The following customization options require you to paste the snippets below into your site settings > Code > CSS tab. You will need to modify the values in the code to make changes.

Changing callout icon size

.notion-callout__icon span {
    width: 42px !important;
    height: 42px !important;
}

Re-enable page header on homepage

#page-index .notion-header {
    display: block!important;
}

For any other help and Support, reach out via the Super dashboard or by email hello@super.so

カスタマイズ

プライマリカラーの変更

テンプレートの色を変更するには、いくつかの手順が必要です。いくつかのオプションもあります。

簡単なオプション

注意: この方法では、Notionの色を上書きする必要があります。

このテンプレートでプライマリカラーを変更する最も簡単な方法は、Notionの緑の色を独自のカスタムカラーで上書きすることです。以下の手順を使用してこれを行うことができます。

次のスニペットをコピーして、Superのサイト設定>コードページ>CSSタブに貼り付けます。

:root {
	--primary-color: #3B9DEF !important;
}

HEXコードを選択して、自分の好きな色に置き換えます。こちらのツールを使ってください。
次に、Superでナビバー、フッターの色を更新して、一致させます。

ヒント：上記の方法を使用する場合、以下のスニペットを追加して、フッターやナビゲーションバーの色を更新することもできます。それ以外の場合は、Super設定から手動で設定できます。

.super-footer, .super-navbar__cta {
  background: var(--primary-color)!important;
}

ゆっくりとしたオプション

このテンプレートでプライマリカラーを変更する別のオプションは、Notionで色を犠牲にしない方法です。以下の手順を実行してください。

右クリックして、色設定を変更することで、すべての色を使用するブロックで色を手動で更新します。
次に、Superでナビバー、フッターの色を更新して、一致させます。
さらに、ブランドカラーに一致するように色を微調整するには、次のコードスニペットのデフォルト値を調整することができます（'ブルー'という名前を選択した色と、カスタムHEXコードに置き換えます）。

:root {
	--color-blue: #3B9DEF !important;
}

コールトゥアクションボタン

Ascentには、リンクをコールトゥアクションボタンに変換する機能があります。以下の例をご覧ください。デフォルトでは、背景色は上記の --primary-color 変数を使用して設定されています。

Call to action button

リンクがボタンになるには、単一の太字のテキストブロックである必要があります。リンクをカスタマイズするには下記のコードスニペットを使用してください。[サイト設定]（歯車アイコン）にアクセスして、**「コード」ページに移動し、「CSS」**タブ内にスニペットを貼り付け、値を更新してください。これにより、Navbarのコールトゥアクションボタンのパディングとボーダーラジウスのスタイルも影響を受けます。

:root {
	--cta-color-text: #FFFFFF!important;
	--cta-color-bg: var(--primary-color)!important;
	--cta-padding: 12px 22px!important;
  --cta-border-radii: 50px!important;
}

フォントのカスタマイズ

サイト>テーマページで別のフォントを選択するだけです。

イラストのカスタマイズ

Streamlineと提携して、無料のセットを使用して、異なるイラストをカスタマイズして埋め込むことができます。

Illustrations

アイコンのカスタマイズ

デフォルトのイラストを簡単に絵文字やカスタムイラストに置き換えることができます。Notionには、色を変更できる優れた選択肢があります。

コードスニペット

以下のカスタマイズオプションには、サイト設定>コード>CSSタブに下記のスニペットを貼り付ける必要があります。コードの値を変更して変更する必要があります。

コールアウトアイコンサイズの変更

.notion-callout__icon span {
    width: 42px !important;
    height: 42px !important;
}

ホームページのページヘッダーを再有効化する

#page-index .notion-header {
    display: block!important;
}

その他のヘルプやサポートについては、Superダッシュボードまたはメールでhello@super.soにお問い合わせください。