how to edit SCSS / CSS?

[Stefan-59]

Hi there,
I like the standard-CSS of engage, but unfortunately indentation of nested comments doesn't work:
https://i.imgur.com/gGhSbPy.jpg

When I switch to custom CSS, Engage uses the dark mode of my Browser, what doesn't make much sense:
https://i.imgur.com/ZDj3d5L.jpg

Question:
How can I either change my Sites' CSS, so that indentation of nested comments are working (with the standard template it's all fine with the Engage CSS: https://i.imgur.com/Ijfe3j5.jpg) or edit my custom CSS?
I already copied the files to /templates/YOUR_TEMPLATE/css/com_engage, but I don't know how to compile the SCSS to CSS.
If I understand it right, I HAVE to edit the SCSS and then compile it to CSS, because Engage uses only the CSS files.

Any tips are welcome!

Stefan

[nikosdion]

Indeed, you need to edit the SCSS and compile to CSS. You could use something line Scout-App to do that.

[Stefan-59]

Thank you!
I found some online-services that do the same, so I can help myself IF I want to create a custom CSS.

Point is:
I like the standard CSS, which looks perfectly fine when I switch to the cassiopeia fontend-template: https://i.imgur.com/y6ZpGUT.jpg

When switching back to my own template (based on T4 bs5 blank), it looks like this: https://i.imgur.com/Ttf0q4W.jpg
(no indentation, labels in the same line as input boxes).

Question:
How can I find out, which parameters of my template are causing the problems, so I can change them and stick with the Engage default template?

[nikosdion]

There is no standard CSS; we just use the CSS classes provided by Bootstrap 5, the CSS framework used by Joomla! in Cassiopeia in Joomla! 4 and 5.

Your third party template does not have these classes. Therefore, you need to use a custom CSS file. That's why we provide the custom CSS file, and the SCSS to customise it.

Your problem was the automatic switch to dark mode. Remove the entire @media (prefers-color-scheme: dark) block from the SCSS and recompile it.

[Stefan-59]

Ah. that makes sense!
I already figured out myself (beingproudofmyself 😉) that deleting the section @media (prefers-color-scheme: dark) would do the trick with the dark mode.

But now I have the labels in the same line with the input fields and no editor toolbar.
How could I fix that, so the appearance is similar to the standard view (labels one line above the input boxes, input boxes left aligned)?
https://stefan-schoch.de/medien/blog/test-artikel.html

[nikosdion]

That's a bit beyond the CSS advice I am comfortable giving. Just playing with dev tools in Firefox:

form#akengageCommentForm div.control-label { float: none; }
form#akengageCommentForm div.controls { margin-left: 0; }

Anything beyond that, well, it's your site, it's your vision, you get to write the CSS you think works best :)

[Stefan-59]

That already helps a lot and I will find my way through the other topics.

Thank you a lot!
Great product, great service, I love it! (will do a positive Feedback on the Joomla extensions site)

[nikosdion]

Thank you! I am glad I could help you!