@phenomlab many thanks Mark 😁.
Customisation
Looking to revamp your site layout?
Trending
Trending
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.
Thanks for letting me join! Would you be able to share your variables to customize/create a skin? I really like how you have the swatches on the topp right, instead of having to go through settings.
Hello 🙂
I’m trying to find out how the nodebb-plugin-custom-pages plugin works
I have done this :
de4b1295-37a4-4fa3-aa9d-43e6b6105ca3-image.png
575a537c-21e0-4d39-921c-25b9653a7748-image.png
So far so good but how to edit HTML code for this page?
I want some widget code to be able to make a topic post in certain circumstances
I generated an API key under userID 1
but Im unsure where to put this key, in some APIs it would go as a BearerID in the body, and sometimes it goes as a key concatenated to the endpoint…
but its not specified in the docs exactly how to do it
https://docs.nodebb.org/api/write/#tag/topics
Also usually you would expect to have to supply a Method type as POST?
The code is currently along these lines
I wonder if you don’t have to supply the key if its done with an Authentication cookie, but the above code doesnt work.
Perhaps the bodyData parameter is in wrong place?
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
I would like to create my own theme, but dont know where to start really.
In the interim is there CSS that can be added to thin down the whitespace on the header, which takes up half the screen on my mobile.
So here is screenshot of a forum
Screenshot_20230629_120030_Chrome~2.jpg
Although the Title isnt very high there is whitespace below and above it.
And there is even more whitespace before the first category heading.
As comparison, there is also a lot of whitespace on sudonix site, but that banner does contain more graphics.
But its similar in taking up >50% screen before posts begin (on mobile).
Screenshot_20230629_120306_Chrome~2.jpg
What I would like to achieve is the title remaining as it is, but with less whitespace above and below it?
Faced some problem with v3 version as photo;
image.png