Skip to content

Rebranding / other changes

Announcements
42 7 6.8k 2
  • I had the same idea today for the color change for PW

  • 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?

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

  • 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!

  • 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 🙂

    @phenomlab nice logo. I loved it 🙂

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

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

  • 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
  • Some further re-branding changes have been made in the about page - not sure if anyone has ever actually read this, but it does explain the mission well

    https://sudonix.org/about

  • good Mr.
    I would like to know how you make static pages like that. It’s very nice

  • good Mr.
    I would like to know how you make static pages like that. It’s very nice

    @DownPW it’s just standard html 🙂

  • yep but you use a plugin to do it or make HTLML file manually ? Where put you the file etc…

  • yep but you use a plugin to do it or make HTLML file manually ? Where put you the file etc…

    @DownPW I write all HTML manually. It’s inserted into page widgets created by nodebb-custom-pages

  • Ok, this might cause some bemusement and confusion, so apologies in advance. I’ve decided to change the logo again.

    Why?

    The answer here is relatively simple. It’s mostly because the more time wore on, the more I hated it’s overall look and feel. To me, it looked “cheap” and put together quickly without much consideration for the overall statement and services that this site offers.

    Sure, it’s consistent with development, writing code, etc, but Sudonix has become so much more than just a support site for NodeBB. Admittedly, it’s still very much the main content of this site as it has never forgotten it’s roots, but I have ambition beyond NodeBB itself as the main topic focus. If you look at the services page, you’ll understand what I mean.

    5bdf04cc-c6f5-45de-833f-9e8455b8d744-image.png

    You can very easily see the justification here, and also notice that “Development” is only a portion of what Sudonix offers.

    So, without any further interruptions, here’s the new logo

    86aed9e7-f9a0-4719-855d-d1d7e89b9bd8-image.png

    Great, but what does it represent?

    Good question. If you look, it’s simple once you understand. The round circle in the middle is you - the user of this service. The lines around (which look very Japanese, but it wasn’t intended) is a wrapper around you - meaning that all the services and facilities here are designed for, and accessible to you - effectively, you should be able to find everything you want here, and more. Someone else made the comment about a strange sort of Turkish Eye, but it’s not 🙂

    Ultimately, it’s a symbol of “community”. Somewhere we can all co-exist and learn from each other.

    The “complete” version of the logo, which incorporates text etc is below

    e9781336-05ae-435c-9fce-5a5d02866f0c-image.png

    Now, I personally think that looks “hot” (probably the orange colour…) - I might be wrong here, but it looks catchy (and not cheap). You’ll also notice the intentional division of the words “SUDO” and “NIX” - it’s always been pronounced soo-don-ix and that won’t change, but SUDO and NIX both have special meaning in the IT world as you probably know.

    This is the logo, and it’s not going to change 🙂 I also own the copyright for it, so it is protected at least where the jurisdiction extends to.

    If you’d like to know where I got this logo from, it’s below.

    https://looka.com/

    The platform uses AI to generate suggestions for your logo. It’s not necessarily “cheap”, but not expensive either in my view, and you can amend it as many times as you like. The only thing I didn’t like was the lack of Google Fonts, so I used the .eps file and made my own version using the fonts I wanted rather than those I was forced to use.

    I’d love to get feedback on the new logo!


Related Topics
  • 4 Votes
    7 Posts
    2k Views
    @DownPW said in "Glass" (shine) effect on Sudonix logo: Perfect with White background theme but much less with black themes backgrounds (we see the edges of the shine effect) Yes, you will need to modify the CSS according. For example, on Sudonix, I use --bs-node-shine: linear-gradient(90deg, rgba(28, 38, 44, 0) 0%, rgba(74, 100, 116, 0.5) 50%, rgba(28, 38, 44, 0) 100%); Essentially, you choose the base background, the shine colour, and then the base background again.
  • Ch..ch..ch..ch..changes!

    Announcements themes layout
    16
    2
    15 Votes
    16 Posts
    2k Views
    @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.
  • ANNOUNCEMENT: Social Login Changes

    Announcements openid oauth
    4
    1
    6 Votes
    4 Posts
    1k Views
    @DownPW Always looking for ways to improve the overall experience.
  • IMPORTANT: Theme / Swatch changes

    Announcements swatch themes
    4
    4
    6 Votes
    4 Posts
    1k Views
    @cagatay these changes aren’t published anywhere presently, so nothing for you to do.
  • Website and mail branding failures

    Blog branding email domain
    12
    16 Votes
    12 Posts
    2k Views
    @phenomlab
  • 36 Votes
    55 Posts
    12k Views
    @DownPW I see why. The code relies on the existence of [component="topic/quickreply/container"] However, this by definition means that the below has to be enabled [image: 1679077966615-aeef638f-4188-489d-a9f2-f3a26dbca9d8-image.png] It will then work [image: 1679077992245-7fb38631-e0f3-46ef-b652-00929d927b13-image.png] For some unknown reason, this is hidden in Harmony, and only shows if you select it. In v2, it seems that the <section> is deleted altogether in Persona if “Quick Reply” is disabled, meaning it won’t fire as it can’t locate that specific component. The downside is that you might not want the quick reply function, but I think it’s a PITA to scroll up to the top of the post just to reply, so I have it on
  • 2 Votes
    10 Posts
    2k 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)
  • Theme changes

    Announcements dark
    6
    10 Votes
    6 Posts
    1k 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.