Onderwerpskaarten

[JammyDodger]

Voor alle duidelijkheid, het invoeren van de veilige modus om de bulkacties uit te voeren kan een alternatief zijn voor het uitschakelen van de thema-component voor iedereen. Uiteraard nog steeds een extra gedoe, maar mogelijk minder impact op iedereen anders?

[tknospdr (David Muszynski)]

Ja, dat is wat ik ontdekte nadat ik over de veilige modus had geleerd…

Maar ik zou nog steeds liever hebben dat de widget wordt weergegeven.

[DenisDoroshchuk]

Hello,

Thank you for your component! We noticed a problem when using your component on the forum https://community.escapecollective.com/. If you click on the topic title, the SPA reloads (I attached gif with this problem), but if you click on the card outside the title, everything works fine. The problem was discovered because the Guest Gate component was not working properly due to the page reloading.
Here is a suggestion: Guest Gate Theme Component - #154 by Don
Could you please take a look at this issue?

Thank you,
Denis D.

[tknospdr (David Muszynski)]

@tknospdr

Thanks, I added:

.topic-card.has-max-height {
    background: #e6ecf2
}
.topic-card.has-max-height:hover {
    background: #ddecf7
}

And it works perfectly with stock ‘Shades of Blue’ palette.

Alright, part 2. How do I edit it to work with 2 color palettes? Looked good till the browser switched to dark mode.

Answering my own question again…

I learned about @media (prefers-color-scheme: light/dark) last night, so all good.

So it appears something has changed with the last round of Discourse updates.
Only the very left edge of my topic cards are now respecting this CSS, I’ve been poking around to try and find what will fix it but so far have been unsuccessful.
Can anyone else confirm and see if they can track down the needed changes?

[Moin]

The problem is the recently added variable for the background color on topics you have read.

I don’t think there is a dev-news about this change. But you can find some information here:

Styling Discourse with variables: Show & Tell

We’ve recently added a lot of css variables to Discourse. These variables make theming and customizing aspects of the UI much easier. For many changes, you will no longer need to target super specific elements in the html, and instead only change a variable. If you are curious about what variables are able to be changed, I suggest you look through the app using this regex → --([a-zA-Z0-9\-_]+): If using a code editor and searching for all instances of the above regex, you should see something …

[tknospdr (David Muszynski)]

So is there a way to suppress that CSS? This has destroyed the way my site looks and as I’m not really a coder in any sense of the word, I don’t know how to get around it.
I looked through the element inspector, and I see the word ‘visited’ on all the broken topics and I see that it’s missing on the one that still looks right.
How do I fix this?

Topic I have not visited yet (no hover):

And with a mouseover:

And the others are broken.

[tknospdr (David Muszynski)]

Dat was moeilijker te traceren dan het had moeten zijn. (Ik ben er vrij zeker van dat het aan mijn tekortkomingen ligt, maar toch…)

Het lijkt erop dat het toevoegen van:

.topic-list-item-background-color--visited {
    background: none
}

Het heeft opgelost zonder ongewenste bijwerkingen.

[jordan.vidrine]

In uw stijlen hoeft u nu alleen deze twee variabelen te wijzigen:

--topic-list-item-background-color
--topic-list-item-background-color--visited

Dus iets als dit zou moeten werken:

:root {
--topic-list-item-background-color: UW KLEUR HIER;
--topic-list-item-background-color--visited: UW KLEUR HIER;
}

[tknospdr (David Muszynski)]

Hoe zou dat rekening houden met de verschillen bij het wisselen tussen licht en donker?
Ook wil ik niet dat het anders is als het bezocht is, en dat dekt de wijziging van de hoverkleur niet.

[jordan.vidrine]

@tknospdr

How would that account for the differences when changing between light and dark?

You can use the css function light-dark()

--variable-name: light-dark(#efedea, #223a2c);

@tknospdr

I don’t want it to be different once visited

You can set them both to the same thing.

@tknospdr

doesn’t cover the hover color change.

Nothing has been done to :hover in core. You’ll just need to make sure to set the variable to what you want when hovering.

[tknospdr (David Muszynski)]

This still isn’t working for me.
This is what originally worked:

// Blend topic card colors with theme
@media (prefers-color-scheme: dark) {
    .topic-card.has-max-height {
        background: #223c44 !important;
    }
    .topic-card.has-max-height:hover {
        background: #163d51 !important;
    }
}

@media (prefers-color-scheme: light) {
    .topic-card.has-max-height {
        background: #e6ecf2 !important;
    }
    .topic-card.has-max-height:hover {
        background: #ddecf7 !important;
    }
}

Then after the latest update I added this is it seemed to work, but then stopped:

.topic-list-item-background-color--visited {
    background: none
}

Then, based on what you said here I tried both adding to the current and replacing everything with this:

:root {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--hover: light-dark(#ddecf7, #163d51);
}

There must be another variable that I need to cover hover-visited, because unread threads work right, but visited ones are busted.

[jordan.vidrine]

@tknospdr

--topic-list-item-background-color--hover: light-dark(#ddecf7, #163d51);

This variable does not exist.

.topic-card.has-max-height:hover {
--topic-list-item-background-color: ADD COLOR HERE
--topic-list-item-background-color--visited: ADD COLOR HERE
}

This should be what you need, hope that helps!

[tknospdr (David Muszynski)]

Dit is het kleinste aantal regels dat ik kon bedenken dat correct lijkt te werken.

// Blend topic card colors with theme
.topic-card.has-max-height {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(none, none);
}

.topic-card.has-max-height:hover {
--topic-list-item-background-color: light-dark(#ddecf7, #163d51);
--topic-list-item-background-color--visited: light-dark(none, none);
}

@media (prefers-color-scheme: dark) {
    .topic-card.has-max-height {
        background: #223c44 !important;
    }
    .topic-card.has-max-height:hover {
        background: #163d51 !important;
    }
}

@media (prefers-color-scheme: light) {
    .topic-card.has-max-height {
        background: #e6ecf2 !important;
    }
    .topic-card.has-max-height:hover {
        background: #ddecf7 !important;
    }
}

[RGJ (Richard - Communiteq)]

I have made a PR to this theme component with two additions:

Feature: Suggested topics switch

Adds the setting Show for suggested topics

Makes use of topic cards for suggested topics optional (as described in this feature request)

Feature: Limit to categories

Adds the setting Show on categories

If non-empty, uses topic cards on selected categories only.

[jrgong]

Fantastische toevoeging @RGJ , we hebben het getest op onze instantie en het werkt als een zonnetje, zou naar mijn mening zeker gemerged moeten worden.

[jrgong]

Found another small CSS bug with this tc on discourse 3.5.0:

A border is added around several UI elements such as edit history and expand quote elements.

This is due to classes btn no-text missing from the button elements

[chapoi]

Beoordeeld en samengevoegd, bedankt voor de toevoeging!

[Picho_Pelis (Carlos Andres)]

I honestly haven’t been able to make it work, look how ugly it turns out, I use the Horizon theme, help me.

[Moin]

This component is not listed as compatible with the Horizon theme.

I don’t think it will be easy to change that because both customize the topic list, and as stated in the first post:

@Discourse

This theme component may cause conflicts with other customisations to the topic list

[Picho_Pelis (Carlos Andres)]

@tknospdr

.topic-card.has-max-height {
    background: #e6ecf2
}
.topic-card.has-max-height:hover {
    background: #ddecf7
}

How can I add the CSS, which I see here in the threads, a lot of CSS