BlockStrap Documentation

Change Primary and Secondary Colors (Bootstrap) from the AyeCode UI settings page

Important Notice: Although changing the primary and secondary colors of your Blockstrap theme via Customizer settings is possible, using the Full Site Editing (FSE) editor is highly recommended for greater control and consistency in your site’s design. For a detailed guide on changing colors through the FSE editor, please refer to this other guide.

Step-by-step instructions:

  1. Log in to your WordPress Dashboard:
    • Navigate to your WordPress website’s admin login page, typically located at yourdomain.com/wp-login.php.
      WordPress Login Screen
    • Enter your username and password, then click “Log In.”
  2. Access the Customizer:
    • Once logged in, find the “Appearance” tab on the left-hand side of the Dashboard.
    • Click on “Appearance” to expand the menu, then select “Customize.”
      customizer link
  3. Navigate to the AyeCode UI settings page:
    • In the Customizer, locate and click on the “AyeCode UI” section.
      customizer AUI
  4. Change the primary color:
    • Locate the “Primary Color” setting, which controls the default color for various Bootstrap elements, such as buttons, links, and more.
      customizer AUI primary color
    • Click on the color picker box next to the “Primary Color” label.
    • Choose your desired color using the color picker, or enter a specific color code (e.g., HEX, RGB) in the provided input field.
    • The preview in the Customizer should update to reflect the new primary color.
  5. Change the secondary color:
    • Locate the “Secondary Color” setting, which controls the secondary color for Bootstrap elements.
      customizer AUI secondary color
    • Click on the color picker box next to the “Secondary Color” label.
    • Choose your desired color using the color picker, or enter a specific color code (e.g., HEX, RGB) in the provided input field.
    • The preview in the Customizer should update to reflect the new secondary color.
  6. Save your changes:
    • Click the “Publish” button at the top of the Customizer to save your changes and make them live on your site.
      publish customizer changes
  7. Verify your changes:
    • Visit your website and ensure that the primary and secondary colors of the Bootstrap elements have been updated to your chosen colors.

Congratulations! You have successfully changed the primary and secondary colors of your Blockstrap theme using the AyeCode UI settings page within the Customizer options on WordPress. Your site should now display your customized color scheme, providing a unique and personalized appearance.

Should you require more granular control over AUI colors, please change colors through the FSE editor as explained here.

Feedback