Rebranding / other changes

Announcements
  • Hi All,

    Just a quick update from me concerning some upcoming changes on Sudonix.

    This platform has been running for over 1.5 years, and during this time, has helped hundreds of people overcome issues with technology, or gain access to insightful information to enable them to make informed decisions around their own technology requirements.

    As this platform matures, so does the level of content it provides, and several recent newly created accounts are on the back of information provided to others, so the content is truly invaluable. That said, we need to be mindful of the mission that this platform originally set out to achieve, and I’m happy to share that we’re very much on the right track. As you already know, Sudonix is a completely free platform designed for literally anyone to gain access to a highly experienced, top tier technical consultancy without fear of belittlement, reprimand or retribution.

    There’s no such thing as a stupid question - only one where the original author needs help, and therefore, no questions remain unanswered. In fact, the vast majority are very quickly resolved either by the founder of this site, or other members, who through their own experiences, are able to step in and provide assistance where required.

    So why the changes?

    Well, let’s be 100% transparent on what those changes are. For clarity, this platform will never charge you for anything - there are no “plans”, “subscriptions” or anything along those lines (and you have my assurance that these will never materialise either) - it set out to be, and will always remain, free of charge. As the platform has started to gain traction, it is time we made some small changes to better reflect the service on offer. These are outlined below

    Soon, the domain suffix will change from .com to .org (so, from sudonix.com to sudonix.org). This is completely transparent to all users and you won’t have to change anything. Everything will still work as it did before

    Why is this changing?

    The .com TLD suffix is traditionally tied to “for profit” organisation, which Sudonix is not. Adopting the .org domain TLD conveys the message that this really is not-for-profit and therefore, should open up the playing field to others who may have expressed some level of trepidation in terms of creating an account and asking for help for fear that they may be slapped with some form of levy, or get a ton of junk email in return.

    Back “in the day”, there was a clear demarcation between .com and .org domains, but that has since fallen by the wayside where even profit making organisations can use .org and still charge for services. Admittedly, this does sound counter intuitive given our perspective, but it is a route we intend to take as a means of extending the service to those who previously may have kept their distance for the reasons above. The domain of .org is also applied typically to communities (which is what this is), and therefore, another reason to make this change.

    Will sudonix become a “paid” service

    No. There are no plans for this to ever be implemented as it goes directly against the ethic of the pro-bono / free services we set out to provide.

    One other change we are making is the implementation of a new logo. I know the existing one we have looks “kinda cool”, but it is in fact a Font Awesome icon - see below

    https://fontawesome.com/icons/chart-tree-map?f=classic&s=solid

    Based on this, “kinda cool” also inherently means lack of originality, and more importantly, ownership. I’ve taken the steps of engaging with a professional designer for a new logo. We have one which I have chosen which clearly depicts what is on offer, and that should be arriving on the site in the coming days. This is all at my cost, and will not be passed down to any users. I’ve chosen to have some form of branding as a means of recognition, which will be also be present through the platform.

    I’ll share the logo once it is ready. I think you’ll like it.

    I’m sharing these changes with everyone here as I’m also keen to garner thoughts, recommendations etc. All feedback - good or bad - is important, as this helps to improve on what is already a great product and service.

    Thanks

  • These are very good ideas. Can’t wait to see the new logo because it changed often

  • @DownPW Yes, the logo changed often because I couldn’t settle on what it should look like, and in all honesty, unless you are a designer, you should never attempt these things yourself - otherwise, they look below par and sub standard… 🙂

  • Mark we will never leave alone 🙂

  • Those of you with a keen eye might have noticed that the logo has been changed. If you don’t see this, reload your browser as there are extensive code changes that need to be loaded so that the right image is selected with the right theme (they are colour coordinated).

    Here’s the logo itself when using the default light theme (which is Flatly)

    Drumroll…

    Asset 1.png

    Here’s the logo itself when using the default dark theme (which is Nord)

    nord.png

    As you can see, the logo colours change depending on which theme you are using. This did mean a bit of manual work on my part using Adobe Illustrator - something of a learning curve (and monthly subscription cost 😞 ) I could have used Inkscape, I know, but it’s severely limited and lacks essential functionality, so it’s a non-starter in my view.

    Inspiration

    The inspiration from this logo comes from a variety of sources. Given that most of what we do on here is in code format (one way or the other), it made sense to use that in the logo. The original version had no radiuses, but I wanted a softer look, so here we are 🙂

  • good it’s a very cool logo 🙂

  • I had the same idea today for the color change for PW

  • @DownPW Yes, it is very effective. You’ll spend more time on the images themselves than you will on the code !

    The code to switch per theme is really simple - example below

     $('img[component="brand/logo"]').attr("src", "/assets/customcss/logo/"  + whichTheme + ".svg");
    
  • I had thought of doing it in CSS but why not.

    How does it work?

    – Here is what I understand:

    • put this code in ACP/Custom JS

    • depending on the theme chosen in the swatch, it applies the logo files in SVG format in “/assets/customcss/logo/”

    But the question I ask myself is: is there a particular naming of the logo files?

  • @DownPW you’ll need to create the files first. The code I provided is just for reference and won’t work out of the gate.

    Changing image by CSS is a possibility, but you can’t change an img tag directly which is why I’m using js to do just that. I modified the theme switcher so that it also stores the logo being used.

  • Ok I think I understand.

    Just out of curiosity, the person who made the logo for you, is it expensive?

    Because I don’t know a designer. I manage but it’s not my job.

  • @DownPW not really. It depends on the level of service you want. I can post details if you’d like them?

  • yep, sure. Pm if you prefer

  • The logo looks fantastic!

  • @phenomlab nice logo. I loved it 🙂

  • Pls share with us what kind of CSS and JS code should use for it 🙂 thanks.

  • @cagatay The logo itself? It’s an image.

  • Logo itself its okey but which code i should use to shown it on my website.

  • @cagatay Not sure I follow here - can you elaborate a bit more?

  • What a cool redesign Mark! 👏👏👏👏

    Well done my friend 🍻

  • phenomlabundefined phenomlab referenced this topic on

  • 6 Votes
    4 Posts
    82 Views

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

  • 16 Votes
    12 Posts
    89 Views
  • 2 Votes
    1 Posts
    101 Views

    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

    1981b09d-671d-42c7-89ae-555f30916669-image.png

    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
    https://sudonix.com/topic/256/recent-cards-plugin-customization

    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 🙂

  • 2 Votes
    10 Posts
    341 Views

    @DownPW

    We just have to change the cycles automatically according to each period ?

    Yes, this is by far the safest

    I think it is possible to achieve the goal, I have already seen this kind of thing on a site without any perf problems.

    It’s certainly possible, but not without issues or impact to performance (in my view)

  • 5 Votes
    2 Posts
    167 Views

    Thank you mark @phenomlab for sharing 👏
    And good job for the new logo 🙂

  • 5 Votes
    9 Posts
    1k Views

    @phenomlab

    Very very great Mark 😉
    Thanks again, It’s perfect now !

    –> I share my code that I modified.

    I’ve added French and English comments.
    If you see things to change Mark, don’t hesitate.

    As usual, all the access paths (FA icons, logo) will have to be modified according to your architecture.

    You can also very well add/remove time slots and change welcome messages to suit your needs.

    Widgets ACP/HTML Widget Footer Logo <center> <br><br> <img id="thislogo" src="path/to/my/image"> </center> Widget Welcome Message <!-- IF loggedIn --> <div class="getUsername">, <a href="/me"><span class="username"></span></a></div> <!-- ENDIF loggedIn --> CSS

    – I added the size font-weight: 900; in the CSS because otherwise some FA icon wasn’t displayed correctly and reduce margin :

    i#thisicon { font-family: "Font Awesome 5 Free"; font-style: normal; margin-right: 8px; font-weight: 900; } .getUsername { padding-top: 20px; text-align: right; } /*Smartphone*/ /*On désactive le message de bienvenue"*/ /*We disable the welcome message"*/ @media all and (max-width: 1024px) { .getUsername { display: none; } } JAVASCRIPT // ------------------------------------------ // Welcome Message avec icône et Footer logo // Welcome Message with icon and Footer logo // ------------------------------------------ $(window).on('action:ajaxify.end', function (data) { //On récupère le username dans le DOM et on l'affiche //We retrieve the username from the DOM and display it function updateUsername() { $('.getUsername .username').text(app.user.username); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', updateUsername); } else { updateUsername(); } //On déclare les variables principales (themessage & thehours) ainsi que les variables secondaires correspondants aux plages horaires //We declare the main variables (themessage & thehours) as well as the secondary variables corresponding to the time slots var thehours = new Date().getHours(); var themessage; var wakeup = ('Good day'); var morning = ('Good morning'); var lunch = ('Bon appétit'); var afternoon = ('Good afternoon'); var drink = ('Cheers'); var evening = ('Good evening'); var night = ('Good night'); var welcome = ('Welcome'); var matched = false; //On peux ici tester le résultat du code en spécifiant une heure (!!!IMPORTANT: Commenter une fois le script testé!!!) //Here we can test the result of the code by specifying a time (!!!IMPORTANT: Comment once the script has been tested!!!) //thehours = 20 //On déclare les plages horaires avec les icones FA et les logos //We declare the time slots with FA icons and logos path if (thehours >= 0 && thehours < 6) { themessage = night; theicon = "fa-solid fa-moon"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 6 && thehours < 8) { themessage = wakeup; theicon = "fa-solid fa-mug-hot"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 8 && thehours < 12) { themessage = morning; theicon = "fa-solid fa-sun"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 12 && thehours < 13) { themessage = lunch; theicon = "fas fa-hamburger"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 13 && thehours < 16) { themessage = afternoon; theicon = "fa-solid fa-sun"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 16 && thehours < 18) { themessage = welcome; theicon = "fa-solid fa-rocket"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 18 && thehours < 19) { themessage = drink; theicon = "fa-solid fa-wine-glass"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 19 && thehours < 20) { themessage = lunch; theicon = "fas fa-pizza-slice"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 20 && thehours < 24) { themessage = evening; theicon = "fa-solid fa-tv"; thelogo = "/assets/customlogo/XXX.png"; } // Si la page active est un topic, on désactive/cache le message de bienvenue // If the active page is a topic, we deactivate/hide the welcome message if (window.location.href.indexOf("topic") > -1) { console.log("This is a topic, so hide the user welcome message"); $('#thisuser').hide(); } // Sinon, on affiche le message en fonction, l'icone FA et son emplacement (prepend) // Otherwise, we display the message in function, the FA icon and its location (prepend) else { $('.getUsername').prepend("<i id='thisicon' class='" + theicon + "'></i>" + themessage); $("#thislogo").attr("src", thelogo); //$('.getUsername').prepend("<img id='thisicon' src='" + thelogo + "'></>" + themessage); } });
  • Theme changes

    Announcements
    6
    10 Votes
    6 Posts
    301 Views

    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.