Skip to content

Want to use Sudonix themes ?

Chitchat
  • could you do for mobile also?

  • @cagatay yes, but I’d reiterate the concerns I’ve raised above in the sense that it may impact the flow of other elements.

    Essentially, this is fm going to be a relatively simple CSS change.

  • Mark hi,
    after upgrading 3.9 i have some problems with my web site.
    Pls see below photos of my problems;

    image.png

    Also recent post and topics options i dont see my header

    image.png

  • @cagatay This will be because of the below changes

    https://community.nodebb.org/topic/18292/nodebb-3.9.0

    It’s related to the brand header section here

    <button type="button" class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown"
    

    It needs to be changed to

    <button type="button" class="btn btn-ghost btn-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown"
    

    I’ve made this change on your site, but you’ll also need some additional CSS. This ought to do it, and it’s been also applied to your forum.

    .btn-ghost {
        --bs-btn-hover-border-color: var(--bs-body-navbar-active);
        --bs-btn-active-bg: var(--bs-body-navbar-active);
    }
    
  • Of course, I am the same problem I have change the css class button on widget brand Header

    except that I had an offset present on the brand header.

    I did the same manipulations but I cannot remove this shift that we see on the screen.

    Any idea how to remove this @phenomlab ?

    Before :
    daed0cbc-7791-44eb-a1c1-28e4168051e4-image.png

    After upgrade :

    1d3ffc95-51eb-43f6-beef-df34161af0da-image.png

  • @DownPW Is this on your live site, or development? I cannot see any issue?

    EDIT - I see it on your DEV site. Not sure where the additional padding is coming from to be honest, but one quick “fix” would be to target this CSS

    [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled)
    

    And use this

    [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
        cursor: pointer;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
    

    I think you may have added

    button.btn.btn-ghost.btn-sm.d-flex.gap-2 {
        padding-top: 0.8rem;
    }
    

    Although this isn’t very elegant as padding will in fact make the button much larger.

  • yep in dev, always for test before upgrade prod 😉

    @phenomlab said in Want to use Sudonix themes ?:

    I think you may have added

    button.btn.btn-ghost.btn-sm.d-flex.gap-2 {
    padding-top: 0.8rem;
    }

    Yep you’re right my friends.

    But your method seems better :

    [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
        cursor: pointer;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
    

    Thanks

    EDIT : ha noooo your code broke the “Answer” Button

    96be1a13-ad61-4065-b02d-4ef2b4a85b0c-image.png

    keep for now this code

    button.btn.btn-ghost.btn-sm.d-flex.gap-2 {
    padding-top: 0.8rem;
    }

  • @DownPW that’s because it’s targeting the button type. Just change the post button class.

  • hmm sorry don’t understand

    Edit :

    like this maybe ?

    .btn.btn-ghost.btn-sm:not(:disabled) {
        cursor: pointer;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
  • @DownPW Yes, that will work fine. What I meant was that the original CSS I provided targets [type=button] so would impact all others on the page in addition to the intended target.

  • @phenomlab i have some problems with my below items when selected this type of tree;

    image.png

  • @cagatay In your CSS, locate the block starting

    .category-card .text-muted.timeago
    

    And remove

    margin-left: -180px;
    
  • Mark hi,

    I know that you also update your own css and js along with nodebb’s updates but mine is old one when we first set it up.

    I would like to your help to use your current css and js codes if its possible?

    Thank you for your helping.

  • @cagatay

    @cagatay said in Want to use Sudonix themes ?:

    I know that you also update your own css and js along with nodebb’s updates

    I do update the CSS and JS here, but it’s not in line with NodeBB releases. All of the code I have written will work with prior releases, with the exception of Chat Threading, which requires a specific hook not present in some early versions. Again, this would still work, but not at full capacity.

    @cagatay said in Want to use Sudonix themes ?:

    mine is old one when we first set it up

    It’s not “old” - it just isn’t the latest code. In fact, the code running on your website is not advertised anywhere else, so in fact, is newer than the Git links in this post.

    @cagatay said in Want to use Sudonix themes ?:

    I would like to your help to use your current css and js codes if its possible?

    Possible, yes, but not yet. There are still some bugs in the code branch I’m using here, and I don’t want to introduce complexities into your installation - particularly when I know they exist, and you’d be left with issues that your users then have to put up with.

  • thank you for your advise Mark.
    may i use your font ? what i have to do for it?

  • @cagatay you are already using it.

  • i have many minor problems shown below photo, how can i fix it?
    Chrome is moving towards a new experience that lets people make an informed choice with respect to third-party cookies.

    image.png

  • @cagatay This isn’t related to NodeBB, but how the Chrome browser itself behaves - see below

    Yes, Google Chrome is shifting towards a more privacy-focused approach, particularly in how it handles third-party cookies. This change is part of a broader industry trend towards improving user privacy and transparency, as seen in regulations like the General Data Protection Regulation (GDPR) and the California Consumer Privacy Act (CCPA).

    Key elements of Chrome’s new approach include:

    • Phasing out third-party cookies: Chrome has been working on a plan to phase out third-party cookies entirely, which are often used by advertisers and trackers to follow users across websites. This is part of Google’s Privacy Sandbox initiative.

    • User control and transparency: Chrome will provide users with more detailed options and controls over how third-party cookies are used. This will allow users to make an informed decision about which cookies they want to allow or block, helping them better understand how their data is being used.

    • Privacy Sandbox: Instead of third-party cookies, Google is introducing alternatives, like FLoC (Federated Learning of Cohorts), which aims to deliver relevant ads without exposing individual users’ browsing history to advertisers. FLoC is part of Privacy Sandbox, which focuses on creating new privacy-preserving mechanisms for digital advertising.

    • Better Consent Experiences: Chrome is also expected to improve how websites prompt users to give consent for cookies, reducing “cookie fatigue” and making the process more straightforward.

    This new experience is expected to improve user privacy without entirely disrupting the ad-supported web ecosystem, which depends heavily on tracking technologies.

  • This situation does not affect google indexing, does it?

  • @cagatay Not to my knowledge.


Related Topics
  • Who uses Flarum?

    Chitchat
    22
    7 Votes
    22 Posts
    294 Views

    @Madchatthew I use it here. It is faster, but not sure if that extends to build times.

  • Nodebb design

    Solved General
    2
    1 Votes
    2 Posts
    282 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.

  • Unable to change icon in NodeBB navigation

    Tips
    1
    1 Votes
    1 Posts
    208 Views
    No one has replied
  • NodeBB v3 Chat Very Slow

    Moved Performance
    47
    11 Votes
    47 Posts
    4k Views

    @DownPW Seems fine.

  • Rotating homepage icons, gifs?

    Solved Configure
    2
    3 Votes
    2 Posts
    237 Views

    @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; }
  • Adding fileWrite to nodebb code

    Solved Configure
    16
    5 Votes
    16 Posts
    773 Views

    @eveh this might be a question for the NodeBB Devs themselves. In all honesty, I’m not entirely sure without having to research this myself.

  • CSS codes for fa-info icon

    Solved Customisation
    9
    6 Votes
    9 Posts
    636 Views

    I have just figured it out…

    it can be targeted with text-decoration-color:

    I was mistakenly using color

  • [NodeBB] Import custom Font

    Solved Customisation
    12
    3 Votes
    12 Posts
    1k Views

    @cagatay you’ll need to define this in the body tag (or another element if you want greater or more granular targets) - for example

    body { font-family: "Poppins"; font-size: 16px; }

    Essentially, you use the font-size CSS directive.