Skip to content

Swatch / Theme Changer

Code Respository
  • Hi all,

    As most of you know, there is a swatch / theme switcher on this site, which can be found here

    2b2a7aeb-b373-4cfd-867a-363af8baf4d7-image.png

    I decided to create this based on an idea from @DownPW who wanted to add theming capability to NodeBB v2.x. This started off as a relatively simple code snippet, and then over time, leveraged technologies such as Ajax etc in order to provide new features. The code is now fully mature having gone through various iterations and changes in order to make it fully compliant with BS5 and NodeBB v3.x

    Let’s get started…

    Disclaimer

    You are strongly recommended to test this process out in a dev environment before trying it in production. Trust me, there’s nothing worse than having users ask you why things don’t look right when they access your forum, and you’d spent ages setting everything up, so do yourself a favour - if you really are intent on putting this into your own site, please test it first and get comfortable with the process before proceeding to live.

    Synopsis

    First and foremost, it’s worth explaining how the various elements this uses are combined to make one product.

    1. The Brand Header widget - this is used for the actual HTML that contains all of our selections (Light, Dim, Darkness)
    2. The JS code - this is placed into your ACP under /admin/appearance/customise#custom-js. We are leveraging the already present jQuery to execute these functions
    3. The “theme files” - these are located in your /public structure inside a special folder we identify as customcss

    All of my code is slowly moving to git and this particular repository can be found below

    JS Code

    The code itself looks “complex”, but actually isn’t. You can find it here

    You’ll need to copy all of this code, and paste it into /admin/appearance/customise#custom-js. Don’t forget to enable this feature (see below)

    9c4a8f24-e97e-410e-9175-cd10d3e1582b-image.png

    Don’t expect any miracles at this point 🙂

    The widget code

    In your ACP, go to /admin/extend/widgets and look for

    Brand Header global / brand-header

    Using the selectors on the right, drag the HTML widget into this area

    4aa1208e-6790-4551-9e6d-ed84c3d9be11-image.png

    37d2a041-44bd-4148-8f9f-16e5088a1ede-image.png

    Drop it into the area shown in the screenshot. This will form the container for the HTML code we need to add, which is here

    Copy all of the code from the link above into the widget you just created

    390c18cd-b144-493b-b0c4-c062c829bfe9-image.png

    Don’t forget to save

    8d0b364b-bf9f-4290-a9ee-9165d962c011-image.png

    The CSS

    IMPORTANT Use of this applet requires customised CSS which can be found in the link below. You MUST replace all of your existing CSS for this to work. There are NO exceptions!

    The “Global CSS” file is here

    You will need to select all of this file’s contents, and paste into /admin/appearance/customise#custom-css - completely overwriting any custom CSS you already have. Backup your current content in case you change your mind, so you can easily revert if you decide not to use this.

    Why do I need to use your CSS?

    You don’t, but because I make extensive use of theme variables, if you want to keep what you have now, you’re more than welcome to, but I won’t support it, and you’ll need to make hundreds of adjustments - up to you. My themes are nice though, so why not use them?

    The remaining additional CSS is relatively simple, but needs to work for both desktop and mobile. It can be found here

    Copy all of this CSS

    Now go to /admin/appearance/customise#custom-css and paste the CSS into the resulting window at the end of the existing CSS you created above. Again, make sure these are set to on

    aabb6fea-ded8-46d9-baaf-de51416e9803-image.png

    CustomCSS folder

    This part is without doubt the most important, and nothing will work without these.

    Copy the main directory from the link above and it’s files to your web server, into /nodebb/public (wherever your NodeBB installation resides). You should land up with a folder that when accessed contains all of the files.

    There are two components to the customcss folder. The most obvious is the CSS files, but inside this folder is a sub-folder called “editors”. This contains CSS files from highlight.js which is used for code syntax in NodeBB. You can get your own themes here

    Inside the main CSS files, we “import” the editor CSS we want - for example

    11faa08c-9387-4710-82d1-338ddcb5eca9-image.png

    Make sure the permissions you set for these newly imported files match what you are using for NodeBB.

    If everything went to plan, then you should have a functional swatch applet / theme switcher. You may need to clear the cache etc if you are using Cloudflare.

    Any issues, let me know.

  • undefined phenomlab referenced this topic on 19 Jul 2023, 17:25
  • Clean and understandable tutorial as usual.

    Already in place for some time since I’ve been working with it for several months 😉

    blink.gif

    Not unhappy to have found this idea of ​​color representation for each theme 😉

  • @DownPW Can’t beat a demo - thanks!

  • Muttley, Híhí, Buồncười, Cười, Khúckhích GIF

  • undefined phenomlab referenced this topic on 19 Jul 2023, 19:39
  • After importing the css, there is a problem with the icons, are other icon packages being used, and how can I change the icons to restore the defaults?

    3300211b-2b82-49af-af30-e69bcd19624e-image.png

  • @veronikya yeah, that’s going to because I am using Font Awesome Pro.

    • Search the CSS for Font Awesome Pro and replace with Font Awesome Free.
    • Search for font-weight: 400; and replace with font weight: 900; (but only in the places where Font Awesome is defined as the font-family)

    I’ll update the code tomorrow. Apologies

    EDIT - CSS file has been updated

  • The theme seems to flicker when the client first opens or jumps to a page, I think it could be put directly into the skin customization of 2.3.2 and loaded on the server, I’ll give it a try!

  • @veronikya it might flicker on load, yes, and that’s normal. It’s because the CSS and JS are loaded before the custom elements, but it shouldn’t be too bad on reasonable links.

    It shouldn’t flicker at all navigating through the site though as the CSS and JS are already loaded.


8/8

28 Jul 2023, 19:29

Related Topics