Skip to content

Q&A Plugin Changes NodeBB

Solved Customisation
25 3 11.2k 1
  • wrote on last edited by
    #1

    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

  • 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
    #2

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

  • @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 cagatay
    #3

    @phenomlab no i just installed this plugin. css is current one without edit. i m cheking now.

    there is no css for solution 🙂

  • @phenomlab no i just installed this plugin. css is current one without edit. i m cheking now.

    there is no css for solution 🙂

    wrote on last edited by
    #4

    @cagatay ok. It’ll need customizing then because the CSS that comes bundled with the plugin is designed to work on the stock installation. You now have custom CSS which means some alterations are required.

  • @cagatay ok. It’ll need customizing then because the CSS that comes bundled with the plugin is designed to work on the stock installation. You now have custom CSS which means some alterations are required.

    wrote on last edited by cagatay
    #5

    @phenomlab i think there is some mistake for my css code which you wrote it for me. in your forum as i see all topic as opened by Q&A but in my forum just Soru&Cevap forum using Q&A.

    So your css code for my post style view has isSolved it comes from Q&A i think or i m false?

  • @phenomlab i think there is some mistake for my css code which you wrote it for me. in your forum as i see all topic as opened by Q&A but in my forum just Soru&Cevap forum using Q&A.

    So your css code for my post style view has isSolved it comes from Q&A i think or i m false?

    wrote on last edited by
    #6

    @cagatay yes, that’s correct. You can remove that CSS class. I customized it which would explain the odd positioning.

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


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
  • 2 Votes
    1 Posts
    648 Views
    No one has replied
  • nodebb-plugin-custom-pages

    Solved Customisation plugin custom-pages
    5
    2
    3 Votes
    5 Posts
    5k Views
    phenomlab
    @DownPW it’s possible, yes, but you may inadvertently end up targeting other elements using the same class which of course isn’t desired. Can you provide a link in DM for me to review?
  • Nodebb design

    Solved General nodebb
    2
    1 Votes
    2 Posts
    1k Views
    phenomlab
    @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.
  • NodeBB: Privileges for the Announcement channel

    Solved Configure nodebb
    6
    1
    1 Votes
    6 Posts
    2k Views
    phenomlab
    Up to you really
  • 2 Votes
    10 Posts
    4k Views
    phenomlab
    @DownPW We just have to change the cycles automatically according to each period ? Yes, this is by far the safest I think it is possible to achieve the goal, I have already seen this kind of thing on a site without any perf problems. It’s certainly possible, but not without issues or impact to performance (in my view)
  • 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 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 Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    4k Views
    phenomlab
    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ? For the record, this is what I added #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; } The /categories page seems a bit messed up, so looking at that currently EDIT - issued some override CSS in the CATEGORIES widget <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style> That should resolve the /categories issue.