Skip to content

Want to use Sudonix themes ?

Chitchat
80 5 27.3k 1
  • Mark hi
    As you know i m using your theme and codes.
    My users want to biz size avatar, could we do it?

  • Mark hi
    As you know i m using your theme and codes.
    My users want to biz size avatar, could we do it?

    @cagatay can you elaborate? Not sure what you’re referring to.

  • size of avatar we can do it big one?

    image.png

  • size of avatar we can do it big one?

    image.png

    @cagatay yes, that should be fairly simple to do, but what size? There may also be an impact to adjacent elements so I’d need an idea of the size you are looking for.

  • twice what it is now

  • twice what it is now

    @cagatay that’s probably on for desktop, but might look out of place when viewed on a mobile device.

  • could you do for mobile also?

  • 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

  • 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

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

  • @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;
    }

  • 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;
    }
    
  • 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

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

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


Related Topics
  • What’s going on with NodeBB?

    Performance nodebb script die
    20
    8 Votes
    20 Posts
    4k Views
    @cagatay The most reliable way to upgrade Node.js on Ubuntu depends on how you originally installed it. Method 1: Using NVM (Recommended) If you already use Node Version Manager (NVM), upgrading is simple. NVM allows you to keep both versions and switch between them if needed. Install Node 22: nvm install 22 Switch to Node 22: nvm use 22 Set it as your default: nvm alias default 22 Verify the change: node -v Method 2: Using NodeSource (PPA) If you installed Node.js via apt using the NodeSource repository, you need to update the repository script to point to the new version. Remove the old NodeSource list (optional but cleaner): sudo rm /etc/apt/sources.list.d/nodesource.list Download and run the NodeSource setup script for Node 22: curl -fsSL [https://deb.nodesource.com/setup_22.x](https://deb.nodesource.com/setup_22.x) | sudo -E bash - Install/Upgrade Node.js: sudo apt-get install -y nodejs Verify the installation: node -v Method 3: Using the ‘n’ Package If you have npm installed, you can use the n interactive manager. Clear the npm cache: sudo npm cache clean -f Install the ‘n’ helper: sudo npm install -g n Install Node 22: sudo n 22 Update your shell: hash -r Troubleshooting Permission Denied: If you see permission errors using Method 2 or 3, ensure you are using sudo. Path Issues: If node -v still shows version 20 after upgrading via NVM, restart your terminal or run source ~/.bashrc. Conflicts: Avoid mixing these methods. If you switch from apt to nvm, it is best to sudo apt remove nodejs first to avoid path conflicts.
  • 3 Votes
    1 Posts
    973 Views
    No one has replied
  • Who uses Flarum?

    Chitchat flarum forum
    22
    7 Votes
    22 Posts
    7k Views
    @Madchatthew I use it here. It is faster, but not sure if that extends to build times.
  • Opening links in nodebb widget

    Solved Configure nodebb
    6
    4 Votes
    6 Posts
    3k Views
    A more efficient way of including this would be to not over complicate it and leverage a standard iframe (providing the CSP headers of the remote site permit this) like below <iframe src="https://www.classmarker.com/online-test/start/?quiz=gag66aea7922f0a5" width="700" height="800"></iframe> This works first time every time on your site as intended.
  • how to prevent DDoS attacks ?

    Solved Vulnerability ddos nodebb
    34
    17 Votes
    34 Posts
    12k Views
    @phenomlab thank you very much, this was helpful. Everything looks ok
  • Theme retirement

    Announcements themes switcher
    21
    16 Votes
    21 Posts
    8k Views
    I relented somewhat here and added another swatch - one I missed, which was previous called “blackout”. This specific one has been adapted to work on the new theming engine, but the others have been reclassified, and renamed to suit. [image: 1693924764891-d7f3a7a1-9702-4238-99bd-5c0e0d53f244-image.png] As a result, the theme you might have had will probably be reflecting something else, so you (might) need to change your themes accordingly. The changes are as follows Light -> No Change Cloudy -> Is now the old “Dim” Dim -> Is now the old “Dark” Dark -> Now a new theme based on the revamped “Blackout”
  • Where are widgets stored?

    Solved Configure nodebb
    3
    1 Votes
    3 Posts
    1k Views
    @phenomlab Thanks, have DMed you
  • [NodeBB] Import custom Font

    Solved Customisation custom fonts nodebb css
    12
    3 Votes
    12 Posts
    4k 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.