LIFERAY 7.2 GA1 Theme: My custom scss style impacts the default Liferay Menu ( in the left hand side and in the top )

Question

I have a problem when developing a new Liferay 7.2 theme based on gradle as a build tool, the problem is when I added a custom css in the file _custom.scss in order to customize some styles within my theme, the default liferay admin Control panel and Menu( in the left hand side and in the top ) are looking very bad and my theme looks not Responsive(I mean the style and there are buttons which are not displayed anymore example the toast-animation-btn is not visible ).

From my perspective, maybe my custom css ( because I have a large css file it is kind of Migration from 6.2 --> 7.2) is impacting the default liferay portal things --> this is just my opinion and maybe I could be wrong...

Otherwise, if my reasoning is true please How could prevent my styles to impact liferay default menu?

Answer 1

A whole lot of things have changed between 6.2 and 7.x html markup. I would strongly advise testing each small css feature independently and rewrite the one that is not compatible anymore. By feature I mean all css code related to a specific portlet or section of your template.

Also the theme template themselves have changed a lot and are not strictly compatible. In this case I'd suggest starting with a new theme templates and bring back one by one the customization, you made in it. Also look at the new content page feature: https://portal.liferay.dev/docs/7-2/user/-/knowledge_base/u/creating-content-pages You might be able to replace many theme customization with them in a more maintainable and web admin-friendly way.

That being said if you just want to isolate you sass code from impacting the admin menu, in the default template there is no quick way to identify the content section of the page (well, there is #wrapper and #content, but they are too generic and present in the admin page as well) I'd suggest that you add an id at the right level of your own template. After that just embed all your sass code inside that id.