View Issue Details

IDProjectCategoryView StatusLast Update
0032792mantisbtcustomizationpublic2023-07-29 15:15
ReporterMother10 Assigned To 
PrioritynormalSeveritytweakReproducibilityalways
Status newResolutionopen 
PlatformAcer Predator 5000OSWin11 HomeOS Version22H2
Product Version2.25.7 
Summary0032792: More flexible way to add your own stylesheet. AND possibility to add *.map-files
Description

Mantis has a parameter:
$g_css_include_file = "css/newskin/SomeTheme.css";

But that always adds the css-file as the FIRST file in the stylesheet list. (pink arrow)

So if you want to add your css file(s) as LAST files in the list, which is where they should be because of Bootstrap and such, you have to do theming, starting from some of examples provided.

Could there be created a parameter to add your file(s) as the LAST file(s) in the stylesheet list? (green arrow)

Using the method in the themes, the *.css files goto the yellow accented area. I would have expected them to go to where the green arrow points.
That is where they belong.

Also, I tried to upload map-files created by compiling my scss file. But they dont seem to be accepted? (even if they are uploaded)

TagsNo tags attached.
Attached Files
Flexible-Stylesheets.png (135,241 bytes)   
Flexible-Stylesheets.png (135,241 bytes)   

Activities

dregad

dregad

2023-07-29 12:06

developer   ~0067925

the *.css files goto the yellow accented area. I would have expected them to go to where the green arrow points

Not sure I understand why that matters.

tried to upload map-files created by compiling my scss file. But they dont seem to be accepted? (even if they are uploaded)

I'm no CSS expert and have little experience with map files, but aren't they loaded by the browser when you activate dev tools, if they are referenced in the .css file ? I don't think they should be linked from your HTML.

Mother10

Mother10

2023-07-29 12:53

reporter   ~0067931

Last edited: 2023-07-29 14:53

Not sure I understand why that matters.

When a browser processes the css files to find the statements to use, it always starts from the top-file (first one in the list) to bottom.
Also inside a file.
So in this case it would start with the file:
mantis/css/default.css

So say you have in the first css-file in the list, something like:
.blue {
color: blue;
}

Everywhere blue is used as a class the textcolor will be blue.
But if in a css.file below that one (in the head of the HTML-file) there is:

.blue {
color: green;
}

Everywhere the class blue is used the textcolor will be green.

This is a trivial example but just to show what happens.

So the sequence of the css-files is very important!!

If a user wants to style Mantis, his/hers css-files should go AFTER the Mantis css-files, so where my green arrow points.
That way he is certain that his changes are used OVER anything that might already be defined in the css-files before his/hers.

Thats why I did not understand that the parameter:
$g_css_include_file = "css/newskin/SomeTheme.css";
turned out to put the css-file IN FRONT of all others in the HTML-HEAD.

In my opinion it should never go there.

About the mapfiles, you can use them to inspect your HTML from inside the browser you use to display your webpages.
They give you the correct linenumber inside the scss files of the specification of that specific class.

About the mapfile processing:
In the yellow accented area you see the css-file AND the accompanying mapfile are processed the same way.
But somehow the browser can only find the css-file (my theme works, so it DID find the correct css-file)
The mapfile gives an error 404.
The directory the mapfile was put in by Mantis looks strange to me, it should be put in the same place as the corresponding css-file.

Also what I dont understand, is why Mantis puts my theme file and the mapfile lines, in that yellow area, where the +.js files go.
I would have expected both of them to go right after the Mantis css-files.

Does this clarify enough?

(I have an explanation of this here: https://www.motherware.com/webdesign/debug-pages/mtw-chrome-devtools-02-screen-explained.php)

map-file.png (6,953 bytes)   
map-file.png (6,953 bytes)   
dregad

dregad

2023-07-29 13:31

developer   ~0067936

OK so you're saying that the $g_css_include_file should be linked last instead of first - I thought you were asking to add a new config to link a second CSS file.

As for the map file issue, the screenshot you've attached references moment.js which is a library bundled with Mantis, and likely unrelated to your changes. I guess we could add the .map file to avoid the error.

Mother10

Mother10

2023-07-29 14:09

reporter   ~0067937

Ah yes I see wrong file screenshotted. But that was also a mapfile so that is in the wrong place too.

If you could do the mapfile the same way as a css file and put it right next to the css-file, that would be great. That is where it belongs.
And yes in my opinion the parameter should add it as the LAST file right after the Mantis css-files.

I asked for a second config param because I didnot know if the original one could en should change the way it acts now.
But if you think changing the behaviour of the original one is not too bad, then yes change the original one.

Great!!! Thanks.

PS, sorry for the wrong quote in the first note, could not find how to do that properly.

atrol

atrol

2023-07-29 14:40

developer   ~0067938

As a side note: Another way for theming is to write a plugin that uses EVENT_LAYOUT_RESOURCES to inject some CSS,
https://www.mantisbt.org/docs/master/en-US/Developers_Guide/html-desktop/#dev.eventref.output.layout
e.g check this one https://github.com/Tagirijus/MantisBTDarkTheme/tree/master

Mother10

Mother10

2023-07-29 14:52

reporter   ~0067939

Thanks atrol, I will keep that in mind!

Mother10

Mother10

2023-07-29 15:15

reporter   ~0067940

Sorry, want to add something to prevent errors.

I looked closer at the xx.min.js.map file.
Until now I never heard of js files having map-files, but I looked it up, they can.

So to be precise:

.css files and .css.map-files should be processed and positioned in the same way in the same directory.

.js-files and .js.map-files should be processed as *.js-files and go in the same directory for js-files.

HTH