Skip to content

Rotating homepage icons, gifs?

Solved Configure
  • On this page, I like the way the coloured Sudonix wheel rotates when you click on it !
    Is this a gif file?
    In my nodebb forum can I just upload a gif into the settings for forum logo to get a similar effect?

  • @eveh It’s not a GIF, no. It’s actually a webp file so made much smaller, and uses keyframes to control the rotation on hover. You can easily make your own though 🙂

    The CSS for that is as below

        @keyframes rotate180 {
            from {
              transform: rotate(0deg);
            }
           
            to {
              transform: rotate(180deg);
            }
          }
           
          @keyframes rotate0 {
            from {
              transform: rotate(180deg);
            }
           
            to {
              transform: rotate(0deg);
            }
          }
    

    Your milage may vary on the CSS below, as it’s custom for Sudonix, but this is the class that is used to control the rotate

    .header .forum-logo,
    img.forum-logo.head {
        max-height: 50px;
        width: auto;
        height: 30px;
        margin-top: 9px;
        max-width: 150px;
        min-width: 32px;
        display: inline-block;
        animation-name: rotate180, rotate0;
        animation-duration: 1000ms;
        animation-delay: 0s, 1000ms;
        animation-iteration-count: 1;
        animation-timing-function: linear;
        transition: transform 1000ms ease-in-out;
    }
    
  • phenomlabundefined phenomlab has marked this topic as solved on

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

  • 2 Votes
    18 Posts
    500 Views

    @Panda You’ll need to do that with js. With some quick CSS changes, it looks like this

    d619844f-fbfe-4cf1-a283-6b7364f6bf18-image.png

    The colour choice is still really hard on the eye, but at least you can now read the text

  • Nodebb design

    Solved General
    2
    1 Votes
    2 Posts
    153 Views

    @Panda said in Nodebb design:

    One negative is not being so good for SEO as more Server side rendered forums, if web crawlers dont run the JS to read the forum.

    From recollection, Google and Bing have the capability to read and process JS, although it’s not in the same manner as a physical person will consume content on a page. It will be seen as plain text, but will be indexed. However, it’s important to note that Yandex and Baidu will not render JS, although seeing as Google has a 90% share of the content available on the web in terms of indexing, this isn’t something you’ll likely lose sleep over.

    @Panda said in Nodebb design:

    The “write api” is preferred for server-to-server interactions.

    This is mostly based around overall security - you won’t typically want a client machine changing database elements or altering data. This is why you have “client-side” which could be DOM manipulation etc, and “server-side” which performs more complex operations as it can communicate directly with the database whereas the client cannot (and if it can, then you have a serious security flaw). Reading from the API is perfectly acceptable on the client-side, but not being able to write.

    A paradigm here would be something like SNMP. This protocol exists as a UDP (UDP is very efficient, as it is “fire and forget” and does not wait for a response like TCP does) based service which reads performance data from a remote source, thus enabling an application to parse that data for use in a monitoring application. In all cases, SNMP access should be “RO” (Read Only) and not RW (Read Write). It is completely feasible to assume complete control over a firewall for example by having RW access to SNMP and then exposing it to the entire internet with a weak passphrase.

    You wouldn’t do it (at least, I hope you wouldn’t) and the same ethic applies to server-side rendering and the execution of commands.

  • Composer Zen icon?

    Solved Configure
    8
    2 Votes
    8 Posts
    224 Views

    @DownPW exactly. Not really a new concept, and in all honesty, not something I’ve ever used.

    If you consider the need to add links and references, or citations, you’d need to be able to see other parts of the screen!

  • 3 Votes
    11 Posts
    710 Views

    @cagatay no problems

  • 0 Votes
    15 Posts
    692 Views

    @DownPW That was going to be my next suggestion 🙂

  • 13 Votes
    21 Posts
    2k Views

    @pobojmoks that’s easily done by modifying the code provided here so that it targets background rather than border

    In essence, the below should work

    $(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", "background-color: " + color); }); }); });
  • [NodeBB] username cards

    Solved Customisation
    8
    5 Votes
    8 Posts
    830 Views

    @phenomlab

    Aha…nice to know. As always thank you for the reply and information.

  • 1 Votes
    6 Posts
    978 Views

    @jac said in [NodeBB] custom Gravatar image not showing:

    @phenomlab said in [NodeBB] custom Gravatar image not showing:

    @jac are you using Custom ?

    Sure am mate 👍🏻

    Confirmed Fixed