Change styling for specific pages in Joomla 3.x

Question

I want to create a specific page (e.g. On_Line_App.html), where the Javascript (Three.js) editor will run and show the WebGL content to the end user.

If I place it into a module then its rendering context is being clipped by the Joomla styling structure. I want it to cover the whole client area of browser. I'm looking for any way to change this styling, that would be valid solely for On_line_App.html page. The rest of the pages in the web site must retain the original styling.

I found a guide on how to do that, but it's a bit complicated for the novices. Is there any easier way to accomplish this?

Answer 1

If you are looking for a way to cover the whole client area of browser. The simplest way is to create a new template for WebGL content and assign it to a specific page.

You can start with an empty template and add all required resources. In this case, the base footprint is minimal and you do not have to fight against an underlying template to override everything.

Answer 2

You can add custom CSS styling to the pages of your choice using a module called Custom CSS.

All you have to do is to install the module and write your CSS overrides (add !important to your styles if needed, e.g. .mySelector {color:red!important;)

You can hide any element using display:none;, and control the vertical stacking of your elements using z-index:1; if your elements overlap (higher numbers are placed above lower numbers).

Once your CSS is ready, publish the module to any available position, and make sure you set "Menu Assignment" only to the page you want to customize.

More information and other alternatives for styling specific pages can be found in this post.

Note
If you need to make substantial changes to your layout, @Anibal 's suggestion of creating a new template might be a better idea.