Skip to content

chat list navbar

Solved Customisation
30 2 13.2k 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
  • navigation menu panel on mobile

    Solved Customisation nodebb css
    8
    1
    7 Votes
    8 Posts
    3k Views
    phenomlab
    @crazycells hmm. That’s odd. I haven’t made any changes from recollection but I could be wrong. I’ll need to check. EDIT - very strange. I honestly don’t recall adding the below CSS block to alter the bottom bar, but you’re right… .bottombar-nav { padding: 0px !important; } I’ve removed this so it reflects stock Harmony.
  • hover link effect

    Solved Customisation css link hover
    18
    1
    6 Votes
    18 Posts
    7k Views
    phenomlab
    @DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => { const style = getComputedStyle(button); const lines = document.createElement("div"); lines.classList.add("lines"); const groupTop = document.createElement("div"); const groupBottom = document.createElement("div"); const svg = createSVG( button.offsetWidth, button.offsetHeight, parseInt(style.borderRadius, 10) ); groupTop.appendChild(svg); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); lines.appendChild(groupTop); lines.appendChild(groupBottom); button.appendChild(lines); button.addEventListener("pointerenter", () => { button.classList.add("start"); }); svg.addEventListener("animationend", () => { button.classList.remove("start"); }); }); }) The CSS for start is below .button-gradient.start .lines svg, .button-transparent.start .lines svg { animation: stroke 0.3s linear; } And this is the corresponding keyframe @keyframes stroke { 30%, 55% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } } It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.
  • Bottom footer navbar button extend

    Solved Customisation css javascript customisation footer navbar
    32
    9 Votes
    32 Posts
    15k Views
    phenomlab
    @DownPW said in Bottom footer navbar button extend: Oh my god, it’s beautiful mark I liked this design so much, I’ve implemented it here. I intend to do a lot more with the footer in due course, so hiding it makes a lot of sense. Thanks @DownPW for the idea and initial concept
  • Blinking text Effect

    Customisation nodebb text effect css
    3
    5 Votes
    3 Posts
    2k Views
    DownPW
    @phenomlab I love it too @phenomlab said in Blinking text Effect: Has that “broken neon light” look that you see in films. It’s exactly that, kind of old neon signs of bar or pubs a bit cyberpunk too
  • 4 Votes
    8 Posts
    5k Views
    phenomlab
    @DownPW done
  • tag icon in front of tags

    Solved Customisation css
    5
    3 Votes
    5 Posts
    2k Views
    crazycells
    @phenomlab said in tag icon in front of tags: @crazycells Are you using Font Awesome Free ? If so, try this span.tag:before { content: "\f02b"; font-family: "Font Awesome 5 Free"; margin-right: 5px; margin-left: 5px; font-weight: 900; } yeap, this worked thanks a lot.
  • [NodeBB] Import custom Font

    Solved Customisation custom fonts nodebb css
    12
    3 Votes
    12 Posts
    5k Views
    phenomlab
    @cagatay you’ll need to define this in the body tag (or another element if you want greater or more granular targets) - for example body { font-family: "Poppins"; font-size: 16px; } Essentially, you use the font-size CSS directive.