The PUI screens render into a standard HTML file, located here by default::
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:
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:
In this example, we set the dimensions to an 800 pixel width and height and center the content.
Once you have the div centered, there are a couple of considerations that you’ll need to take in putting your screens together so that they will actually look right:
- Content should start hard against the left edge of the screen in the designer. If you have been using a left-aligned template to this point, you may have put some extra space there. When the container is centered, the content will actually appear to be off-center if there is extra space on the left.
- Centering will look best if the content of the screens is designed to consume the entire width you’ve given to the PUI container.
- You may want to consider adding some standard background (maybe a subtle background color or image) to the PUI container. The background color statement in the example demonstrates this.