@Panda said in Fixed background to nodebb forum:
Chatgpt told me the ::before method.
Go figure 😛
@crazycells just for you…
@phenomlab nice this looks very good…
On a side note, I have been just watching/listening Doc and Marty’s adventures in the background and then I see this
@phenomlab can you please share the CSS codes?
@crazycells Of course… You did ask me for these
.tags:not([component="topic/tags"]) a[href*="/tags/"] {
border: 1px solid var(--bs-border-color);
border-radius: 0.375rem;
margin: 8px;
width: 145px;
background: var(--bs-body-navbar);
}
/* SIBLING FADE: fade out siblings around a hovered item */
.tag-list { visibility: hidden; }
/* Prevents :hover from triggering in the gaps between items */
.tag-list > * { visibility: visible; }
/* Brings the child items back in, even though the parent is `hidden` */
.tag-list > * { transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms; }
/* Makes the fades smooth with a slight delay to prevent jumps as the mouse moves between items */
.tag-list:hover > * { opacity: 0.4; transform: scale(0.9); }
/* Fade out all items when the parent is hovered */
.tag-list > *:hover { opacity: 1; transform: scale(1); transition-delay: 0ms, 0ms; }
/* Fade in the currently hovered item */
.tags a[href*="/tags/"] .tag-item {
border-bottom: 4px solid var(--bs-border-color) !important;
}
And the magic happens
Same effect as on the V2 but I love it ^^
@DownPW Thanks, and welcome to “Grand Master” status
Ohhh yes
hi mark
just a small note
seems to that code break tags on topic header :
@DownPW Yes, I am aware. Will address shortly.
EDIT - replace
.tags a[href*="/tags/"] {
border: 1px solid var(--bs-border-color);
border-radius: 0.375rem;
margin: 8px;
width: 145px;
background: var(--bs-body-navbar);
}
With
.tags:not([component="topic/tags"]) a[href*="/tags/"] {
border: 1px solid var(--bs-border-color);
border-radius: 0.375rem;
margin: 8px;
width: 145px;
background: var(--bs-body-navbar);
}
Updating original post
Fix working perfectly