How to customize your theme using BindTuning's Customizer Tool

BindTuning's Design subscription (themes),  empowers you to mirror theme experience to your respective business needs and brand identity, while offering an easy-to-use, point-and-click tool (Online Customizer), through which the entirety of the customization process is performed.

Before we begin

In order to customize your BindTuning theme, you will need an active Design subscription. If, alternatively, you don't have an active BindTuning account be sure to Sign Up for a free trial, in order to follow the below-mentioned steps. 

After logging in and/or signing up in your BindTuning account, we will proceed to access our Themes Gallery dashboard. To do so, follow the steps below: 

1. On your Homepage, navigate to the Design (pencil) tab; 

   

2. Navigate to your Themes Gallery; 

   

   Note: If this is your first time customizing a BindTuning theme, you'll access your Themes Gallery tab automatically.

3. From your Themes Gallery, select one of the provided BindTuning theme templates; 
4. Mouse over the selected template and click on More Details; 

   

5. On the panel, select Brand this Theme, followed by the SharePoint version you're customizing the theme for. 

   

This same procedure will redirect you to BindTuning's Online Customizer Tool, where you'll be able to perform the necessary adjustments to the selected base template.

By default, the Customizer Tool will open in classic view, displaying a Classic Team Site. If you're using a different site template, proceed to expand the Sites and Pages navigation element, and select the type of site and/or page you wish to preview the theme for. 

Moreover, the Navigation elements provide several extra-resources to make the most out of your theme customization, including sample HTML elements. 

Customization Options

After accessing BindTuning's Customizer Tool, you will be presented with the customization panel. This same panel will allow you to perform adjustments to the various theme components, comprehended by the template. This article covers those same components, as well as correlative functionalities: 

BindTuning's Customizer Tool is divided into three major categories: 

• Section 1 - Main color palette; 
• Section 2 - Customization options; 
• Section 3 - Assets and options. 

Section 1

The main color palette defines the overarching theme colors and experience. The color palette is divided into 6 distinct actuation zones: 

Note: If you mouse over each section, you'll be given the correlative elements where the color will be applied to. 

• Base color, links, buttons, header/footer, more - Providing the main theme color, spanning across multiple theme zones. 
• Page background, boxed layouts - Providing the ability to modify background colors on classic page layouts;
• Navigation - Providing the ability to modify the color palette associated with your navigation elements;
• Navigation (selected item) - Adjusting the color schema of your navigation elements that have been clicked on; 
• Other elements - Providing configuration options for other theme-specific elements. 

Section 2

Despite the Main Color palette covered in Section 1, providing you the ability to change the global theme palette, the Customizer Tool provides more in-depth functionalities, changing sub-elements, and even integrations. Below, you'll find detailed descriptions for each zone. 

1. Industry Sets - Providing you with several pre-arranged color palettes, following specific brand guidelines and industries. Note that selecting any of the industry sets will change your main color section.

   

2. Customize - Granting you granular control over each sub-element of the main color palette, defined in Section 1.

   

   Under your Customize section, you'll be able to fine-tune the following elements:  

   1. Navigation  - Allowing control over your navigation elements, namely text, background, hover, etc;
   2. Text Links - Allowing you to define the font utilized, as well as the default color of links and correlative hover;
   3. Background - Defining color and/ background images and patterns for boxed-layouts;

      This same option will only affect Classic sites and/or pages.

   4. Page Width - Allowing you to define the default page width for your BindTuning theme;

      This same option will only affect Classic sites and/or pages.

   5. Sections/Footer - Defining background and text color for BindTuning's theme footer;
   6. Tokens - Allowing you to toggle default SharePoint elements (i.e, Breadcrumbs, Login, Search, etc.);

      This same option will only affect Classic sites and/or pages.

   7. Suite Bar - Allowing you to define the background and text color of the default SharePoint suite bar.
   
   
   Depending on the theme you have selected, you may have different sections available to customize.
   
   
   1. Navigation - In this section, you'll be able to adjust fonts and correlative colors for various Navigation sub-elements, as well as define a correlative navigation font (if applicable to the corresponding chosen theme template):

      

      Below, you'll find demonstrative images relating to each sub-section function:

      

      
   2. Text/Links - The Text/Links section will allow you to set and configure the theme's base fonts, as well as correlative colors utilized. The Customizer Tool also provides you with the ability to import your custom fonts and, subsequently, apply them in your customization. In order to upload your fonts, follow the next article.

      

      Below, you'll find demonstrative images relating to each sub-section function:

      

   3. Background - The Background section will allow you to define a background color or image, to be rendered inside your Classic SharePoint Site and/or pages. 

      

      

   4. Page Width - Likewise, BindTuning's themes allow you to define a Page Width, that will be rendered accordingly, inside a Classic SharePoint Site and/or pages. 

      

      We recommend setting your Page Width utilizing percentages, as it will make sure to render according to the available screen size.

   5. Footer - The Footer section will be utilized to define the color behavior of both text and links.

      

      Below, you'll find demonstrative images relating to each sub-section function:

      

   6. Tokens - Pick your exclusive tokens like Copyright, Search, etc. When unticking any of the provided elements, the final theme version will render accordingly, inside Classic sites and/or pages.

      

   7. Suite Bar - This section will allow you control over the background and text color of your default SharePoint Suite Bar

      Note that this same configuration will take precedence over previously defined color schemas (i.e, through your Office 365 Administration center).

      

3. Magic Tool - BindTuning's Magic Tool provides you with the ability to automatically extract color palettes based on an image or public-facing URL, making the customization process easier and, following your concrete brand guidelines and requirements.

    

   

   • • Upload Image - Insert an image from your desktop and extract its main colors to your main color section.

       

     • Type an URL - Insert a website URL and get its main colors applied to your main color section.

       

4. Optimize - You can choose to remove some Bootstrap components that will allow you to increase the performance of your theme.

   

   Bootstrap is required for Classic theme functionality, as it provides compatibility while using BindTuning's Build feature (Web Parts). In order to decrease file size, but ensure correct Web Part functioning, we recommend enabling the option Include minimum components to work with BindTuning Web Parts.

5. Integrations - BindTuning themes are fully prepared to integrate with Skybow. If you'd like to utilize that same feature, be sure to toggle the option On.

   

Section 3

Manage your BindTuning assets and customizations.

1. Check how your customization will look when you're accessing your site from different devices Mobile, Tablet or Desktop.

   

2. Click on your gravatar to access your own fonts, background, customizations and BindTuning account.

   

3. On My Customization, you may:
   1. Share the customization.
   2. Save the customization.
   3. Replace your stored customizations by clicking on the Floppy Disk icon.

   

4. You're able to revert to your last modification, by clicking on the Undo button, or, alternatively,  apply a reverted modification by clicking on Redo.

   

5. It's possible to go revert to the default theme customization by clicking on Start Over.

   

6. To check the available shortcuts, click on Keyboard;
7. Click on the Help option, if trying to access more BindTuning related questions and/or information relating to the product.