No internet connection
  1. Home
  2. Support

Custom CSS and theming

By Koos @koos
    2019-10-05 13:11:27.644Z

    Hey, I managed to get quite far with customizing the Talkyard CSS, but I have several issues:

    1. 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!
    2. The overrides are loaded before the base style sheet, so I have to add !important to many styles.
    3. 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).
    4. 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.
    Solved in post #6, click to view
    Reply
    • 7 replies
    1. 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?

      Reply
      1. KKoos @koos
          2019-10-05 17:24:40.660Z

          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!

          Reply
          1. 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 the dark-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)

            Reply
            1. KKoos @koos
                2019-10-16 12:55:38.715Z

                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.

                Reply
                1. KKoos @koos
                    2019-10-16 18:13:52.307Z2019-10-17 08:28:07.596Z

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

                    ReplySolution
                    1. 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.

                      Reply
                      1. 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 than getElementById("ed-embedded-comments"). Because id="ed-embedded-comments" is old, from before Talkyard was renamed to ... Talkyard.

                        Reply1 Like
              ReplyAdd progress note