Themes: Debugging with chrome-inspector difficulties

dylenbrivera

This is primarily a question pertaining to themes. In reference to the default theme, LESS generates theme.css with all of the separate .less files in both cerulean and vanilla. While using the chrome-inspector to modify css on-the-fly,** I find it extremely difficult to pinpoint which separate .less file is to be edited so that I may modify a desired area of my nodebb theme.** Has anyone else run into this problem? If so, have you discovered a solution which would help others?

cani

I just cloned vanilla theme, renamed it in theme.json. applied it in admin panel. Edited theme.less to include a new less file at the bottom, made new less file, and I just override all the css I want to modify in that file. That way you don't have to hunt down specific sections in the other less files.

Depending on operating system you could use something to find in files. Notepad++, Sublime Text 2, or for linux terminal I just use grep.

dylenbrivera

@cani, I figured it was just the way I was doing things. I'm getting the hang of it and I'm now able to modify just about anything. I'm on a linux system and I've been grep'in all day. lol

julian

Hi @dylenbrivera,

In my experience, we combine all of the LESS files into a single CSS file to reduce the number of calls made. When debugging with chrome inspector, it is easiest just to look at the style directive and then do a search of the files (using Ctrl-Shift-F in Sublime, for example, or grep in Linux), to find the file it is in.

For example, for this section of LESS:

.topic-row.col-md-12 {
    margin-right: 11px;
}

I can search for topic-row in any file in the /less folder using Sublime, or using grep:

$ grep ".topic-row" ./*
./account.less:	.topic-row {
./account.less:	.topic-row {
./category.less:	.topic-row {

dylenbrivera

Thanks @julian. I've been using a similar method since the time in which I started this topic. Everything is working great for me now. I just needed some more time to become familiar with the LESS files. Thanks to all for replying!