Change close button title / icon

[DominikGanic]

Hi again, it would be great if we could somehow change the closing buttons title or content. As currently there is an SVG which is fine enough - but I'd like to modify the buttons class to set some bootstrap classes like "btn-primary btn-sm" which would give it some colors and style.

Also I'd like to place myself the content instead of SVG I would love to use the char "X" as inner value. It would be much better if we could also put some HTML inside like "" to integrate font awesome icons into the close button.

This would improve the entire behaviour as I'd have to hardcode it now and that's not a proper solution. We're planning to use this within a big spread and great platform for real estate rentals and leasing in germany - so we have to stick to some professional solutions instead of hardcoding anything.

Thanks mate! Hope to hear from you soon! :)

[fatihsolhan]

Hi @DominikGanic, isn't this easier with the custom UI?
Or is there a reason that you want to keep using the default UI?

[DominikGanic]

Yep, you're right. I'm currently implementing my custom UI. But I have problems with positionating the guide like previously popper did the job. Hm. Gonna need to figure out how I'll do this as it's now static.

[fatihsolhan]

Hey @DominikGanic, I would love to try helping with your case if you want to share your code examples

[DominikGanic]

Hi @fatihsolhan, watch out the screen below. There are two problems which make it complicated for me tho.

1. Popper is not setup here. The guide "wrapper" is static on top of my page.
2. The overlay is not visible, which always has been highlighting the element which I was showing off with my guide.

Sadly it's not possible to determine the position of the currently attached element so I can't do anything here with a custom ui. Otherwise, using your UI, which was fine enough, I can't change the close button (icon as well).

That makes me sad. :(

[DominikGanic]

Here you can see, the attached element on the left is being highlighted, while my wrapper is positionated absolutely on the page. That's perfect.

[DominikGanic]

I've managed to let it look like I've wanted. For anybody else, I've attached the CSS belowe which overrides some styles. The SVG with the "X" is also now perfectly visible. :)

.v-onboarding-item__header-title {
font-weight: 600;
color: #5598d2;
}

.v-onboarding-item__description {
color: #a1a5b7;
font-size: 12px;
margin-top: unset;
}

.v-onboarding-item__header-close {
font-size: 14px;
color: white;
background: #5598d2;
border-radius: 0.475rem;
border: unset;
margin: unset;
padding: unset;
box-shadow: unset;
position: relative;
height: 20px;
width: 20px;
transition: background 0.25s ease-in-out;

&:hover {
background: darken(#5598d2, 10%);
}

svg {
width: 12px;
height: 12px;
}
}