Skip to content

Want to use Sudonix themes ?

Chitchat
80 5 23.8k 1
  • 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.

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

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

    @cagatay you are already using it.


Related Topics
  • Who uses Flarum?

    Chitchat flarum forum
    22
    7 Votes
    22 Posts
    6k Views
    @Madchatthew I use it here. It is faster, but not sure if that extends to build times.
  • Page control arrows for PWA

    Solved Customisation nodebb
    27
    25 Votes
    27 Posts
    12k Views
    @crazycells it is, yes - I think I’ll leave it as there is no specific PWA CSS classes I know of. Well, you could use something like the below, but this means multiple CSS files for different operating systems. /** * Determine the mobile operating system. * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'. * * @returns {String} */ function getMobileOperatingSystem() { var userAgent = navigator.userAgent || navigator.vendor || window.opera; // Windows Phone must come first because its UA also contains "Android" if (/windows phone/i.test(userAgent)) { return "Windows Phone"; } if (/android/i.test(userAgent)) { return "Android"; } if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { return "iOS"; } return "unknown"; // return “Android” - one should either handle the unknown or fallback to a specific platform, let’s say Android } Once you’re in that rabbit hole, it’s impossible to get out of it.
  • NodeBB: updating Admin details not working

    Solved Configure nodebb admin
    17
    3 Votes
    17 Posts
    4k Views
    @mventures Ok. No issues
  • Title on homepage of nodebb forum

    Solved Customisation nodebb
    2
    1 Votes
    2 Posts
    2k Views
    @eveh Welcome board The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; } Note, that you will need to adjust your CSS code to suit your own site / requirements.
  • Plugin reaction Bug

    Solved Customisation plugin nodebb reaction
    15
    1
    0 Votes
    15 Posts
    4k Views
    @DownPW That was going to be my next suggestion
  • Blinking text Effect

    Customisation nodebb text effect css
    3
    5 Votes
    3 Posts
    1k Views
    @phenomlab I love it too @phenomlab said in Blinking text Effect: Has that “broken neon light” look that you see in films. It’s exactly that, kind of old neon signs of bar or pubs a bit cyberpunk too
  • Theming support in Sudonix

    Moved Announcements themes
    41
    5
    61 Votes
    41 Posts
    18k Views
    @phenomlab said in Theming support in Sudonix: I thought I’d better come by here with an update so everyone knows that the Swatch project isn’t abandoned, or has simply “gone cold”. In fact, quite the opposite. I’ve setup a dev instance on my home network which I’m currently developing against. I’ll put some screenshots up soon, but the Swatch code is currently enjoying a rewrite. The great news is that you’ll get ten times the flexibility you have now meaning greater support for light themes, although the downside is that there isn’t that much backwards compatibility meaning some of my own themes even need to be completely redesigned. However, this isn’t the end of the world. Once you’re familiar with the classes, it really doesn’t take long at all to create your own themes. More to follow. I’ll be putting together a video of what the revamped theme will look like very soon - just got some small issues to iron out, and code cleanup beforehand…
  • NodeBB Discord Plugins

    Unsolved Customisation nodebb discord plugin
    7
    0 Votes
    7 Posts
    3k Views
    @RiekMedia hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?