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
Last updated
