Theme Design

Introduction to Theme Design

Learn how you can use Theme Design :

How to Use

You can easily design our themes in Admin panel.

How to Configure

Login to your backend page, then go to BLUESKYTECHCO > Theme Design.

1. General

• 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

• 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 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

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

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

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

4. Header

• 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.

5. Footer

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

6. Menu

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

7. Paper Wrapper

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

8. Main Content Container

• 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)

Add your custom css here.

After setting, click to Save Config to save.

Copyright © 2022 Blueskytechco.com. All Rights Reserved.

10. Add Custom Fonts

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

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

then include the css file in the default.xml file:

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

Then run command Upgrade and deploy.

set custom fonts on admin page:

finally clear the cache and check