[nodebb-theme-designer] Customize your NodeBB theme on-the-fly
-
NodeBB Theme Designer
This NodeBB plugin allows administrators to visually edit the CSS of each template live on the forum. If logged in as an administrator, the "design mode" button appears on the bottom left corner. After activating design mode, right click any element to open up an editor to modify CSS.
Screenshots
Installation
npm install nodebb-plugin-designerMore information available on Github
-
-
Niceeeeee work! I'll check this out asap.
-
Very nice!
-
Edit: Where does it save the changes and is it safe to upgrade without loss of the changes you made?
yup. the changes will take precedence over any theme you select. the custom CSS you build will be added to the header after, so really its no different from adding your own CSS to the core that extends existing styles - just more convenient for people who aren't interested in modifying the LESS files or diving into the core and getting conflicted up the @$$ when upgrading themes.
changes saved into the plugin itself. I'll add a gitignore to the compiled.css so upgrading this plugin won't blow anything up either.
-
@psychobunny said:
conflicted up the @$$ when upgrading themes.
I understand that feel
Might just use this plugin as I can't be arsed to figure out why my themes stopped working.
-
Just pushed 0.0.2 and updated screenshot in OP. Lots of bug fixing and more user friendly. Right click an element multiple times to cycle through parents/children, this should make life easier if you're trying to edit a specific element. Added a button to show all modified CSS so you can just edit anything you want on the page if you know what you're doing.
I was thinking of adding some WYSIWYG to this (ex. drag and drop, colour pickers, etc.) but this may be going too far I dunno. Lets see
@Scuzz what's your workflow when theming? Are you making a child theme based off vanilla or lavender, or are you directly modifying the base theme in itself?
-
@psychobunny Making a child theme from Vanilla. Followed that guide about creating a basic themes. Everything was working fine until the recent updates. Icons disappeared and the new ones didn't show. Some reply buttons didnt show.
The only thing I edited really was a variables.less file to change some of the colours, no templates or anything else.
I will probably try again with these updates so everything is nice and clean.
-
did you run
./nodebb upgrade?
-
@psychobunny yup, it wouldnt run without one.
-
could it be cache? if it was just the variables.less file, yeah you might be able to just get away with starting afresh and copying that file in
-
@psychobunny Nah, I have learnt my lesson with NodeBB and caching, ask @Mr_Waffle
I'll give it a go again soon.
-
Latest version implements some basic WYSIWYG, ability to drag and drop stuff around. I'll have to figure out how to add the ability to customize css for each viewport breakpoint and then we'll really be rocking.
-
haha yeah, the more you right click on an element, the more general it becomes. Probably should implement something like breadcrumbs ala browser inspector to quickly select the element you're looking for
-
Not working on this until plugin weekend v4 at least (really don't have the time to). Until then this is open to requests etc. What would you like to see in this? I imagine more WYSIWYG kinda tools, colour pickers, etc. At least that's the direction I'm looking towards. Let me know
