Skip to content

NodeBB v3 and Harmony Theme

Discussion
22 4 7.1k 1
  • Just looking through my code here, and provided that Persona as a NodeBB theme continues to be maintained, then the conversion of my code to v3 is a relatively simple affair meaning I could continue with my Swatch code without too much effort.

    Essentially, the move from v2 to v3 is basically the migration of bootstrap from v3 to v5. I suppose much of this depends on the future of Persona…

    EDIT - I’ll just leave this here
    https://community.nodebb.org/topic/16908/january-2023-developer-update/15?_=1673947070798

  • Just looking through my code here, and provided that Persona as a NodeBB theme continues to be maintained, then the conversion of my code to v3 is a relatively simple affair meaning I could continue with my Swatch code without too much effort.

    Essentially, the move from v2 to v3 is basically the migration of bootstrap from v3 to v5. I suppose much of this depends on the future of Persona…

    EDIT - I’ll just leave this here
    https://community.nodebb.org/topic/16908/january-2023-developer-update/15?_=1673947070798

    @phenomlab said in NodeBB v3 and Harmony Theme:

    Just looking through my code here, and provided that Persona as a NodeBB theme continues to be maintained, then the conversion of my code to v3 is a relatively simple affair meaning I could continue with my Swatch code without too much effort.
    Essentially, the move from v2 to v3 is basically the migration of bootstrap from v3 to v5. I suppose much of this depends on the future of Persona…
    EDIT - I’ll just leave this here

    Do you think I could go through your swatch rather than the one I have?

    Because I don’t believe you released your code here. Whether ?

    Either way, I know I’ll have to start all over again in these 2 cases

  • @phenomlab said in NodeBB v3 and Harmony Theme:

    Just looking through my code here, and provided that Persona as a NodeBB theme continues to be maintained, then the conversion of my code to v3 is a relatively simple affair meaning I could continue with my Swatch code without too much effort.
    Essentially, the move from v2 to v3 is basically the migration of bootstrap from v3 to v5. I suppose much of this depends on the future of Persona…
    EDIT - I’ll just leave this here

    Do you think I could go through your swatch rather than the one I have?

    Because I don’t believe you released your code here. Whether ?

    Either way, I know I’ll have to start all over again in these 2 cases

    @DownPW Yes, of course. However, because of the change of elements, I have to re-write most of it. In addition, only one theme will be supported - either Persona, or Harmony. If we go the Harmony route (which is highly likely) then virtually all of the swatch needs to be re-written including LESS etc.

    I don’t want to support more than one theme and would ideally stick to Harmony.

  • @DownPW Yes, of course. However, because of the change of elements, I have to re-write most of it. In addition, only one theme will be supported - either Persona, or Harmony. If we go the Harmony route (which is highly likely) then virtually all of the swatch needs to be re-written including LESS etc.

    I don’t want to support more than one theme and would ideally stick to Harmony.

    @phenomlab said in NodeBB v3 and Harmony Theme:

    Yes, of course. However, because of the change of elements, I have to re-write most of it. In addition, only one theme will be supported - either Persona, or Harmony. If we go the Harmony route (which is highly likely) then virtually all of the swatch needs to be re-written including LESS etc.
    I don’t want to support more than one theme and would ideally stick to Harmony.

    Yes indeed, we have to focus on one main theme and not two. (Persona or Harmony)

    I don’t yet have the opinions of the other members of my team but since it’s I who will then develop the themes compatible with Harmony, I think that we will go towards the road of Harmony

    If you are ready to share your codes once finished and explain how to use it, it’s really a good thing and I already thank you in advance 😉

  • @phenomlab said in NodeBB v3 and Harmony Theme:

    Yes, of course. However, because of the change of elements, I have to re-write most of it. In addition, only one theme will be supported - either Persona, or Harmony. If we go the Harmony route (which is highly likely) then virtually all of the swatch needs to be re-written including LESS etc.
    I don’t want to support more than one theme and would ideally stick to Harmony.

    Yes indeed, we have to focus on one main theme and not two. (Persona or Harmony)

    I don’t yet have the opinions of the other members of my team but since it’s I who will then develop the themes compatible with Harmony, I think that we will go towards the road of Harmony

    If you are ready to share your codes once finished and explain how to use it, it’s really a good thing and I already thank you in advance 😉

    @DownPW said in NodeBB v3 and Harmony Theme:

    If you are ready to share your codes once finished and explain how to use it, it’s really a good thing and I already thank you in advance

    More than happy to do so. In fact, BS5 makes it so much easier as LESS variables are being used, which we simply target and change. Far LESS (pun intended) work !

  • @phenomlab said in NodeBB v3 and Harmony Theme:

    Yes, of course. However, because of the change of elements, I have to re-write most of it. In addition, only one theme will be supported - either Persona, or Harmony. If we go the Harmony route (which is highly likely) then virtually all of the swatch needs to be re-written including LESS etc.
    I don’t want to support more than one theme and would ideally stick to Harmony.

    Yes indeed, we have to focus on one main theme and not two. (Persona or Harmony)

    I don’t yet have the opinions of the other members of my team but since it’s I who will then develop the themes compatible with Harmony, I think that we will go towards the road of Harmony

    If you are ready to share your codes once finished and explain how to use it, it’s really a good thing and I already thank you in advance 😉

    @DownPW I’ve started development work on Harmony in v3 and should have some beta code for you to test soon. Stay tuned!

  • @DownPW I’ve started development work on Harmony in v3 and should have some beta code for you to test soon. Stay tuned!

    @phenomlab Oh yeah very good news 😉

  • phenomlabundefined phenomlab forked this topic on
  • hello mark

    here is my tutorial for install V3.00 but it’s for alpha3.0 like you see in command.

    cd /path/to/your/nodebb
    git rev-parse HEAD  # save this value in case you need to roll back  
    git fetch && git checkout bootstrap5
    git reset --hard v3.0.0-alpha.3
    npm config set legacy-peer-deps true
    ./nodebb upgrade -mi
    ./nodebb build
    ./nodebb start
    

    – My questions :

    • How to know the name of the last version for V3 for install it (here is alpha.3) and adapt cli command above ?

    • How to upgrade the dev environment ? I know when Harmony it’s upgrade, we must upgrade boottrap 5

    – Here the command to upgrade bootstrap5 :

    git fetch && git checkout bootstrap5
    

    Many thanks

  • hello mark

    here is my tutorial for install V3.00 but it’s for alpha3.0 like you see in command.

    cd /path/to/your/nodebb
    git rev-parse HEAD  # save this value in case you need to roll back  
    git fetch && git checkout bootstrap5
    git reset --hard v3.0.0-alpha.3
    npm config set legacy-peer-deps true
    ./nodebb upgrade -mi
    ./nodebb build
    ./nodebb start
    

    – My questions :

    • How to know the name of the last version for V3 for install it (here is alpha.3) and adapt cli command above ?

    • How to upgrade the dev environment ? I know when Harmony it’s upgrade, we must upgrade boottrap 5

    – Here the command to upgrade bootstrap5 :

    git fetch && git checkout bootstrap5
    

    Many thanks

  • Been playing with the user profile page this afternoon. Thought I’d post a video as I’m really pleased with how this came out


Related Topics
  • 4 Votes
    7 Posts
    2k Views
    @phenomlab oh no, that is 1 cent on the video, but you are right, symbols are similar… I just converted it to $1 , since it is more intuitive in daily life…
  • NodeBB: Creating pages

    Solved Configure nodebb create page
    9
    0 Votes
    9 Posts
    2k Views
    OK, I think I have figured out how to place a link in the footer which will click to a new page.
  • 1 Votes
    5 Posts
    2k Views
    @DownPW very useful tip. Thanks
  • Podcast Share NodeBB

    Solved Configure podcast nodebb
    15
    4 Votes
    15 Posts
    3k Views
    @cagatay You could experiment with nodebb-plugin-ns-embed but I expect the x-origin tag on the remote site to prevent playback.
  • Detect if user is admin

    General nodebb javascript code
    2
    0 Votes
    2 Posts
    1k Views
    @pwsincd I think you can use userData.isAdmin = isAdmin; if I’m not mistaken - see https://community.nodebb.org/topic/15128/how-to-hide-whitelist-user-field-only-to-owner-or-admin?_=1648802303112 for an example
  • Dark Theme Upper Padding

    Solved Customisation nodebb
    7
    1
    6 Votes
    7 Posts
    2k Views
    @DownPW great! thanks a lot… this code solves my problem.
  • [NODEBB] Help for my custom CSS

    Solved Customisation nodebb css bugfix
    237
    49 Votes
    237 Posts
    98k Views
    @baris said: You should change your selectors so it doesn’t look at the entire document. You probably only want to apply fancybox to stuff inside the #content element which is what changes when the user navigates around the page. So use $('#content a').... for your selectors then the forum logo in the header won’t be selected. I modified the JS Fancybox code now and this code and it seem better // --------------------------------------------- // Fancybox Media Reader (Without Website Logo) // --------------------------------------------- if (top.location.pathname !== '/login') { $(window).on('action:posts.loaded', function(data) { console.log("Polling DOM for lazyLoaded images to apply Fancybox"); $(document).ready(function() { $('#content a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); }); }); }); } if (top.location.pathname !== '/login') { $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { $('#content a').not('.logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); data.preventDefault() // Strip out the images contained inside blockquotes as this looks nasty :) $('#content blockquote img').remove(); }); Fancybox.bind( '#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]', { groupAll: true, } ); }); }); } // Chat fancybox - fires when chat module loaded and AJAX calls new chat $(document).ready(function() { $(window).on('action:chat.loaded', function(data) { // >>> Se limiter au contenu principal uniquement <<< $('#content img').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { var newHref = $(this).attr("src"); $(this).wrap("<a class='fancybox' href='" + newHref + "'/>"); $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); data.preventDefault(); // Strip out the images contained inside blockquotes as this looks nasty :) $('#content blockquote img').remove(); }); Fancybox.bind( '#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]', { groupAll: true, } ); }); }); For the logo, I must use overflow: visible !important; on [component="brand/logo"] /* --- Logo --- */ [component="brand/logo"] { max-height: 50px; width: auto; height: auto; max-width: 100%; display: block; object-fit: contain; object-position: left center; overflow: visible !important; } Better result !!
  • NodeBB - Created pages not found?

    General
    20
    3 Votes
    20 Posts
    4k Views
    @jac Exactly. Hard point to argue.