Skip to content

How to fix header side as boxed

Solved Customisation
10 3 1.8k 1

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
  • how to hide "moved" badge with CSS?

    Solved Customisation nodebb
    12
    1
    3 Votes
    12 Posts
    2k Views
    @crazycells ah, I see. That makes sense.
  • Nodebb 3.2.0

    Bugs nodebb nodebb 3.2.0
    20
    1
    2 Votes
    20 Posts
    4k Views
    @crazycells yes, I’m aware of that. Need to fix EDIT- fixed. Caused by the same CSS that is used to absolutely position the “verified” group badge in the posts view. Amended this CSS so that is specifically targets the post stream as below li[component="post"] a[href*="/groups/verified"] { position: absolute !important; left: 8px; z-index: 2; margin-top: 1px; border-radius: 999px !important; line-height: 14px; display: block; height: 22px; margin-left: 0px !important; }
  • Whitespace fixes in Nodebb

    Solved Customisation nodebb
    18
    2
    7 Votes
    18 Posts
    3k Views
    @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.
  • Rotating homepage icons, gifs?

    Solved Configure nodebb
    2
    3 Votes
    2 Posts
    718 Views
    @eveh It’s not a GIF, no. It’s actually a webp file so made much smaller, and uses keyframes to control the rotation on hover. You can easily make your own though The CSS for that is as below @keyframes rotate180 { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } @keyframes rotate0 { from { transform: rotate(180deg); } to { transform: rotate(0deg); } } Your milage may vary on the CSS below, as it’s custom for Sudonix, but this is the class that is used to control the rotate .header .forum-logo, img.forum-logo.head { max-height: 50px; width: auto; height: 30px; margin-top: 9px; max-width: 150px; min-width: 32px; display: inline-block; animation-name: rotate180, rotate0; animation-duration: 1000ms; animation-delay: 0s, 1000ms; animation-iteration-count: 1; animation-timing-function: linear; transition: transform 1000ms ease-in-out; }
  • what does sound/mute button do?

    Solved Customisation nodebb
    20
    1
    9 Votes
    20 Posts
    3k Views
    @crazycells Yeah, looking at the plugin itself, that’s a hard coded limit [image: 1653494282106-3d6dbc10-185b-4102-9470-0c2731a10750-image.png] I’ll probably remove that… eventually…
  • Detect if user is admin

    General nodebb javascript code
    2
    0 Votes
    2 Posts
    1k Views
    @pwsincd I think you can use userData.isAdmin = isAdmin; if I’m not mistaken - see https://community.nodebb.org/topic/15128/how-to-hide-whitelist-user-field-only-to-owner-or-admin?_=1648802303112 for an example
  • NodeBB slow after DB recovery

    Solved Performance performance nodebb
    1
    5 Votes
    1 Posts
    634 Views
    No one has replied
  • Avatar on Topic Header

    Solved Customisation css avatar header
    9
    1
    0 Votes
    9 Posts
    2k Views
    @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