Hey, I managed to get quite far with customizing the Talkyard CSS, but I have several issues:
- I don't understand the meaning of the class names. They don't seem to follow a logic or system and neither are they very descriptive. I'd rather start from scratch with a completely overhauled naming system than continuing to customize this way!
- The overrides are loaded before the base style sheet, so I have to add !important to many styles.
- Customizing the CSS requires a lot of manual page reloads. I'd love to have a way to dynamically inject new styles (e.g. via my websites own CSS).
- My website has a light mode and a dark mode that can be set after the page has loaded. It'd be nice to have a way to send the Talkyard iframe a variable to set a theme class on its
body
which I could then use to write theme-dependent styling.
- KajMagnus @KajMagnus2019-10-05 15:59:07.169Z
I don't understand the meaning of the class names
You're right. I've changed the CSS classes naming schemes over the years, so it's going to look confusing. I plan to refactor this.
The overrides are loaded before the base style sheet
Hmm I think not? Look at the source for https://comments-for-www-kooslooijesteijn-net.talkyard.net/latest:
<link rel="stylesheet" href="https://c1.ty-cdn.net/-/media/fontello/css/fontello-embedded.css"/> <link rel="stylesheet" href="https://c1.ty-cdn.net/-/assets/v0.6.48-WIP-1/styles-bundle.min.css"/> <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,600,400' rel='stylesheet' type='text/css'> // These are your styles, added last: <link rel="stylesheet" href="https://c1.ty-cdn.net/-/site/1cgaa3uxxd/styles.NFFkZhjbNZzskVFcK7uY3d0miDM.css"/>
Customizing the CSS requires a lot of manual page reloads. I'd love to have a way to dynamically inject new styles (e.g. via my websites own CSS).
I agree, I want a live preview. Personally, I edit CSS in Chrome dev tools, and so get to see my changes directly, ... and then I copy-paste into Talkyard's editor. (And yes, this is not ideal.)
I'd like the embedded comments to copy the background color from the blog — and, if it's dark, change the text color so it's white, instead. Probably there're ways to look at the blog, and find the primary button colors too, and reuse for the Reply button etc.
Talkyard iframe a variable to set a theme class on its body
Maybe there could be a data attribute like
data-html-css-class
for a CSS class to add to the embedded<html>
elem in the iframe?- KKoos @koos
Great, looking forward to the changes!
Maybe there could be a data attribute like data-html-css-class for a CSS class to add to the embedded elem in the iframe?
Yes!
- KajMagnus @KajMagnus2019-10-14 09:50:13.757Z
Ok, now you can add this HTML attribute:
data-iframe-html-class="dark-theme"
to the<div class="talkyard-comments" ...>
div; this adds thedark-theme
class to the<html>
tag in the Talkyard iframe.The other changes won't happen the nearest time (probably not this month nor the next). (sorry)
- KKoos @koos
That is amazing! Now I only need the iframe to update with changes to
data-iframe-html-class
. But for now, I'll just reload Talkyard when the theme is changed. Looks like any drafts are saved immediately, so users wouldn't lose it.- KKoos @koos
I found a more flexible solution that lets me set the theme dynamically with postMessage:
On my website:
let iframe = document.getElementById("ed-embedded-comments") if (iframe){ let targetWindow = iframe.contentWindow targetWindow.postMessage(theme, '// my talkyard url ' ); }
In Talkyard's custom JS:
window.addEventListener('message', function(e) { var newTheme = e.data; const root = document.documentElement let otherTheme newTheme === 'light' ? otherTheme = 'dark' : otherTheme = 'light' let currentTheme (root.classList.contains('theme-dark')) ? currentTheme = 'dark' : 'light' root.classList.add('theme-' + newTheme) root.classList.remove('theme-' + otherTheme) }
Still using the
data-iframe-html-class
too, which is useful for when Talkyard hasn't been loaded yet (I'm lazy loading it).- KajMagnus @KajMagnus2019-10-17 09:06:03.094Z
Still using the data-iframe-html-class too, which is useful for when Talkyard hasn't been loaded yet
Ok, good to know. I otherwise started thinking slightly about removing this again :- ) (fewer features = better).
Some day, the comments will lazy-load by default, namely, won't load until they're inside the browser's viewport. (No need to load them if they cannot be seen.)
Interesting approach wih
postMesage
, I didn't think about that. - In reply tokoos⬆:KajMagnus @KajMagnus2019-10-17 09:09:53.088Z
B.t.w. finding the comments
<iframe>
via.talkyard-comments iframe
is more future compatible thangetElementById("ed-embedded-comments")
. Becauseid="ed-embedded-comments"
is old, from before Talkyard was renamed to ... Talkyard.