Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
258 5 173.4k 3
  • wrote on last edited by

    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.

  • wrote on last edited by

    <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

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

    wrote on last edited by

    @cagatay if you look in the console (developers console in browser) do you see any error messages being returned?

    Linux is case sensitive, and it’s possible to have the same filename and folder name in upper and lower case.

    I suspect this might be the issue, but I could be wrong.

  • wrote on last edited by

    Mark, the situation is that since I used your CSS files, I don’t even have the Frontawese folder. Because of that, I really need your direct help. I’d really appreciate it if you could take a look whenever you have some free time.

  • wrote on last edited by

    Hi Mark, hope you’re doing well. Are you going to be able to help me with this?

  • Hi Mark, hope you’re doing well. Are you going to be able to help me with this?

    wrote on last edited by phenomlab

    @cagatay Just looking at this now. Do you have a FA Pro 6 license, or are you trying to use the free version? It’s not immediately clear, and the directory structure on your server is a mess to be honest. Not sure what has happened here.

    EDIT - I have it working. DM me.

  • wrote on last edited by

    thank you Mark.

  • wrote on last edited by

    so what is the problem of @cagatay mark @phenomlab ?

  • wrote on last edited by

    i do not know 🙂 Mark resolved.

  • so what is the problem of @cagatay mark @phenomlab ?

    wrote on last edited by

    @DownPW the FA library was missing with no paths defined. I’ve set these in the headers and uploaded the source, including necessary shim files which resolves the issue.

  • wrote on last edited by

    OK
    Likely deleted by mistake from the NodeBB ACP headers.

  • OK
    Likely deleted by mistake from the NodeBB ACP headers.

    wrote on last edited by

    @DownPW Possibly, but the source files were also missing, and @cagatay has a custom theme developed by me.

  • wrote on last edited by

    fa0eee3c-239c-4d9b-b8c9-7fd7d7cbbd7c-image.jpeg

    Hi, the active users are not showing correctly. Instead of the usernames, I’m seeing code. What should I do to fix this?

  • fa0eee3c-239c-4d9b-b8c9-7fd7d7cbbd7c-image.jpeg

    Hi, the active users are not showing correctly. Instead of the usernames, I’m seeing code. What should I do to fix this?

    wrote on last edited by

    @cagatay sorry for late response. This looks too be one of the widgets, and I’m wondering if you have custom code that targets this.

    Had this recently happened after an upgrade or other changes?

  • wrote on last edited by

    mark hi,
    Refused to apply style from ‘https://efelsefe.com/assets/customfonts/FontAwesome-6-Pro/pro/css/v4-font-face.css’ because its MIME type (‘text/plain’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

    I keep getting this error.


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
  • Nodebb vs Wordpress vs Other

    General wordpress nodebb woocomerce business
    4
    5 Votes
    4 Posts
    2k Views
    DownPW
    PrestaShop + modules IA https://www.prestashop.com Magento https://developer.adobe.com/open/magento
  • What plugins are being used here on Sudonix?

    Solved General nodebb plugins development
    6
    5 Votes
    6 Posts
    2k Views
    phenomlab
    @Roki-Antic Welcome! This site isn’t running Persona, but Harmony - a very heavily customised version at that. Do you have a URL where your site is currently located that is publicly accessible? Feel free to PM this info if you do not want to disclose here. Happy to help with any customisation needs.
  • 1 Votes
    1 Posts
    2k Views
    No one has replied
  • Composer options on nodebb

    Solved Configure nodebb
    8
    1
    3 Votes
    8 Posts
    3k Views
    phenomlab
    @Panda You should be able to expose the CSS for these using F12 to get into console [image: 3591518c-e3a3-4ada-a43c-6b32a5e0359c-image.png] [image: a2b8ed46-4157-4ff2-85f0-576543380107-image.png] That should then expose the element once selected [image: 89d9c545-a47a-40d1-98f4-80cf3b958e8f-image.png] Here’s the below CSS you need based on the screenshot provided. .composer .formatting-bar .formatting-group li[data-format="picture-o"], .composer .formatting-bar .formatting-group li[data-format="spoiler"] { display: none; }
  • Footer bar add center text

    Solved Customisation css
    41
    1
    8 Votes
    41 Posts
    20k Views
    DownPW
    @phenomlab said in Footer bar add center text: div#console-nav-tab Ah ok test with bottom: 0px !important; idem
  • Quote design CSS

    Solved Customisation css quote
    15
    1
    4 Votes
    15 Posts
    6k Views
    phenomlab
    @DownPW yes, that does make sense actually. I forgot to mention the layout of Sudonix is custom so that would have an impact on the positioning. Good spot
  • 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.
  • Reading Meter Progress bar

    Locked Solved Customisation css
    15
    1
    9 Votes
    15 Posts
    7k Views
    phenomlab
    For anyone else following this thread, please see https://sudonix.com/topic/467/issues-with-progress-bar-on-v3