Skip to content

Discourse Design Change

Customisation
25 3 10.3k 1
  • it doesn’t get better and doesn’t get any better no matter what I do

    7364f931-2196-41c6-bcd1-942fe6f5a113-image.png

    wrote on last edited by
    #16

    @riekmedia I’ll have a look at this soon.

  • @riekmedia I’ll have a look at this soon.

    wrote on last edited by
    #17

    @phenomlab Hey phenomlab, had you already looked in?

  • @phenomlab Hey phenomlab, had you already looked in?

    wrote on last edited by
    #18

    @riekmedia Not yet. Sorry

  • @riekmedia Not yet. Sorry

    wrote on last edited by
    #19

    @phenomlab Do you know when you can find time for it? I have to honestly say I can’t do it. Have tried it all the time but with the forum I have real problems to implement it. If only because I can’t access the <html> tag that makes my boxed design. Ne change to div did not bring any real success. I even find that it is much worse and more difficult in the forum software than with Nodebb

  • @phenomlab Do you know when you can find time for it? I have to honestly say I can’t do it. Have tried it all the time but with the forum I have real problems to implement it. If only because I can’t access the <html> tag that makes my boxed design. Ne change to div did not bring any real success. I even find that it is much worse and more difficult in the forum software than with Nodebb

    wrote on last edited by
    #20

    @riekmedia I’ll try and have a look over the weekend. However, I’m not entirely conversant with discourse and it’s templating style, so would need to understand that first before we can make any changes.

  • @riekmedia I’ll try and have a look over the weekend. However, I’m not entirely conversant with discourse and it’s templating style, so would need to understand that first before we can make any changes.

    wrote on last edited by
    #21

    @phenomlab Everything is fine, if something breaks is not bad, it’s a bare installation.

  • @phenomlab Everything is fine, if something breaks is not bad, it’s a bare installation.

    wrote on last edited by
    #22

    @riekmedia ok. Thanks.

  • @riekmedia I’ll try and have a look over the weekend. However, I’m not entirely conversant with discourse and it’s templating style, so would need to understand that first before we can make any changes.

    wrote on last edited by
    #23

    @phenomlab okay, I assume that this was done then, since nothing else happened. I will turn it off now

  • @phenomlab okay, I assume that this was done then, since nothing else happened. I will turn it off now

    wrote on last edited by
    #24

    @riekmedia Sorry, but owing to other commitments, I’ve not had any free time to look into this. Happy to do so - I just don’t know when at the the moment.

  • @riekmedia Sorry, but owing to other commitments, I’ve not had any free time to look into this. Happy to do so - I just don’t know when at the the moment.

    wrote on last edited by
    #25

    @phenomlab okay

  • phenomlab phenomlab marked this topic as a regular topic on

Related Topics
  • 2 Votes
    1 Posts
    648 Views
    No one has replied
  • 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.
  • Material View Support for Stock NodeBB

    Unsolved Let's Build It material view javascript css
    51
    4
    15 Votes
    51 Posts
    27k Views
    DownPW
    Oh yes, that’s what’s super cool, I learn something every day. Afterwards I start from so low in JS
  • 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.
  • Q&A Plugin Changes NodeBB

    Solved Customisation nodebb q&a plugin
    25
    1
    6 Votes
    25 Posts
    11k Views
    cagatay
    @phenomlab said in Q&A Plugin Changes NodeBB: float: right; left: 10px; } worked thank you
  • NodeBB changing color of the text

    Solved Customisation
    7
    2 Votes
    7 Posts
    3k Views
    marusaky
    @phenomlab said in NodeBB changing color of the text: @marusaky This ought to to it a.permalink, a.permalink:active, a.permalink:focus, a.permalink:hover { color: #ffffff; } works great, thanks a lot
  • 4 Votes
    8 Posts
    5k Views
    phenomlab
    @DownPW done
  • Avatar on Topic Header

    Solved Customisation css avatar header
    9
    1
    0 Votes
    9 Posts
    3k Views
    JAC
    @jac said in Avatar on Topic Header: @downpw said in Avatar on Topic Header: Great Plugin I make it a bit cleaner via this CSS code: /*------------------------------------------------------------------*/ /*---------------- nodebb-plugin-browsing-users -----------------*/ /*------------------------------------------------------------------*/ /*Space between the avatar and the RSS icon */ .topic [component="topic/browsing-users"] { margin-bottom: -5px; padding-left: 10px; } /*Space between avatars*/ .pull-left { float: left!important; padding-right: 5px; } Do you have a screenshot of how this looks with the CSS change? Just added this change, thanks @DownPW