Themeing... Started with Quickstart got some bad results
-
Thank you all for NodeBB. There is a lot to love about it OOTB, but things start getting a bit funky if you want to make visual/structural changes. I have read every post on the forum about Themes. I have been trying to mildly modify the Harmony Theme to add a Top Nav consistent with the rest of my site, and I got close but.... My code, a duplicated left sidebar, and some strange page geometry appear.
Steps:
- Clone https://github.com/NodeBB/nodebb-theme-quickstart into my sites node_modules/
- Replace references to "quickstart" with my theme name.
- add header.tpl to templates.
- Modify the header.tpl to have my global Nav.
- Modify the overwrites.scss with my css.
- /nodebb build tpl && ./nodebb restart
- Choose theme in appearance/themes
- Rebuild & Restart
It is almost working, but:
The left sidebar is repeating, and the Body is getting locked in. Suggesting that I am not quite in the right place, but I am having difficulty getting there. Once I get thru this, I promise to make an actual tutorial on how to accomplish this without issues.
-
@Chad-Augur said in Themeing... Started with Quickstart got some bad results:
I have been trying to mildly modify the Harmony Theme to add a Top Nav consistent with the rest of my site, and I got close but.... My code, a duplicated left sidebar, and some strange page geometry appear.
I think you could have used a widget for this to achieve your objective rather than modifying the theme - have a look at
/admin/extend/widgetsMy own site at https://sudonix.org makes extensive modifications using widgets, and custom CSS.
-
@phenomlab Thank you. Your solution is pretty close, and if I have to start there, I will. I was hoping to get this nav to appear above everything else. I had not seen that suggested yet. I am in that screen, but I am not sure how to make it do anything.
-
@Chad-Augur If you wanted the header to appear everywhere, you'd need the Global Header which you already have selected. In this case, you can drag the HTML widget shown on the right and drop it into the "Global Header".
You then add the arbitrary HTML you need, and then save it. This new code will then appear on all pages. If you PM me the site you are working on, I can help you with the code and widget placement if you'd like this.
-
@Chad-Augur said in Themeing... Started with Quickstart got some bad results:
I was hoping to get this nav to appear above everything else. I had not seen that suggested yet.
You could easily do that with CSS positioning
-
@phenomlab again thanks–that UI is a bit confusing. Almost got me there, and I could make it work with some CSS, most likely.
-
@Chad-Augur It can be daunting if used fot the first time, but once you get used to it, it becomes easier each time
-
@Chad-Augur harmony already has a header.tpl in the templates folder. https://github.com/NodeBB/nodebb-theme-harmony/blob/main/templates/header.tpl. You can copy this to your custom theme and then add your custom header above the
layout-containerand it should show up above everything else.
-
@baris I did finally getting it working. There was some weird formatting in the code that was breaking things. Thank you for chiming in. The globalnav widget area would be awesome.
-
My theme works but this whole place it in node_modules thing is unstable. Is there a way to steal it so that I am not losing it all the time? Or do I need to get it into a repository so I can simply install it with npm?
-
@Chad-Augur You could use the customize plugin for this -
nodebb-plugin-customize. -
@baris TY. Despite having been a JS developer for more than 10years I had never published my own npm package. Now I have. TY.
-
B baris moved this topic from NodeBB Themes on
