Where exactly do you put a new theme?

omega

I want to fork persona, learn how it all pulls together and maybe refine it.

What I've done is downloaded the persona theme from here - https://github.com/NodeBB/nodebb-theme-persona

Simple and probably stupid question:

Exactly where do you place you theme folder?

Top level in /nodebb?

<baris>

Inside node_modules folder in the nodebb directory.

omega

@baris of course!

omega

I have a follow on question.

These .less files, they're the CSS of the forum.

I had one change to make, make user avatar Square instead of round - I found the controlling attributes to make the change, however, it appeared I had to go change that in every instance of every .less file, which was a lot of places.

Perhaps I am doing something wrong, maybe there was only place I need to change the attribute.

So while I achieved what I set out to and a bit more, in the instanced of the user avatar, is it a case that you must change every occurrence in every Less file or is there a logic I am missing.

note: I need to research up a little more on .less as I'm only fnma,iar with straight CSS.

PitaJ

Some things are configurable with less variables. Can you give a couple examples of the changes you had to make?

omega

User avatars, was the thing I had to change in multiple places to achieve a square type:

I used inspector to identify what I needed to be changed and I think I got the correct attribute, at least the result was as desired, square avatars!

original:

.user-icon-style(46px, 2.4rem, 50%)

change:

.user-icon-style(46px, 2.4rem, 0px)

Since it required a Rebuild & Restart each time to see the effects, being cumbersome. I changed every instance in every .less file I could find and then ran R&R.

My logic could be very flawed, so I'd like to know the correct approach behind nodeBB styling.

The other change I made (experimenting with formatting posts) was in the topic.less file:

.topic .posts [component=post] {
position: relative;
border: 1px solid lightgrey;
padding: 10px;
margin: 10px;
background-color: #F3F3F3;
}

.topic .content {
margin-top: -15px;
font-size: 15px;
}

omega

Let me say I didn't notice the CUSTOM CSS/LESS screen in the admin control panel!

I dunno what version of the forum that was implemented but I really breezed by it somehow.

This will work much more efficiently for my needs methinks! Hurrah!