Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.



Note
titleContent Freeze

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
css
css

div#pui {
  width: 800px;
  height: 800px;
  margin-left: auto;
  margin-right: auto;
  background-color: lightgray;
}

...