CSS broken after update/migration

Hello team,

We recently did a migration from JR4 to JR5 and we found our theme broken after the migration. (I must say Paul has been great during the whole process)

After investigating why the theme was not showing the way it was supposed to, we found that Jamroom is modifying the css files when they get all put together in the include.php file.

For example:
I use titles to explain what we are styling, like this:
/***********************
* SETTINGS MENU *
***********************/
.settings_menu { color:#FFF; }

After the upgrade the css get some of the /*********************** removed and now the sheet won't work, since now it is:

SETTINGS MENU
.settings_menu { color:#FFF; }

I want Jamroom not to modify any of the files are put together for caching. Right now it has problems with the multi line comments on CSS.

Thanks for your help
updated by @maxcinsay: 03/22/14 12:00:09AM

Yeah you cannot use multi line CSS comments like that - each comment line needs to be proceeded by // only.

The only way to prevent JR from merging and handling the CSS is to turn on developer mode in the Developer Tools module (not recommended) or simply just modify your meta.tpl file in your skin directory and put in your own URLs to your own CSS files.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

The way we are adding the CSS is the way you guys suggest it (include.php), Jamroom should support CSS multiline comments since this is a common and standard practice. Using // is not standard in CSS.We include libraries not built by us and they also use multiline comments, that means we have to modify and check each library that we want to add.

Including the links manually means that the functionality that offers Jamroom when using the include.php file is not really that supportive.

As a supporter of Jamroom I have to say that not supporting standards makes the platform more complicated to use.

For files with comments use css_href - then they aren't processed by the core, so you'd want to link to the already minified version. Either in meta.tpl {for a skin) or in a module function using jrCore_create_page_element:


I admit my initial reaction when I first came up against this was exactly the same as yours, but having now used the skin designer I think the trade off (slight inconvenience vs great functionality) is worth it.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

Thank you @SteveX, Im already adding the files manually in meta.tpl.

I still think Jamroom needs to support CSS standards regardless of how users use the platform and also notify how developers mode works, since the only warning I get is that files wont be cache (even tho they stay cached anyway and I have to manually click on the clean cache option when I do a modification)

Developer mode works like this:

That is in the inline help button next to the "run in developer mode" checkbox in jrDeveloper global config. It's the on/off switch which is the first item in jrDeveloper config and you need to check that box in order to run in developer mode. I count that as pretty good notification because I always read the inline help when installing a new module.

If you are already adding the files in meta then all is fine. You only add them through the core if you need them to be minified for you, (you can always add a pre-minified version if you want to reduce the number of calls from meta.tpl, there will be no comments removed).

The main benefit of adding them through the core is that when you format those comments correctly they are used to automatically add user editing of the css in the skin editor - that's the really cool part!!! Check it out! It's an awesome (and easy) way to make your 3rd party css editable in the jamroom acp.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
updated by @ultrajam: 02/17/14 12:16:10PM

Hello @SteveX, I have seen that before, thanks. And the comments were formatted correctly. The point is to support standards.

JR5 does standards very well. Using core skin features is optional, and that particular feature uses comments in css as a form of code.

Pretty soon (this year) we have variables in css (goodbye less and sass), but until then we have some of those in JR5 (some smarty works in those css files), plus the skin designer stuff as well.

If you need it all (ability to add css files with comments in, plus the skin designer capabilities) use the standards: add your css files in head as normal, then add an override stylesheet to the core to make some of those css rules user editable in the acp. Best of both worlds, plus a bit more. When you've tried it all out I am sure you will agree.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

Yeah it would be great to support the /* */ standards in there. It will take effort to implement.

Probably not the highest priority right now, but might make it there in future.

The core is open source, so perhaps it might be provided as a contribution.

Hello @michael, thanks for your answer, I wouldn't mind looking into it and help with this, do you know where the css gets minified? If not, I can look around this weekend. Thank you

I never know anything just offhand (my memory is a bit sketchy ).

What I do to figure out stuff like this is to put a breakpoint in and watch the debugger run through until I find the point im interested in.

I haven't got a debugger with me here right now sorry.

If i did i would put it in /modules/jrCore/router.php somewhere at the top then expect to see it by descending into jrCore_init().

From a quick search I think it could be this area, but not sure:
/modules/jrCore/index.php line 5600 ish

This is probably not too hard for me to get fixed up - I can see other users running into this issue down the road as well. I'll try to get it into the next core update.

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

Okay just went in to check this out, and it's already supported. I added in your exact comment:


and it is working. Can you let me know the CSS file you added that to and what version of the jrCore you are running?

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net