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; 

    design-tab.png

  2. Navigate to your Themes Gallery

    themes-gallery.PNG

    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

    more-details.PNG

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

    brand-this-theme.PNG

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. 

sites-and-pages.PNG

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

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. 
Considering each theme to have a fundamentally distinct structure, some sections may not be used on your theme. 

NotInUse.png

Although the color palette modifies the global look-and-feel, you're able to more granularly configure each of the associated elements. This same process is covered in Section 2. 

When clicking on each of the provided sections, a color picker menu will expand, allowing you to select your required color, as well as supporting both HEX and RGB values. 

 

color-picker.PNG

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

      background-image.PNG

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

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

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

    integrations.PNG

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.
Have more questions? Submit a request

Comments

Powered by Zendesk