Skip to main content

Customize a theme

BindTuning Team avatar
Written by BindTuning Team
Updated over 2 months ago

BindTuning themes allow the users to brand a SharePoint intranet site collection by customizing basic SharePoint features, such as colors, fonts, footers, and navigation with no code, using our Design Feature Tool.


Selecting a base theme

Choosing the right base theme is the first step in your customization journey. When selecting a theme design, consider three main factors: the logo position, navigation position, and the overall header design. This section details the simple steps to select and modify base themes directly within the app's interface.

To access the Theme Catalog

  1. Log in to the App. > Go to Intranet tab > Themes.

  2. Browse through the themes directory and click Customize

  3. Select the SharePoint version to start customizing.

All designs display demo content to give a realistic context while customizing and won't be deployed during the theme installation.


Customizer Tool

The Customizer Tool lets you adjust various theme components. You can preview the theme on different sites and page types. The tool is organized into three main components:

  1. Main color palette;

  2. Customization options;

  3. Assets and options;

Main color palette

This section defines your theme's overall color scheme. The palette is divided into up to six distinct zones, which can vary by theme package.

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

Considering each theme to have a fundamentally distinct structure, some sections may not be used in your theme. However, you can still select colors like variations of your primary colors or secondary branding that you might consider, which can further enhance your experience.

NotInUse.png

Although the color palette modifies the global look-and-feel, you're able to more granularly configure each of the associated elements.

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

Customization options

Beyond the main color palette, this section offers more in-depth customization for sub-elements and even integrations:

Industry sets

Choose from pre-arranged color palettes based on specific brand guidelines and industries. Selecting one will update your main color section.

Customize

This gives you granular control over each sub-element of the main color palette defined in Section 1. Here's what you can fine-tune:

  • Navigation - Control navigation elements like text, background, and hover effects;

    navigation-menus.PNG

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

    global-navigation.png
    current-navigation.png

  • Text links - Define the font used and the default color of links and their hover states. You can also import custom fonts;

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

    text-links.png
  • Background - Set background colors, images, or patterns for boxed layouts (Classic sites only);

  • Page width - Define the default page width for your BindTuning theme (Classic sites only);

  • Footer - Define background and text color for your theme's footer;

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

    footer-zones.png

  • Tokens - Toggle default SharePoint elements like Breadcrumbs, Login, and Search (Classic sites only);

  • Suite bar - Define the background and text color of the default SharePoint suite bar. This setting takes precedence over previously defined color schemes (e.g., from your Office 365 Administration center);

  • Magic tool: Automatically extract color palettes from an image or public URL to quickly match your brand guidelines.

    • Upload image: Insert an image from your desktop to extract its main colors

    • Type an URL: Enter a website URL to apply its main colors to your theme

  • Optimize - Remove some Bootstrap components to improve theme performance. We recommend enabling "Include minimum components to work with BindTuning Web Parts" to decrease file size while ensuring correct Web Part functionality (Classic pages only).

  • 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 (Classic Site only).

    integrations.PNG

Assets and options

Manage your BindTuning assets and customizations in this section:

Device preview

Check how your customization will look when you're accessing your site from different devices: mobile, tablet or desktop:

Your account

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

My customization

  • Share: Share your customization with others;

  • Save: Save your current customization;

  • Replace: Replace your stored customizations by clicking the floppy disk icon.

  • Undo/Redo: Revert to your last modification or reapply a reverted modification:

  • Start over: Revert to the default theme customization:

  • Shortcuts: Click Keyboard to see available shortcuts.

  • Help: Click Help for more BindTuning-related questions and product information.
    ​


Generate a Theme

Once you're satisfied with your design, branding, and customization, it's time to generate the theme package within the app for installation.

  1. To generate a Theme, the first step is to click on the Get Theme button
    ​

  2. A new window will appear. Give your theme a Display Name. This will be its public name within the app and included in the package name. (It can differ from your customization name.) Click "Next".
    ​
    ​

  3. Finally, define the domain where you plan to install the theme. This field only accepts authorized tenants. Click "Get theme" to start the theme generation process.

Next step article note and link

Did this answer your question?