Skip to content

Theme retirement

Announcements
21 3 9.3k 1
  • additionally, the amplifying circle is not centered on profile pages, FYI…

    Screen Shot 2023-08-10 at 16.13.50.png

    wrote on last edited by
    #12

    @crazycells thanks. I’ve never been able to reproduce this so will have to look at it again.

  • the person who sends the last post are usually seen as avatar, however in large screen it is lost, is this intentional?

    Screen Shot 2023-08-10 at 16.19.40.png
    Screen Shot 2023-08-10 at 16.20.06.png

    wrote on last edited by
    #13

    @crazycells no. That’s probably the result of me using targeted CSS to disable the appearance of something else and inadvertently over compensating. I’ll take a look.

  • the person who sends the last post are usually seen as avatar, however in large screen it is lost, is this intentional?

    Screen Shot 2023-08-10 at 16.19.40.png
    Screen Shot 2023-08-10 at 16.20.06.png

    wrote on last edited by
    #14

    @crazycells You’ll notice some odd looking artefacts like borders and inset box shadows being used.

    I’m going to be removing the legacy themes tomorrow so this problem will resolve itself, but for the full effect, you should select “Material” in the light section. If you switch back to a previous legacy theme afterwards, you’ll need to reload the browser.

  • I liked this… is this number of topics?

    Screen Shot 2023-08-10 at 16.12.57.png

    wrote on last edited by
    #15
  • wrote on last edited by
    #16

    @phenomlab thanks for sharing.

  • @phenomlab thanks for sharing.

    wrote on last edited by
    #17

    @crazycells No problem. it’s also worth noting that I rewrote some of the widget code to include links for each category as these are missing from the original. Here’s the revised code

    <style>
    .stats-info.text-sm.mt-1.mb-3 {
        text-align: center;
    }
    </style>
    <div id="stats-pro">
     
    <div class="progress mt-4 stats-bar" style="height: 8px;">
    {{{ each categories }}}
    <div class="progress-bar-github" role="progressbar" style="width: {./totalTopicCount}%;background-color: {./bgColor};" aria-valuemin="0" aria-valuemax="100"></div>
    {{{ end }}}
    </div>
     
    <div class="stats-info text-sm mt-1 mb-3">
    {{{ each categories }}}
    <a href="/category/{./cid}/{./name}"><span class="mb-3 me-2 fw-semibold text-nowrap"><i class="fa fa-fw fa-solid fa-2xs fa-circle" style="color: {./bgColor};font-weight: 900;"></i> {./name}</a><span class="text-xs text-muted">({./totalTopicCount})</span></span>
    {{{ end }}}
    </div>
     
    </div>
    
    
  • @crazycells No problem. it’s also worth noting that I rewrote some of the widget code to include links for each category as these are missing from the original. Here’s the revised code

    <style>
    .stats-info.text-sm.mt-1.mb-3 {
        text-align: center;
    }
    </style>
    <div id="stats-pro">
     
    <div class="progress mt-4 stats-bar" style="height: 8px;">
    {{{ each categories }}}
    <div class="progress-bar-github" role="progressbar" style="width: {./totalTopicCount}%;background-color: {./bgColor};" aria-valuemin="0" aria-valuemax="100"></div>
    {{{ end }}}
    </div>
     
    <div class="stats-info text-sm mt-1 mb-3">
    {{{ each categories }}}
    <a href="/category/{./cid}/{./name}"><span class="mb-3 me-2 fw-semibold text-nowrap"><i class="fa fa-fw fa-solid fa-2xs fa-circle" style="color: {./bgColor};font-weight: 900;"></i> {./name}</a><span class="text-xs text-muted">({./totalTopicCount})</span></span>
    {{{ end }}}
    </div>
     
    </div>
    
    
    wrote on last edited by
    #18

    @phenomlab thanks, this will be more helpful.

  • @phenomlab thanks, this will be more helpful.

    wrote on last edited by
    #19

    @crazycells Thought it might 🙂

  • phenomlab phenomlab referenced this topic on
  • the person who sends the last post are usually seen as avatar, however in large screen it is lost, is this intentional?

    Screen Shot 2023-08-10 at 16.19.40.png
    Screen Shot 2023-08-10 at 16.20.06.png

    wrote on last edited by
    #20

    @crazycells said in Theme retirement:

    the person who sends the last post are usually seen as avatar, however in large screen it is lost, is this intentional?

    That was an unintended bug (thanks) which I’ve just fixed. I was using the below CSS to hide images in the teaser view as below

        .meta.teaser img, .meta.teaser blockquote  {
            display: none;
        }
    

    However, this had the undesired effect of removing the user avatar (which I want to keep obviously), so am now using this CSS

        .meta.teaser img:not(.avatar), .meta.teaser blockquote  {
            display: none;
        }
    
  • wrote on last edited by
    #21

    I relented somewhat here and added another swatch - one I missed, which was previous called “blackout”. This specific one has been adapted to work on the new theming engine, but the others have been reclassified, and renamed to suit.

    image.png

    As a result, the theme you might have had will probably be reflecting something else, so you (might) need to change your themes accordingly. The changes are as follows

    Light -> No Change
    Cloudy -> Is now the old “Dim”
    Dim -> Is now the old “Dark”
    Dark -> Now a new theme based on the revamped “Blackout”


Related Topics
  • 14 Votes
    9 Posts
    3k Views
    phenomlab
    @DownPW of course. As I mentioned in the first post, Sudonix isn’t going anywhere. It’ll continue to be free as it always has been.
  • Ch..ch..ch..ch..changes!

    Announcements themes layout
    16
    2
    15 Votes
    16 Posts
    5k Views
    JAC
    @phenomlab of course, to be recognised is fantastic. @phenomlab said in Ch..ch..ch..ch..changes!: Sadly, no. Web crawlers and scrapers are often JS based and read text only, so styles don’t have any bearing. I’ve read mixed things about this, but no that does make sense, it was something I read a many years back when using Wordpress.
  • ANNOUCEMENT: New NTFY Server

    Announcements ntfy push alerts
    9
    1
    7 Votes
    9 Posts
    3k Views
    phenomlab
    @crazycells that’s as good a test as any
  • Swatch / Theme Changer

    Code Respository swatch themes switcher
    8
    8
    3 Votes
    8 Posts
    8k Views
    phenomlab
    @veronikya it might flicker on load, yes, and that’s normal. It’s because the CSS and JS are loaded before the custom elements, but it shouldn’t be too bad on reasonable links. It shouldn’t flicker at all navigating through the site though as the CSS and JS are already loaded.
  • Theming support in Sudonix

    Moved Announcements themes
    41
    5
    61 Votes
    41 Posts
    23k Views
    phenomlab
    @phenomlab said in Theming support in Sudonix: I thought I’d better come by here with an update so everyone knows that the Swatch project isn’t abandoned, or has simply “gone cold”. In fact, quite the opposite. I’ve setup a dev instance on my home network which I’m currently developing against. I’ll put some screenshots up soon, but the Swatch code is currently enjoying a rewrite. The great news is that you’ll get ten times the flexibility you have now meaning greater support for light themes, although the downside is that there isn’t that much backwards compatibility meaning some of my own themes even need to be completely redesigned. However, this isn’t the end of the world. Once you’re familiar with the classes, it really doesn’t take long at all to create your own themes. More to follow. I’ll be putting together a video of what the revamped theme will look like very soon - just got some small issues to iron out, and code cleanup beforehand…
  • NodeBB templates

    Locked Chitchat themes templates nodebb
    12
    4 Votes
    12 Posts
    5k Views
    phenomlab
    Placing this here for reference https://sudonix.com/topic/216/nodebb-js-script-css-theme-switcher Further information and posts can be found at this link
  • Theme changes

    Announcements dark
    6
    10 Votes
    6 Posts
    3k Views
    phenomlab
    There’s still some very minor bugs in the two themes (light and dark) but these will be resolved in the coming days. Some are specific to firefox, and well require special attention, but will still be resolved nonetheless.
  • Fancybox now used for image handling

    Announcements fancybox
    16
    6 Votes
    16 Posts
    6k Views
    dave1904
    And it seems to be less conflicting!