Note |
---|
|
As of July 25th, 2023, there is a content freeze on this page. |
The PUI screens render into a standard HTML file, located here by default:
/www/profoundui/htdocs/profoundui/userdata/html/start.html
In this file, you’ll see that there is a standard HTML <div> element with id “pui” that the content renders into. Using CSS, you can apply styling on this <div> element to center it on the HTML page. This can be done without modifying the HTML page itself.
Profound UI includes a facility for auto-loading CSS files into the template at runtime. For example, you can create a file “myfile.css” and place into this folder:
/www/profoundui/htdocs/profoundui/userdata/custom/css
Any CSS files located in the /custom folder or a sub-folder will be auto-loaded.
To center the PUI screen container, you need to give it a fixed width and height and set left and right margins to automatic.
You can do that by adding the following lines to your CSS file:
Code Block |
---|
|
div#pui {
width: 800px;
height: 800px;
margin-left: auto;
margin-right: auto;
background-color: lightgray;
}
|
...