Change close button title / icon

[fatihsolhan]

Change close button title / icon

[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;
}
}

[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.