CommandBar custom components that speaks your brand

So you’ve just installed and integrated your first CommandBar.
Now what? If you’re a design-minded like me, you want to make it more unique and look great 💅. Right?

In these steps, we’re going to customize CommandBar that speaks your brand.

Default CommandBar theme

… into this. 😎

Perfecto theme that you’re about to re-create

Here’s what you exactly need 👇:

• CommandBar into your website.
• CommandBar PRO needed for customizing theme/skins and custom components integration.

Steps:

1. Open Editor → Settings tab → Styles → Skins (Theme)

Here’s where your theme/skin is currently at…

You need to initially add Commands, Categories and Tabs

2. Navigate to Base and add these values.

3. Now, go to Bar to adjust width and Placeholder to update the font color.

4. Then, go to Input and adjust padding styles.

At this point you should have something like this… easy right? 😎

CommandBar with simple styles adjustments

…shall we continue?

5. Go to Category Header and update the default values.

6. Navigate to the Search Tab and Option Selected styles section and add these values.

Your CommandBar should look something like this…

CommandBar almost Perfecto theme

7. Now, here’s the fun part. Let’s add the custom header and footer using CommandBar Enterprise SDK.

Add custom footer component using windows.CommandBar.setCustomComponent('footer', () => ...);

This is what it should look like..

CommandBar with custom footer components

Add custom header component using windows.CommandBar.setCustomComponent('header', () => ...);

Here’s what it should look like…

CommandBar with custom header components

…and you’re done 🎉

Thanks for reading and following along. I hope that this story will give value to you at some point. Please feel free to reach out if you have any questions.