IMPORTANT: Theme / Swatch changes

  • Less really is more - @crazycells , I have to agree 🙂

    See the post below for more detail around the decision

    I’ve spent a LOT of time completely redesigning the theme interface so that it matches modern standards, and colours. Based on this, there are several changes under the bonnet which you won’t be able to see or access unless you clear your cache.

    I will make every effort to automate as much as possible on this platform, but of course, I have zero control over your browser cache, so you will need to that manually.

    What’s changed?

    I’ve made the entire forum “Material Design” themed. Whilst I’m not necessarily a Google fan, I do very much like the way the UI is put together, and it’s a familiar concept that just about everyone with a mobile phone and internet connection has encountered at some point (probably every day actually)

    Did you dump Bootstrap?

    Ha - no. Bootstrap is a major component of this platform, and it would look pretty odd without it. In a similar vein, jQuery is also very much still present, and required for the custom functions I’ve written to run.

    How many themes are there now?

    There are now 3 - down from 15. These are now light, dim, and dark. Not very imaginative, but simple solutions are always best.

    What do they look like?

    Below are examples







    Can I still use “x” theme?

    You can, but these are not directly compatible with the new theming system, and therefore, you will get very undesirable results unless you clear your cache and choose one of the new selections. I also will not be back porting these themes to make them work - they are now considered legacy

    Any new features?

    Kind of. I added components as I went, meaning that there are some obvious changes, and some you’ll never notice. The new themes make use of accents such as the below, and future updates (coming soon) will provide enhancements in this same area


    Did you design the themes yourself?

    Yes - and no. MD is a very mature standard, and therefore, there are a good number of colours natively available. However, not all that glitters is gold, so some modifications were necessary to enhance readability etc.

    Can you share the resources you used for inspiration?

    Of course 🙂 See below

    Material Design

    Material Design

    GUI Challenges

    GUI Challenges - Git Demos

    There are more - you literally just need to search for them. These are not direct “copies”, but merely for me take inspiration and create something special / sexy / unique (delete as applicable).

    Hope you like these new themes. Over the coming weeks (as was always the long term plan), I will be using the Material theme Accents to define category colours so they make sense, and do not look “garish” against the new themes.


  • good work Mark as always do your best.

  • Mark we should do anything also to get these changes?

  • @cagatay these changes aren’t published anywhere presently, so nothing for you to do.

  • 3 Votes
    8 Posts

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

  • 33 Votes
    42 Posts

    @crazycells said in Rebranding / other changes:

    thanks for the info you gave, I need to transfer this info to our dev team

    No problems - let me know if you need any other info.

  • 12 Votes
    9 Posts

    Such a pleasant surprise, thank you for all you do.I’m trying to deploy it to my site now!

  • 0 Votes
    2 Posts

    @mventures the swatch feature you refer to isn’t a NodeBB plugin, but a utility that I wrote that handles this. It is available for v2 (as you can see here) but I’ve stopped developing and releasing the code because it has been entirely rewritten to work for v3.

    If you’d like the code, this is possible, but you’ll need to upgrade to v3 first.

  • 2 Votes
    1 Posts

    I wanted a way to draw attention to the recent cards on the categories page to make them stand out more - and what better way to do this than with some CSS. Here’s a short video of the outcome of that very exercise. Watch the recent cards closely as I cycle through the themes.

    There’s a gradient being set there which is essentially two of the core colours in each theme.

    For example, in swatch “Anthracite”, it’s easy to see how this effect works


    Essentially, we are setting the border-color and color variables to match the color set by the category itself. Essentially, this is an extension of this thread

    The minor change here is just one line

    $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { $('.recent-card-container').each(function(i) { var dataId = $(this).attr("data-cid"); var color = $('[role="presentation"]', this).css("background-color"); //console.log("data-cid " + dataId + " is " + color); $('[data-cid="' + dataId + '"] .recent-card').attr("style", "border-color: " + color); $('[data-cid="' + dataId + '"] .recent-card h4 a').attr("style", "color: " + color); }); }); });

    The line in question is

    $('[data-cid="' + dataId + '"] .recent-card h4 a').attr("style", "color: " + color);

    By adding this line, we change both the border color, and the text color to match. I also chose to thicken the border by 1px to give it a bit more depth, which works very well. I did consider a box-shadow but I think that may look somewhat “overdone” and odd when coupled with other elements. The jury is still out on that one 🙂

  • 4 Votes
    8 Posts

    @Sampo2910 Here’s a demo of it from their blog


  • 61 Votes
    41 Posts

    @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…

  • 4 Votes
    12 Posts

    Placing this here for reference

    Further information and posts can be found at this link