Skip to content

4. Colors

Jump to bottom
Jessglynne edited this page Nov 15, 2021 · 1 revision

Astroid Presets

Presets in Astroid means some pre-defined sets of colors that will automatically be applied to your site to improve its look and feel. They can easily be modified by changing the color options in the backend depending upon the theme of your website. You can create any number of presets when required, by default Astroid comes with 4 already created presets.

To create your own preset, please follow these simple steps:

  • Add/Change the color of all the different options available like preloader color, body colors, menu colors, theming colors and others.
  • Click on the Export Preset option, and give a name to your preset

A json file will be downloaded, place this file in your template’s preset folder. Path: ASTROID_FOLDER\templates\TEMPLATE_NAME\astroid\presets

  • After placing the file just refresh the Astroid backend and you will see your new preset along with others.
  • Select your preset & click the Save button, and your preset will be applied on frontend.

Mobile Menu Colors

Now you can set a different color scheme for the Mobile Menu on your site.

  1. Background Color Set the default Background color for the Mobile Menu.
  2. Text Color Set the default Background color for the Mobile Menu.
  3. Link Color Set the color of the links in the Mobile Menu items and its sub-menu items.
  4. Active Link Color Set the color for the active links (links become active once you click on them).
  5. Active Background Color Set the Background color for the active links.
  6. Hamburger Icon Color Set the hamburger icon color for the Mobile Menu.
  7. Active Hamburger Icon Color Set the active hamburger icon color for the Mobile Menu.

Body Color

Here you can configure color settings for the body.

  1. Background Color Allows you to set the default Background color for the body for the whole site.
  2. Text Color Set the Text color of the Body Content.
  3. Link Color Set the color of the link in the Body Content.
  4. Link Hover Color Set the color for hovered links; links hover when the mouse moves over it.

Header Color

Here you can set the Header color schemes for your site.

  1. Background Color Allows you to set the default Background color for the Header section for the whole site.
  2. Text Color Set the Text color for the Header section.
  3. Logo Text Color Set color for your text logo.
  4. Logo Tag Line Color Set color for Tag Line in your text logo.

Sticky Header Color

Here you can set the Sticky Header color schemes for your site.

  1. Background Color Allows you to set the default Background color for the Dropdown menu.
  2. Link Color Set the color of the link in the dropdown menu for submenu items.
  3. Link Active Color Set the color for the active links; links become active once you click on them.
  4. Link Hover Color Set the color for hovered links; links hover when the mouse moves over it.

Main Menu

Here you can set the Main Menu color schemes for your site.

  1. Link Color Set the link color for the main menu.
  2. Link Active Color Set the appearance of a link while it is being activated.
  3. Link Hover Color Set the link hover color for the main menu.

Dropdown Menu Color

Here you can set the Dropdown color schemes for your site.

  1. Background Color Allows you to set the default Background color for the Dropdown menu.
  2. Link Color Set the color of the link in the dropdown menu for submenu items.
  3. Hover Link Color Set the color for hovered links; links hover when the mouse moves over it.
  4. Hover Background Color Set the Background color for the hovered links.
  5. Active Link Color Set the color for the active links; links become active once you click on them.
  6. Active Background Color Set the Background color for the active links.

Off-Canvas Colors

Here you can set the Off-Canvas color schemes for your site.

  1. Background Color Set the default Background color for the Off-Canvas Menu.
  2. Text Color Set the default Background color for the Off-Canvas Menu.
  3. Link Color Set the color of the link in the Off-Canvas menu for menu and Sub-menu items.
  4. Active Link Color Set the color for the active links (links become active once you click on them).
  5. Active Background Color Set the Background color for the active links.
  6. Hamburger Icon Color Set the hamburger icon color for the offcanvas/mobile menu.
  7. Active Hamburger Icon Color Set the active hamburger icon color for the offcanvas/mobile menu.
Clone this wiki locally