Style Wizard Icons

Forms SharePoint Online
1

Hi,

I saw an image where you can style the Wizards. Please see the image below...

I want make the wizard circles slightly thicker in my form and change the styling of the numbers as well!
I'm using the Plumsail Application to design my forms.

image

2

Hello @DryChips,

You can change styling of any element using the CSS. To change the border thickness and icon size use this code:

.vue-form-wizard.md .wizard-icon-circle {
    border-width: thick;
}

.wizard-icon {
    font-weight: 800;
}
1 Like
3

Great! Thanks a lot :slight_smile:

4

How can I change the text styling for the wizards?

I put this code into my CSS and it's not working:

.vue-form-wizard.md .wizard-icon-circle {
border-width: thick;
font-size:12px;
font-weight: bold;
font-style:10;
}

.wizard-icon {
font-weight: 800;
}

5

@Qman,

What text styling do you want to change? The wizard icon or the step content?

Also note that font-style:10; is invalid property. Learn more about the property and its options here:

6

Hi @mnikitina,

Thanks for that.

I want to change the font and text family for this..

image

7

Hello @Qman,

You can change the step styling using this CSS:

span.stepTitle.active {
    font-size: 18px;
    font-family: serif;
}
2 Likes
8

Awesome, thanks a lot!