Style SharePoint Toolbar

Forms SharePoint 2019
1

Hi,

I want to style this toolbar in SharePoint. How can I do this?

image
image993×56 3.02 KB

I saw this design on a blog and want to know how this is done?

image
image882×55 26.7 KB

2

Hello @DryChips,

You can change the toolbar background, change the color or set the image, using the CSS:

.ms-CommandBar.fd-form.fd-form-toolbar {
    background-color: red;
}
1 Like
3

Awesome! Thank you!

How can I set an image like that? Do I need to give it a Url or...?

4

@DryChips,

You can set an image as a background using background-image property:

.ms-CommandBar.fd-form.fd-form-toolbar {
    background-image: url("Image-URL")
}
1 Like
5

This is perfect! Is it possible to change the height and width of the toolbar as well?

6

@DryChips,

Yes, using the height and width properties like this:

.ms-CommandBar.fd-form.fd-form-toolbar {
    height: 60px !important;
    width: 150px !important
}
1 Like
7

Hello @mnikitina,

How do I hide the 'Save' button and keep the 'Close' button in a SharePoint Tool bar?

Much obliged!

8

@DryChips,

You can hide the save button using this code:

fd.toolbar.buttons[0].style = "display: none;";

Find more information about the toolbar in the documentation here.

2 Likes