Skip to content
Sudonix

[NODEBB] Help for my custom CSS

Solved Customisation
245 5 108.8k 3
  • cagatayundefined cagatay

    yes @downpw

    DownPWundefined

    @cagatay said:

    yes @downpw

    So is taht the problem.
    The core migrated to FA6 and no longer automatically includes the compatibility layers. The all.css alone is no longer enough because it only loads icons in native FA6 syntax (fa-solid, fa-regular, etc.). Your old icons using FA4 syntax (fa fa-something) are no longer recognized without the shims.

    Hence the need for the three files:

    • all.css: the FA6 icons themselves
    • v4-shims.css: the mapping table that remaps the old FA4 names to their FA6 equivalents (many icons were renamed between FA4 and FA6)
    • v4-font-face.css: redeclares the FontAwesome @font-face with the old family names (FontAwesome instead of "Font Awesome 6 Pro"), so CSS selectors targeting the old font-family keep resolving

    So if your customs still use FA4 syntax, all three are required.

    I load my Custom FA like this in my ACP/Headers :

    <link href="/assets/customfonts/FontAwesome.Pro.6.x.x/css/all.css" rel="stylesheet" />
<link href="/assets/customfonts/FontAwesome.Pro.6.x.x/css/v4-shims.css" rel="stylesheet" />
<link href="/assets/customfonts/FontAwesome.Pro.6.x.x/css/v4-font-face.css" rel="stylesheet" />

    PW and WS Spirit alive

    0
  • cagatayundefined

    how i create those folders. i added ACP/HEADERS the codes but not working.

    0
  • cagatayundefined cagatay

    how i create those folders. i added ACP/HEADERS the codes but not working.

    DownPWundefined

    @cagatay said:

    how i create those folders. i added ACP/HEADERS the codes but not working.

    Adapt path to your custom installation. I don’t know where is your custom FA Folder nor how you use it

    PW and WS Spirit alive

    0
  • DownPWundefined

    You need to load your Font Awesome CSS files by adjusting this code to the path where you saved them.

    But honestly, I don’t know how you’ve configured your site in this regard.

    PW and WS Spirit alive

    0
  • cagatayundefined

    <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
    <link href=“/assets/fonts/fonts.min.css?version=1” rel=“stylesheet”>
    <link href=“/assets/customfonts/FontAwesome.Pro.6.x.x/css/all.css” rel=“stylesheet” />
    <link href=“/assets/customfonts/FontAwesome.Pro.6.x.x/css/v4-shims.css” rel=“stylesheet” />
    <link href=“/assets/customfonts/FontAwesome.Pro.6.x.x/css/v4-font-face.css” rel=“stylesheet” />
    <script src=“https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js”></script>
    <link rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css”/>
    <a id=“pageUp” class=“”><i class=“fas fa-chevron-up”></i></a>
    <div id=“readingposition” class=“reading-meter” style=“bottom: 0px;”>
    <div class=“reading-meter-background rounded-1 border border-gray-300 ready”>
    <div class=“reading-meter-progress-bar rounded-1” id=“progress-bar”>
    </div>
    </div>
    </div>

    what i have now

    0
Log in to reply

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

    Custom Page - nodebb

    Solved Customisation custom-pages nodebb
    13
    2
    5 Votes
    13 Posts
    1k Views
    DownPWundefined
    I’m happy to see this
  • crazycellsundefined

    Bug Report

    Solved Bugs nodebb bugs
    47
    1
    26 Votes
    47 Posts
    13k Views
    phenomlabundefined
    @crazycells Good points, thanks. I completely forgot that classes are added - makes life much simpler! EDIT - seems this is pretty straightforward, and only needs the below CSS .upvoted i { color: var(--bs-user-level) !important; } This then yields [image: 1718028529465-3f072f8a-ebfa-4910-8723-73c493b8e4eb-image.png] However, the caveat here is that the .upvoted class will only show for your upvotes, and nobody else’s. However, this does satisfy the original request however I would love to see my upvoted posts more clearly, because currently, when I upvote, nothing on the post tool is changing, it would be nicer if there is an indication that I have upvoted (like a filled or colored triangle?)
  • mventuresundefined

    NodeBB: The global Search option

    Solved Configure search nodebb
    5
    0 Votes
    5 Posts
    1k Views
    phenomlabundefined
    @mventures Yes, exactly. The other icon will restart NodeBB whilst the first icon I referenced will rebuild (recompile) it. The huge strength of NodeBB over Flarum (for example) is that the code is precompiled, and called once at boot. PHP’s code has to repeatedly reload code from source making it much slower.
  • DownPWundefined

    NodeBB 3.0 alpha1 : Error on install

    Solved Configure nodebb version 3 install error
    19
    2 Votes
    19 Posts
    4k Views
    DownPWundefined
    @phenomlab Work now
  • DownPWundefined

    Plugin reaction Bug

    Solved Customisation plugin nodebb reaction
    15
    1
    0 Votes
    15 Posts
    4k Views
    phenomlabundefined
    @DownPW That was going to be my next suggestion
  • pwsincdundefined

    Detect if user is admin

    General nodebb javascript code
    2
    0 Votes
    2 Posts
    1k Views
    phenomlabundefined
    @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
  • DownPWundefined

    [NODEBB] CSS Style Sheets SelectBox

    Locked Solved Customisation css
    112
    24 Votes
    112 Posts
    43k Views
    phenomlabundefined
    @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
  • Mike Jonesundefined

    CSS Help on my Flarum

    Solved Customisation
    5
    2
    2 Votes
    5 Posts
    2k Views
    phenomlabundefined
    @mike-jones Yes, you’ll typically see this type of behaviour if there is another style that has higher priority in the sense that yours will be overridden. Using !important will override the higher preference, but should be used sparingly rather than everywhere.