Skip to content

Q&A Plugin Changes NodeBB

Solved Customisation
25 3 11.0k 1
  • @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.

  • @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
  • Forum customisation

    Customisation nodebb forum customised
    11
    2
    6 Votes
    11 Posts
    3k Views
    JAC
    Thank you Mark, the changes look fantastic!!
  • SEO and Nodebb

    Performance nodebb seo
    2
    2 Votes
    2 Posts
    2k Views
    phenomlab
    @Panda It’s the best it’s ever been to be honest. I’ve used a myriad of systems in the past - most notably, WordPress, and then Flarum (which for SEO, was absolutely dire - they never even had SEO out of the box, and relied on a third party extension to do it), and NodeBB easily fares the best - see below example https://www.google.com/search?q=site%3Asudonix.org&oq=site%3Asudonix.org&aqs=chrome..69i57j69i60j69i58j69i60l2.9039j0j3&sourceid=chrome&ie=UTF-8#ip=1 However, this was not without significant effort on my part once I’d migrated from COM to ORG - see below posts https://community.nodebb.org/topic/17286/google-crawl-error-after-site-migration/17?_=1688461250365 And also https://support.google.com/webmasters/thread/221027803?hl=en&msgid=221464164 It was painful to say the least - as it turns out, there was an issue in NodeBB core that prevented spiders from getting to content, which as far as I understand, is now fixed. SEO in itself is a dark art - a black box that nobody really fully understands, and it’s essentially going to boil down to one thing - “content”. Google’s algorithm for indexing has also changed dramatically over the years. They only now crawl content that has value, so if it believes that your site has nothing to offer, it will simply skip it.
  • Whitespace fixes in Nodebb

    Solved Customisation nodebb
    18
    2
    7 Votes
    18 Posts
    6k Views
    phenomlab
    @Panda Just circling back here with something of an update (which I think you’ll like). I’ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them. More importantly, if you reload the site, you’ll notice that the ranks are now icons. I also removed the “Author” badge, and made this a single icon, which (to me) looks much better.
  • NodeBB: updating Admin details not working

    Solved Configure nodebb admin
    17
    3 Votes
    17 Posts
    5k Views
    phenomlab
    @mventures Ok. No issues
  • How to downgrade plugin version on NodeBB

    Solved Customisation downgrade nodebb
    11
    3 Votes
    11 Posts
    4k Views
    phenomlab
    @cagatay no problems
  • Changing Background on NodeBB

    Solved Customisation background image nodebb
    4
    0 Votes
    4 Posts
    2k Views
    phenomlab
    @cagatay You’d target the body tag and use the below line of CSS background: url(/assets/customcss/backgrounds/default/default.png) no-repeat center center fixed; Obviously, you need to change the path to suit where your image is being stored. More info around the background property can be found here https://www.w3schools.com/cssref/css3_pr_background.php
  • 5 Votes
    9 Posts
    3k Views
    crazycells
    is there any way to see whose reputation is changed by this plugin?
  • [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