# Theme Design

### Introduction to Theme Design <a href="#themedesignpg-intro" id="themedesignpg-intro"></a>

Learn how you can use **Theme Design** :

{% embed url="https://youtu.be/EQ_NG6Bt95o" %}

### How to Use

You can easily design our themes in Admin panel.

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FNHJu9ddt202rYmCD765S%2Fp1.png?alt=media\&token=6be43e51-9167-4728-8ff2-331109525ef6)

### How to Configure

Login to your backend page, then go to <mark style="color:red;">`BLUESKYTECHCO > Theme Design`</mark>.

#### 1. General <a href="#themedesignpg-howtoconfigure-1" id="themedesignpg-howtoconfigure-1"></a>

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FB7B84uQW2rwfJo5SbkAO%2Fp2.png?alt=media\&token=a91951eb-02b2-4e23-98ab-035270ffa5c3)

* In the **Disable Debug Mode** field: Enable or disable Debig Mode. It will break the style and It is used only for developer to debug on frontstore.
* In the **Page Width** field: Specify your frontstore max width.
* In the **Icon LazyLoad** field: Upload the Lazy Loading icon.
* In the **Button Border Radius** field: Specify the border radius of button.

#### 2. Fonts <a href="#themedesignpg-howtoconfigure-2" id="themedesignpg-howtoconfigure-2"></a>

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2F072g9RlmtGytg0tVgcgS%2Fp3.png?alt=media\&token=9cae3ddb-db09-47cc-9763-4a1f3e819bd0)

* In the **Fetch Google Fonts** field: Click **Submit** to Fetch Google Fonts via API. It allows get data Google Fonts for the available font families. The REST API supplies data in the JSON format that includes the styles and scripts (called subsets in Google Fonts) in each family.
* In the **Body Font Family** field: Select type of Font to use in Site.
* In the **Customize** field: Customize the font. Please follow this [link](https://fonts.google.com/specimen/Poppins) for more information.
* In the **Body Font Size** field: Specify Body Fontsize.
* In the **Body Font Weight** field: Specify Body Fontweight.
* In the **Heading Font Family** field: Select Font family of Heading.
* In the **Menu Font Family** field: Select Font family of menu.
* In the **Other Font Family** field: Select orther Font Family.

#### 3. Colors <a href="#themedesignpg-howtoconfigure-3" id="themedesignpg-howtoconfigure-3"></a>

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FQHvDQlZKUJTmKv6VRVlh%2Fp4.png?alt=media\&token=c63b1298-bafb-4119-a6ba-6b276de4f3ca)

In the **Theme Colors** field: Select your custom color to the theme.

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FvokJCYYcKIpq25BpJyge%2Fp5.png?alt=media\&token=2de6fd55-5208-47d2-b8d3-ad8f2c09dd78)

In the **Custom** field of **Basic Colors**: Select **Yes** to customize Basic Colors as below.

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FQ9DRQsIhPTZ9l0x7WeRh%2Fp6.png?alt=media\&token=3afa8748-b996-413e-bf56-96fe0840133a)

In the **Custom** field of **Button Colors**: Select **Yes** to customize Button Colors as below.

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FTPP7lFFtAXbyvRSfqLuu%2Fp7.png?alt=media\&token=3d01b0f0-3b09-46d4-bc8e-e8f83c7abbaf)

#### 4. Header <a href="#themedesignpg-howtoconfigure-4" id="themedesignpg-howtoconfigure-4"></a>

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FNyFtC3wa7dH16M0ZWGeL%2Fp9.png?alt=media\&token=e2b8ca45-4467-4480-9b93-5e8d53e6081c)

* In the **Sticky Background Color** field: Select **Default** if you want to use our default color for sticky header. Select **Custom** to customize color for sticky header.
* In the **Custom Header** field: Select **Yes** if you want to Customize some options of header as below.

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FNyFtC3wa7dH16M0ZWGeL%2Fp9.png?alt=media\&token=e2b8ca45-4467-4480-9b93-5e8d53e6081c)

#### 5. Footer <a href="#themedesignpg-howtoconfigure-5" id="themedesignpg-howtoconfigure-5"></a>

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2F7lANP3gnuTHCg0VmebSS%2Fp10.png?alt=media\&token=4ca8c4ad-e8e7-4d06-938a-608d7ce58046)

* In the **Custom Header** field: Select **Yes** if you want to Customize some options of Footer as above.

#### 6. Menu <a href="#themedesignpg-howtoconfigure-6" id="themedesignpg-howtoconfigure-6"></a>

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FLeDSQvf7aiiimskJ9R2q%2Fp11.png?alt=media\&token=8ab3e719-e8ed-4952-9b17-7f4d8caabcfa)

* In the **Custom Menu** field: Select **Yes** if you want to Customize some options of Menu as above.

#### 7. Paper Wrapper

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FQX8jGKbfzUYSTIS5v63W%2Fp12.png?alt=media\&token=900c2858-d618-4c62-a8f6-3f5f9d3113e9)

* In the **Custom Page Wrapper** field: Select **Yes** if you want to Customize some options of Paper Wrapper as above.

#### 8. Main Content Container <a href="#themedesignpg-howtoconfigure-8" id="themedesignpg-howtoconfigure-8"></a>

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FeV3oeSmhNhix3UmofH3I%2Fp13.png?alt=media\&token=e59ee724-e74d-4f7c-b9b2-1d6bef482ed4)

* In the **Custom Main Content Container** field: Select **Yes** if you want to Customize some options of Paper Wrapper as above.

#### 9. Customization Style (CSS) <a href="#themedesignpg-howtoconfigure-9" id="themedesignpg-howtoconfigure-9"></a>

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2F4le7R3yOnBMTzP6wrPwA%2Fp14.png?alt=media\&token=267aa448-d55f-4a19-b12c-c8d683c2ae65)

Add your custom css here.

After setting, click to **Save Config** to save.

Copyright © 2022 [Blueskytechco.com](https://blueskytechco.com/). All Rights Reserved.



#### 10. Add Custom Fonts <a href="#themedesignpg-howtoconfigure-9" id="themedesignpg-howtoconfigure-9"></a>

\- please add your custom fonts to the directory: Path: \app\code\Blueskytechco\PageBuilderCustom\view\base\web\fonts

<figure><img src="https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2Fc5xfC271jQysPrHTXXvU%2Ffont_1.png?alt=media&#x26;token=018d6d9c-5742-4c1d-9a85-4d7bceef2950" alt=""><figcaption></figcaption></figure>

and add your custom CSS fonts to the directory: Path: \app\code\Blueskytechco\PageBuilderCustom\view\base\web\css

<figure><img src="https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FfhWsxL1VW3VJ0vD1t95p%2Ffont_2.png?alt=media&#x26;token=bba029a9-1db3-42e9-96fe-a59461d1840a" alt=""><figcaption></figcaption></figure>

then include the css file in the default.xml file:&#x20;

Path: \app\code\Blueskytechco\PageBuilderCustom\view\adminhtml\layout\default.xml

<figure><img src="https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FeEzpQajV1seOlJSH4rUf%2Ffont_3.png?alt=media&#x26;token=e5d7ab78-92d3-464e-9a88-29a2d68f0d15" alt=""><figcaption></figcaption></figure>

Then run command Upgrade and deploy.

set custom fonts on admin page:

<figure><img src="https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FMrEuSec5Y2t8Znx8a0nZ%2Ffont_4.png?alt=media&#x26;token=db6f57f8-e9c9-4c54-8545-0ae49c434697" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FG6VPQ41iUlTaOb1eYcij%2Ffont_5.png?alt=media&#x26;token=8bd88ad1-9670-49ac-b38b-0465c97eec66" alt=""><figcaption></figcaption></figure>

finally clear the cache and check
