Skip to content

chat list navbar

Solved Customisation
30 2 13.2k 1
  • wrote on last edited by
    #15

    I resolve with this

    .btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
        color: #ccc;
    }
    
    a.btn.btn-secondary:hover {
      color: #ccc;
      background: #212427;
    }
    
    .caret {
        color: #000;
    }
    
    a.btn.btn-secondary.mark-all-read {
    	color: #ccc !important;
    }
    
    a.btn.btn-secondary.mark-all-read:hover {
      background: #212427;
    	color: #ccc !important;
    }
    
  • DownPW DownPW has marked this topic as solved on
  • wrote on last edited by DownPW
    #16

    @phenomlab

    I have a problem on my themes.

    Example I Have this on my css files :

    .btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
        color: var(--first-color) !important;
    }
    

    But this code is not taken into account 😞

    7880cacd-d49c-4fda-99bc-bddc5967b06c-image.png

    if i change in dev console (in live) it’s ok

    Can you help me with that ?

  • wrote on last edited by
    #17

    Maybe a problem with theme switcher & nodeBB 3.2.1 ?

  • Maybe a problem with theme switcher & nodeBB 3.2.1 ?

    wrote on last edited by
    #18

    @DownPW no, this works independently of NodeBB as it uses jQuery and CSS. The issue you have is the below

    var(--first-color)
    

    In CSS, var is a variable defined at root level and probably doesn’t exist in your CSS file. Essentially, it’s LESS. If you change the line so it looks (for example) like the below, it will probably then work

    #ffffff;
    

    The newer version of the theme switcher uses LESS variables as it’s more efficient but if these don’t exist then it looks like it’s being ignored when I’m fact it just returns a null value.

  • wrote on last edited by DownPW
    #19

    yes i know for var all the theme is coded with var.

    It’s the same things with #XXXXXX

  • @phenomlab

    I have a problem on my themes.

    Example I Have this on my css files :

    .btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
        color: var(--first-color) !important;
    }
    

    But this code is not taken into account 😞

    7880cacd-d49c-4fda-99bc-bddc5967b06c-image.png

    if i change in dev console (in live) it’s ok

    Can you help me with that ?

    wrote on last edited by
    #20

    @DownPW this sounds more like a caching issue to me. Do you get the same thing in an incognito session ?

  • @DownPW this sounds more like a caching issue to me. Do you get the same thing in an incognito session ?

    wrote on last edited by
    #21

    @phenomlab said in chat list navbar:

    @DownPW this sounds more like a caching issue to me. Do you get the same thing in an incognito session ?

    yes 😞

  • @phenomlab said in chat list navbar:

    @DownPW this sounds more like a caching issue to me. Do you get the same thing in an incognito session ?

    yes 😞

    wrote on last edited by DownPW
    #22

    I just installed firefox and it’s the same so for me it’s not a cache problem

    Edit @phenomlab

    For example, in fortifem theme, the code is correctly interpreted but not on Nightprowler theme but the code is the same !

    Fortifem its’ ok :
    https://i.imgur.com/Y85sVBi.gif

    Night prowler is not Ok withe the same code as Fortifem (variable) :

    https://i.imgur.com/tWus88b.gif

    All the rest of theme is OK

  • I just installed firefox and it’s the same so for me it’s not a cache problem

    Edit @phenomlab

    For example, in fortifem theme, the code is correctly interpreted but not on Nightprowler theme but the code is the same !

    Fortifem its’ ok :
    https://i.imgur.com/Y85sVBi.gif

    Night prowler is not Ok withe the same code as Fortifem (variable) :

    https://i.imgur.com/tWus88b.gif

    All the rest of theme is OK

    wrote on last edited by
    #23

    @DownPW I’ll have a look at this tomorrow. Sounds like you have values being overridden somewhere

  • @DownPW I’ll have a look at this tomorrow. Sounds like you have values being overridden somewhere

    wrote on last edited by
    #24

    @phenomlab

    I got better and I think I understand a little more the problem

    I declared the code in the ACP (it was not the case yesterday - just in the CSS file yesterday) and it applies. Normal

    On the other hand, it only applies the code of the ACP and not that of the CSS file.

  • wrote on last edited by DownPW
    #25

    EDIT @phenomlab :

    I just tested by deleting the entire CSS file except the button code and it is taken into account.

    There is therefore a CSS variable which prevents the execution of the code, but from there to know which one 😲

  • wrote on last edited by
    #26

    EDIT2:

    I find it… 😵 👍

  • wrote on last edited by DownPW
    #27

    hi @phenomlab

    I have this little avatar mismatch in the chat menu (just in Full mode) but only some of my themes (exemple: Daystalker) and I can’t find what’s wrong.

    An idear mark?

    b113f15a-2d3c-4667-9d6a-1380a0b78383-image.png

  • wrote on last edited by DownPW
    #28

    Hmm I find it the problem is that :

    .chats-list>li {
      padding: 0.5em;
      height: 80px; 
    }
    
  • Hmm I find it the problem is that :

    .chats-list>li {
      padding: 0.5em;
      height: 80px; 
    }
    
    wrote on last edited by
    #29

    @DownPW yes, you may need to be more specific with the target. Let me know

  • wrote on last edited by
    #30

    No no it’s ok @phenomlab
    I just comment the 2 lines mentionned aboves 😉


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
  • navbar

    Solved Customisation navbar harmony
    2
    2 Votes
    2 Posts
    1k Views
    phenomlab
    Marking as resolved, based on https://community.nodebb.org/topic/18625/navbar/2
  • Switch between list and card view function

    Moved Let's Build It cards layout css
    107
    1
    50 Votes
    107 Posts
    57k Views
    phenomlab
    @crazycells [image: image.png] [image: image.png]
  • Fixing YouTube videos css

    Solved WordPress css
    8
    2 Votes
    8 Posts
    3k Views
    Sala
    @phenomlab It looks good, but not anymore. I’ve already lost so much time. Now it’s time to move on
  • Footer bar add center text

    Solved Customisation css
    41
    1
    8 Votes
    41 Posts
    19k Views
    DownPW
    @phenomlab said in Footer bar add center text: div#console-nav-tab Ah ok test with bottom: 0px !important; idem
  • Adjusting the size of boxes in posts-list class

    Solved Customisation nodebb
    3
    3 Votes
    3 Posts
    2k Views
    crazycells
    @phenomlab thanks a lot, this combination works best .posts-list .posts-list-item .content { overflow: auto; max-height: 600px; }
  • Multiple link on one ico non Navbar

    Solved Customisation links css navbar
    7
    1
    2 Votes
    7 Posts
    3k Views
    DownPW
    yeah you’re right @phenomlab. Problem of NodeBB Version
  • [NODEBB] CSS Style Sheets SelectBox

    Locked Solved Customisation css
    112
    24 Votes
    112 Posts
    63k Views
    phenomlab
    @DownPW as discussed in PM Seems to have been solved with the new JS code that you added allowing the version CSS file change!! Cache problem therefore with the JS of the Switcher theme Based on this, I will close this thread and reference https://sudonix.com/topic/207/nodebb-help-for-my-custom-css/27
  • 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.