Customisation

Hi @phenomlab

As seen in pm, I open this topic to follow the 2 following ones:

https://sudonix.org/topic/200/nodebb-reply-button-arrow-answer/24

https://sudonix.org/topic/179/nodebb-css-style-sheets-selectbox/109

– For the submit button, on new Topic and reply to a topic, ll work great with default theme (CSS code in ACP) but I end up with some bugs on my Custom themes 😞

– I copied your code for the button in the ACP/custom CSS (for default theme)

.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) { margin-left: -3px; } .btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle):hover { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } button.btn.btn-primary.composer-submit:hover { border-top-right-radius: 4px !important; border-bottom-right-radius: 4px !important; } .btn .caret { margin-left: 2px; } .btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; margin-left: 0px; }

– Ref to the topic I add this :

.btn-primary { color: #fff; background-color: #337ab7; border-color: #337ab7; }

– After several hours of testing and research, I think I have variable conflicts in the custom CSS and I can’t get by anymore 🙂

I list the bugs below to fix here.

I can give you access to modify the CSS file as you wish and do some tests.
A backup of the file is made so it doesn’t matter.

If you can help me with one CSS and explain what you do exactly (delete, add, modfy), I can reproduce on the other themes

!! I give you access and information on PM !!

Bug found. (Maybe other, if you can see that too).

– Problem due to small hack, can be avoided by changing hover color (color a bit darker like in default theme) or other hack:

Reply button topic

– Same problem on chat edit button:
chat edit button

– Same problem on advanced search/Save preference button:
Save preference button

Thanks in advance

Hi Mark,

I’d like some help customising two forums running NodeBB please if possible.

I wish to change the colours of the buttons below.

1000005618.png

And how can I change the board stats widget to look similar to this…

1000005620.png

As always, thank you! 🤝.

Hello @phenomlab

I use fancy box like you on my nodebb Instance but I have no zoom when I click on a image :

cbf55d20-98de-4294-8117-f82a73355fe6-image.png

I would like to include a zoom button like you and on Sudonix but with the possibility of zooming several times (once on your site) because I have image with little text

Here my code :

Header:

<!-- Fancybox --> <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"/>

JS :

// ------------------------------------------ // Fancybox Media Reader // ------------------------------------------ if (top.location.pathname !== '/login') { $(window).on('action:posts.loaded', function(data) { console.log("Polling DOM for lazyLoaded images to apply Fancybox"); $(document).ready(function() { $('a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate"); }); }); }); } if (top.location.pathname !== '/login') { $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { this.$('a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate"); data.preventDefault() // Strip out the images contained inside blockquotes as this looks nasty :) $('blockquote img').remove(); }); Fancybox.bind( 'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]', { groupAll: true, } ); }); }); } // Chat fancybox - fires when chat module loaded and AJAX calls new chat $(document).ready(function() { $(window).on('action:chat.loaded', function(data) { this.$('img').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { var newHref = $(this).attr("src"); $(this).wrap("<a class='fancybox' href='" + newHref + "'/>"); $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate"); data.preventDefault(); // Strip out the images contained inside blockquotes as this looks nasty :) $('blockquote img').remove(); }); Fancybox.bind( 'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]', { groupAll: true, } ); }); });

Can you help me for this ?

@phenomlab
Do you have any plan to move Sudonix to the Fediverse verison of NodeBB?
Ive done a few tests and finding it quite an intellectual challenge, how far down that road are you currently?

Hello friends,

It’s been a long time since I’ve been on Sudonix and I’m sorry (lots of things to do and I’ve resumed some studies since I was 38 :))

To make up for it, here is a little script that I managed to create with ChatGpt and other sources. (I’m not a great dev)

I think code it’s correct and don’t hesitate Mark @phenom if you see anything.

I’m looking for ways to improve it but it’s functional.

Here is what I would like to update:

The effect works almost everywhere except when you are in a topic. It would be that it also works in a topic therefore. I would also like the effect to work on the entire page. For the moment the left and right navigation bars are ignored without me really knowing why.

Despite everything, I find the effect quite nice and cool 🙂

Mark, if you can make the 2 missing points work, I’m in!!!

See you again!!

here the code :

https://github.com/DroidBV8/nodebb-glitch-refresh/tree/main

Hi Mark,

I’m trying to customise the nodebb-plugin-recent-cards widget that I have on my forum, I would like it to show … at the end of box so it doesn’t look so untidy, is this something that’s possible?

1000003024.png

Thanks as always 😃

hi @phenomlab , when the forum is used as PWA, there is no easy way to navigate between pages…

Several days ago, I was reading a post on a forum that mentioned another topic, I have encountered an issue when attempting to return to the original post. So, after reading the linked topic, I had to go to categories page and retrace my steps to locate the topic I was reading initially…

Although this can be achieved by page control arrows on destop and mobile browsers, there is no easy way to achieve this on PWA… so I wonder if you can help me adding some page control buttons that appear at the bottom of the page when scrolled up. (maybe it can be integrated to post navigation bar but I believe those buttons should appear in all pages, not only in topics)

Here is just some suggestions to distinguish them from other arrows…

alt text

alternatively the arrows or rewind icons that YouTube uses can be used:

alt text

Hi @phenomlab ,

I am working on CSS codes to customize the link-preview plugin for some time, but I was unsuccessful 😄 so, I wanted to consult you in case I am missing an important line…

Unfortunately, normal previews of this plugin are too big for our taste, just like how iframely used to be…

https://sudonix.org/post/4083

I ended up something like this:

.post-container .content .card { display: contents !important; } .link-preview { .card-img-top { height:120px !important; width: auto !important; overflow: hidden !important; float: left !important; padding: 0 5px 0 0 !important; } .card-body { padding: 1px 1px 1px 1px !important; } .card-footer { position: relative !important; } }

But this is nowhere near close to what I was aiming…

This is how it used to be with iframely and what we are aiming:
Screenshot 2024-04-02 at 22.04.41.png

This is how ugly it looks right now 😄

Screenshot 2024-04-02 at 22.02.51.png

I hope you can help with this transformation 😄
Thanks,

Hi @phenomlab , how are you?

I have an info icon because of the glossary plugin, however, the icon is not at the place where I want it to be… I made it smaller with this code, however, I also want to change its position, I think I prefer it further above, on the upper right corner of the word. Do you know which codes should I use?

Screen Shot 2022-01-30 at 4.55.37 PM.png

.glossary-wrapper { .fa-info { font-size: .500em; } }

Hi , I am talking about the moved labels with arrows on the badge that is listed on topics list… how can I target them with CSS?

Screenshot 2024-03-21 at 15.09.36.png

Hello, what would be the CSS codes to prevent voting panel (the one on the right bottom of the posts) to disappear in standard NodeBB? It is annoying that it disappears constantly 😄 You have them very good on sudonix…

Hi @phenomlab ,

I am trying to make this menu panel longer… What is the easiest way to do this?

Screenshot 2024-03-07 at 19.03.19.png

What is the best way/plugin to have custom badges like the twitter blue check mark?

blue verified.png

@phenomlab I see you have these colorful ones… which are quite close:

Screen Shot 2022-11-16 at 11.54.02.png

Hi,

I would like to ask how to style the tool tip in nodebb-plugin-user-level, that appears when you click on the user level icon. I just want to change some text styling. I’m trying to target it with the dev tools but can’t see any changes to the DOM.

Btw it seems that on your site you removed the level in form of text, it looks nice and minimalistic but the tool tip information doesn’t make much sense to me.

edit: I think I got it, after the stars there come different medals right? I like the star system 🙂

Screenshot 2023-10-09 211928.png

On this forum there is this bar
Screenshot_20230705_190131_Chrome~2.jpg

Have to be honest, I don’t like it for a few reasons.
It gets in the way, and its % reading is meaningless, as it may go up to say 70% then more posts load and it drops to 34% for example. So it doesnt tell you how far through the full list you are anyway.

I referred to it as the progress bar previously, when trying to remove it. Is that correct name?
I believed it was a ‘core function’ but I see the Nodebb’s own forum doesnt seem to have it on its home-page now?

Hello @phenomlab

I see this effect on link here.

64ce4a20-4dbf-468f-9180-38e657810970-image.png

I research how to do this or other effect and i found this code for example on css tricks

a { position: relative; } a::before { content: ''; position: absolute; width: 100%; height: 2px; border-radius: 2px; background-color: red; bottom: 0; left: 0; transform-origin: right; transform: scaleX(0); transition: transform .3s ease-in-out; } a:hover::before { color: red; transform-origin: left; transform: scaleX(1); } a:focus, a:hover { color: red; }

The effect is good but he is active on reply button, quote, reply to, username and I don’t want that… Just on post (url, @mention)

And you, what is your code ?

What is the easiest way to add multi-language banners? Such as the banner in chat boxes or HTML boxes in general…

Screen Shot 2023-09-01 at 15.21.59.png

Our users are mainly either from Turkey or from the USA, so I would like to show Turkish banners to users in Turkey, and the rest will see the banners in English. I wonder what would be the easiest way to achieve this?

Hi Mark
My users who are using profil photos also indexed by google.
Generally they are using real photo byself but they do not want to shown in google.
How can fix it?

When I to google site on my browser, there are some icons of sites previously visited.
Screenshot_20230801_211949_Chrome~2.jpg

I cant get the default nodeBB icon to change here, even though I uploaded a favicon.
In the Admin menu, is this icon called something else?

How did you add these reputation stars? Are you using groups?

c310c1b2-c375-4f6b-b306-5df40bb8b60a-image.png

I remember reding a thread on here but cannot find it.