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
  • Sidebar Widget is no longer on the side!

    Moved Solved General nodebb
    4
    2
    2 Votes
    4 Posts
    1k Views
    phenomlab
    @Panda said in Sidebar Widget is no longer on the side!: Ah, so sidebar wont work on mobile? Correct. If you review the docs on bootstrap, you’ll notice that it is designed on a grid system https://getbootstrap.com/docs/5.0/layout/grid/ What I mean by changing the category is moving it on here to general as you posted it in bugs, when it isn’t.
  • who is read NodeBB

    Customisation read post nodebb
    6
    0 Votes
    6 Posts
    3k Views
    phenomlab
    @cagatay You should ask in the NodeBB forums. Perhaps reference this post https://discuss.flarum.org/d/23066-who-read
  • [NodeBB] Custom fields plugin

    Unsolved Customisation nodebb plugins javascript custom
    5
    0 Votes
    5 Posts
    3k Views
    phenomlab
    @pwsincd 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 ?
  • 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); } });
  • 3 Votes
    6 Posts
    4k Views
    DownPW
    @phenomlab haha!! You are crazy. In a good way, of course It’s a way of saying you’re awesome !
  • [NODEBB] Welcome Message

    Solved Customisation css html nodebb
    20
    2
    13 Votes
    20 Posts
    9k Views
    phenomlab
    @DownPW the ‘js’ code for the banner takes the time from the client, so what it displays really depends on the regional settings for the operating system. I’ve not seen this issue myself but would like to see some examples of screenshots if possible.
  • Social icon (Nodebb)

    Solved Customisation nodebb social
    7
    0 Votes
    7 Posts
    3k Views
    JAC
    @phenomlab said in Social icon (Nodebb): @jac I just tested my theory around using the OG image, and according to the Twitter card validator, it works fine [image: 73e805e1-997b-41bf-9259-51c5052ca8fc-image.png] fixed
  • NodeBB Discord Plugins

    Unsolved Customisation nodebb discord plugin
    7
    0 Votes
    7 Posts
    4k Views
    phenomlab
    @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 ?