CSS Around Preview

[William]

I don't know what they call it? Thread preview?

Anyhoot, I think VB looks unpolished in this area:




Notice Xenforo:



Is there a way to duplicate that exact same look in Vb 5?

Thanks,
William

[glennrocksvb]

Yeah that can be done in vB5.

[William]

Please lemme know whether you'd like this as a job or whether you'd provide instruction!

Enjoy,
William

[glennrocksvb]

Do you want just the style to be the same or you also want to add avatar, author name and date posted in the preview?

[William]

Do you want just the style to be the same or you also want to add avatar, author name and date posted in the preview?

Hi Glenn,

Just the style would be great!

Enjoy,
William

[glennrocksvb]

Try this:

.ui-tooltip.b-topicpreview {
    border: 10px solid rgba(17, 75, 133, 0.498039);
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.498039) 0px 12px 25px;
}
.ui-tooltip.b-topicpreview .ui-tooltip-content {
    background: #fff;
    border: 1px solid #e6e6e6;
    padding: 10px;
}

For the arrow, it's hard to change style as it is generated by the tooltip plugin as a canvas element.

I just implemented that here, you can check it out.

[rnedelkow]

This is a neat little mod. I'd like to apply the same css to a notice like you have at the top. How do you check for a missing avatar before making the notice visible?

[glennrocksvb]

I'll post that soon.

[rnedelkow]

Thanks Glenn. Really appreciate your help!

[William]

Try this:

.ui-tooltip.b-topicpreview {
border: 10px solid rgba(17, 75, 133, 0.498039);
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.498039) 0px 12px 25px;
}
.ui-tooltip.b-topicpreview .ui-tooltip-content {
background: #fff;
border: 1px solid #e6e6e6;
padding: 10px;
}

For the arrow, it's hard to change style as it is generated by the tooltip plugin as a canvas element.

I just implemented that here, you can check it out.

Looks great Glenn! I even added the Css around forum notices:

[Dotti]

How did you add it to notices? Also, can you add it to announcements?

[William]

Hi Glenn,

I have another tooltip preview that I can't find the class for. In the screen shot you can see it which shows nothing more than the title that is selected. The page is located here: https://www.christforums.org/Activity

The tooltip in the screen shot I'm trying to disable altogether.

And my last request, I can never find these tooltip previews in Firefox developer tools. I tried selecting hover, focus, etc from the pseudo classes but to no avail. Is there a trick to this or could you point me in the right direction? I ask because I'd really like to learn how to do it!

Thanks,
William

[Dotti]

Do you want just the style to be the same or you also want to add avatar, author name and date posted in the preview?

How much would it be for you to do this for me?