Skip to content

Q&A Plugin Changes NodeBB

Solved Customisation
25 3 11.2k 1
  • @cagatay yes, that’s correct. You can remove that CSS class. I customized it which would explain the odd positioning.

    wrote on last edited by
    #7

    @phenomlab so delete all?

    li.self-post .content:not(.isSolved [component="post/content"])[itemprop="text"] {
        background: #dee6f3;
        padding: 30px;
        border-radius: 6px;
        margin-right: 8.5rem !important;
    }
    li.self-post .content:not(.isSolved [component="post/content"]):after, li.self-post.topic-owner-post:first-child:after {
        border-right: 20px solid transparent;
        border-top: 20px solid var(--self-post);
        top: 66px;
        content: "";
        position: absolute;
        right: 90px;
        left: unset !important;
        border-bottom: none !important;
        bottom: unset !important;
    }
    li.self-post.topic-response-post .pull-left {
        float: right !important;
    }
    li.self-post .content:not(.isSolved [component="post/content"]):after, li.self-post.topic-owner-post:first-child:after {
        border-right: 20px solid transparent;
        border-top: 20px solid #dee6f3;
        top: 58px;
        content: "";
        position: absolute;
        right: 95px;
        left: unset !important;
        border-bottom: none !important;
        bottom: unset !important;
    }
    
  • @phenomlab so delete all?

    li.self-post .content:not(.isSolved [component="post/content"])[itemprop="text"] {
        background: #dee6f3;
        padding: 30px;
        border-radius: 6px;
        margin-right: 8.5rem !important;
    }
    li.self-post .content:not(.isSolved [component="post/content"]):after, li.self-post.topic-owner-post:first-child:after {
        border-right: 20px solid transparent;
        border-top: 20px solid var(--self-post);
        top: 66px;
        content: "";
        position: absolute;
        right: 90px;
        left: unset !important;
        border-bottom: none !important;
        bottom: unset !important;
    }
    li.self-post.topic-response-post .pull-left {
        float: right !important;
    }
    li.self-post .content:not(.isSolved [component="post/content"]):after, li.self-post.topic-owner-post:first-child:after {
        border-right: 20px solid transparent;
        border-top: 20px solid #dee6f3;
        top: 58px;
        content: "";
        position: absolute;
        right: 95px;
        left: unset !important;
        border-bottom: none !important;
        bottom: unset !important;
    }
    
    wrote on last edited by
    #8

    @cagatay no, none of that. If you look at the CSS, it’s targeting :not(is solved) which means so not match that class. If you delete that CSS you’ll land up deleting the work we did earlier for the messenger style commenting.

  • @cagatay no, none of that. If you look at the CSS, it’s targeting :not(is solved) which means so not match that class. If you delete that CSS you’ll land up deleting the work we did earlier for the messenger style commenting.

    wrote on last edited by
    #9

    @phenomlab so i do not touch any css code 🙂 waiting customized codes the odd positioning 🙂

  • @phenomlab so i do not touch any css code 🙂 waiting customized codes the odd positioning 🙂

    wrote on last edited by
    #10

    @cagatay yes. Don’t touch any existing code. I’ll have a look at this tomorrow. Any specific style you are looking for ?

  • Hi again.
    How can i change Solution word to Turkish language on post? Also my style of solution box not good how can i fix like good position and box type?

    104f0aa2-f126-43bd-9c92-8e81e8296160-image.png

    wrote on last edited by
    #11
  • @cagatay yes. Don’t touch any existing code. I’ll have a look at this tomorrow. Any specific style you are looking for ?

    wrote on last edited by
    #12

    @phenomlab said in Q&A Plugin Changes NodeBB:

    @cagatay yes. Don’t touch any existing code. I’ll have a look at this tomorrow. Any specific style you are looking for ?

    ok, no i m not looking any specific style, just it should be look like well 🙂

    @crazycells the plugin translation is good just when you chose correct answer for question become to flag as Solution that is in english not turkish, rest of in turkish.

  • @phenomlab said in Q&A Plugin Changes NodeBB:

    @cagatay yes. Don’t touch any existing code. I’ll have a look at this tomorrow. Any specific style you are looking for ?

    ok, no i m not looking any specific style, just it should be look like well 🙂

    @crazycells the plugin translation is good just when you chose correct answer for question become to flag as Solution that is in english not turkish, rest of in turkish.

    wrote on last edited by
    #13

    @cagatay then it is a bug. I will report it to GitHub.

  • @cagatay then it is a bug. I will report it to GitHub.

    wrote on last edited by
    #14

    @crazycells pls check it;

    96b2c8fd-8aa6-4bfa-a40d-8cb16c0839a5-image.png

    f4631859-b62f-4866-a798-1dc5aa7f4ea6-image.png

  • @crazycells pls check it;

    96b2c8fd-8aa6-4bfa-a40d-8cb16c0839a5-image.png

    f4631859-b62f-4866-a798-1dc5aa7f4ea6-image.png

    wrote on last edited by
    #15
  • @cagatay did you take the CSS from here for that ? It’s missing some positioning, but if you search the CSS you have and look for content: "solution" you should be able to change it to the Turkish equivalent.

    wrote on last edited by
    #16

    @phenomlab is “solution” label native to the plugin? or it is a label that you added?

  • @phenomlab is “solution” label native to the plugin? or it is a label that you added?

    wrote on last edited by
    #17

    @crazycells it’s native from recollection. Let me have a look and see what I can do with this tomorrow.

  • @crazycells pls check it;

    96b2c8fd-8aa6-4bfa-a40d-8cb16c0839a5-image.png

    f4631859-b62f-4866-a798-1dc5aa7f4ea6-image.png

    wrote on last edited by
    #18

    @cagatay upgrade the plugin to 1.0.4 , the translation issue is fixed.

  • @cagatay upgrade the plugin to 1.0.4 , the translation issue is fixed.

    wrote on last edited by
    #19

    @crazycells upgraded, problem is fixed.

  • @crazycells upgraded, problem is fixed.

    wrote on last edited by phenomlab
    #20

    @cagatay The CSS should look a bit better now

    eb0cd06b-5419-4986-9663-ceff3eac3cdd-image.png

    Added new block below on your site

    .posts [component=post][data-index="-1"].isSolved:before {
        border: none !important;
        border-radius: 6px;
    }
    

    Feel free to change positions etc., as you see fit.

  • @cagatay The CSS should look a bit better now

    eb0cd06b-5419-4986-9663-ceff3eac3cdd-image.png

    Added new block below on your site

    .posts [component=post][data-index="-1"].isSolved:before {
        border: none !important;
        border-radius: 6px;
    }
    

    Feel free to change positions etc., as you see fit.

    wrote on last edited by
    #21

    @phenomlab i think we changed same time CSS codes so i cant see yours code which added. I should add this code CSS side?

  • @phenomlab i think we changed same time CSS codes so i cant see yours code which added. I should add this code CSS side?

    wrote on last edited by
    #22

    @cagatay No, I’ve already added it for you. The code I provided is just to tell you what I added

    This is it here on your site

    47633cfd-f754-4f19-b13b-eeba2970b90e-image.png

    Ignore the numbering - this is Edge trying to convert numbers into English from Turkish, which is an epic failure 🙂

  • @cagatay No, I’ve already added it for you. The code I provided is just to tell you what I added

    This is it here on your site

    47633cfd-f754-4f19-b13b-eeba2970b90e-image.png

    Ignore the numbering - this is Edge trying to convert numbers into English from Turkish, which is an epic failure 🙂

    wrote on last edited by
    #23

    @phenomlab thank you.

    how can i fixed right corner side?

    ee1255af-28e3-4457-bb92-b4fa141816a3-image.png

  • @phenomlab thank you.

    how can i fixed right corner side?

    ee1255af-28e3-4457-bb92-b4fa141816a3-image.png

    wrote on last edited by phenomlab
    #24

    @cagatay you’d need to either use float: right; or position: absolute; and then make use of left, right variables. If you use absolute then you’d also need to set a top value (which I think is already there).

    This will take experimentation - the CSS I added also only triggers at screen estates of a minimum of 1200px to prevent it looking strange on mobile breakpoints.

    EDIT: Actually, this will work

    .posts [component=post][data-index="-1"].isSolved:before {
        border: none !important;
        border-radius: 6px;
        float: right;
        left: 10px;
    }
    

    Look for the block .posts [component=post][data-index="-1"].isSolved:before and add the float and left values to it, then save

    4a312425-f58b-4bcb-a865-43eb307fcfdd-image.png

  • @cagatay you’d need to either use float: right; or position: absolute; and then make use of left, right variables. If you use absolute then you’d also need to set a top value (which I think is already there).

    This will take experimentation - the CSS I added also only triggers at screen estates of a minimum of 1200px to prevent it looking strange on mobile breakpoints.

    EDIT: Actually, this will work

    .posts [component=post][data-index="-1"].isSolved:before {
        border: none !important;
        border-radius: 6px;
        float: right;
        left: 10px;
    }
    

    Look for the block .posts [component=post][data-index="-1"].isSolved:before and add the float and left values to it, then save

    4a312425-f58b-4bcb-a865-43eb307fcfdd-image.png

    wrote on last edited by
    #25

    @phenomlab said in Q&A Plugin Changes NodeBB:

    float: right;
    left: 10px;
    }

    worked thank you 🙂

  • cagatay cagatay has marked this topic as solved on

Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • How to style tool tip of nodebb-plugin-user-level

    Solved Customisation user level css
    4
    1
    5 Votes
    4 Posts
    3k Views
    phenomlab
    @DownPW thanks. I forgot about that.
  • Title on homepage of nodebb forum

    Solved Customisation nodebb
    2
    1 Votes
    2 Posts
    2k Views
    phenomlab
    @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.
  • Link vs Refresh

    Solved Customisation nodebb blog customization
    20
    2
    8 Votes
    20 Posts
    7k Views
    phenomlab
    @pobojmoks Do you see any errors being reported in the console ? At first guess (without seeing the actual code or the site itself), I’d say that this is AJAX callback related
  • ineffecient use of space on mobile

    Solved Customisation nodebb
    10
    2
    7 Votes
    10 Posts
    4k Views
    crazycells
    @phenomlab Thanks
  • 5 Votes
    9 Posts
    6k Views
    DownPW
    @phenomlab Very very great Mark Thanks again, It’s perfect now ! –> I share my code that I modified. I’ve added French and English comments. If you see things to change Mark, don’t hesitate. As usual, all the access paths (FA icons, logo) will have to be modified according to your architecture. You can also very well add/remove time slots and change welcome messages to suit your needs. Widgets ACP/HTML Widget Footer Logo <center> <br><br> <img id="thislogo" src="path/to/my/image"> </center> Widget Welcome Message <!-- IF loggedIn --> <div class="getUsername">, <a href="/me"><span class="username"></span></a></div> <!-- ENDIF loggedIn --> CSS – I added the size font-weight: 900; in the CSS because otherwise some FA icon wasn’t displayed correctly and reduce margin : i#thisicon { font-family: "Font Awesome 5 Free"; font-style: normal; margin-right: 8px; font-weight: 900; } .getUsername { padding-top: 20px; text-align: right; } /*Smartphone*/ /*On désactive le message de bienvenue"*/ /*We disable the welcome message"*/ @media all and (max-width: 1024px) { .getUsername { display: none; } } JAVASCRIPT // ------------------------------------------ // Welcome Message avec icône et Footer logo // Welcome Message with icon and Footer logo // ------------------------------------------ $(window).on('action:ajaxify.end', function (data) { //On récupère le username dans le DOM et on l'affiche //We retrieve the username from the DOM and display it function updateUsername() { $('.getUsername .username').text(app.user.username); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', updateUsername); } else { updateUsername(); } //On déclare les variables principales (themessage & thehours) ainsi que les variables secondaires correspondants aux plages horaires //We declare the main variables (themessage & thehours) as well as the secondary variables corresponding to the time slots var thehours = new Date().getHours(); var themessage; var wakeup = ('Good day'); var morning = ('Good morning'); var lunch = ('Bon appétit'); var afternoon = ('Good afternoon'); var drink = ('Cheers'); var evening = ('Good evening'); var night = ('Good night'); var welcome = ('Welcome'); var matched = false; //On peux ici tester le résultat du code en spécifiant une heure (!!!IMPORTANT: Commenter une fois le script testé!!!) //Here we can test the result of the code by specifying a time (!!!IMPORTANT: Comment once the script has been tested!!!) //thehours = 20 //On déclare les plages horaires avec les icones FA et les logos //We declare the time slots with FA icons and logos path if (thehours >= 0 && thehours < 6) { themessage = night; theicon = "fa-solid fa-moon"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 6 && thehours < 8) { themessage = wakeup; theicon = "fa-solid fa-mug-hot"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 8 && thehours < 12) { themessage = morning; theicon = "fa-solid fa-sun"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 12 && thehours < 13) { themessage = lunch; theicon = "fas fa-hamburger"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 13 && thehours < 16) { themessage = afternoon; theicon = "fa-solid fa-sun"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 16 && thehours < 18) { themessage = welcome; theicon = "fa-solid fa-rocket"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 18 && thehours < 19) { themessage = drink; theicon = "fa-solid fa-wine-glass"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 19 && thehours < 20) { themessage = lunch; theicon = "fas fa-pizza-slice"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 20 && thehours < 24) { themessage = evening; theicon = "fa-solid fa-tv"; thelogo = "/assets/customlogo/XXX.png"; } // Si la page active est un topic, on désactive/cache le message de bienvenue // If the active page is a topic, we deactivate/hide the welcome message if (window.location.href.indexOf("topic") > -1) { console.log("This is a topic, so hide the user welcome message"); $('#thisuser').hide(); } // Sinon, on affiche le message en fonction, l'icone FA et son emplacement (prepend) // Otherwise, we display the message in function, the FA icon and its location (prepend) else { $('.getUsername').prepend("<i id='thisicon' class='" + theicon + "'></i>" + themessage); $("#thislogo").attr("src", thelogo); //$('.getUsername').prepend("<img id='thisicon' src='" + thelogo + "'></>" + themessage); } });
  • [NODEBB] Stats

    Unsolved Customisation plugin stats script
    20
    1
    2 Votes
    20 Posts
    6k Views
    JAC
    @phenomlab said in [NODEBB] Stats: @jac or I land up fixing it I wouldn’t put it past you
  • NodeBB Footer

    Solved Customisation footer nodebb
    10
    1 Votes
    10 Posts
    4k Views
    JAC
    @phenomlab said in NodeBB Footer: @jac and you. Hope all is well and you recover quickly Thanks pal
  • nodebb-plugin-customize error

    Solved Customisation
    25
    2 Votes
    25 Posts
    17k Views
    RiekMedia
    @phenomlab it work, thanks