Changing the Layout of the UI
One advantage of customizing CSS in themes is that you can drastically change the appearance of the UI with very few overrides. CSS controls the spacing and layout of contents on the page, and by changing a few rules, you can rearrange the default layout in many ways.
There are many CSS attributes that affect spacing, including margins, borders, and edge and corner images. In additions, the various div elements that make up the UI interact with each other, making it hard to set the spacing correctly in some cases. Be sure to look at your overrides on all JasperReports Server pages to verify that the appearance is consistent and correct throughout the UI. |
In the following example, you will remove the logo entirely, move the main navigation further left, and remove the margins and borders on the home page content area.
1. | Create a new theme or modify an existing one. |
2. | If necessary, copy the overrides_custom.css file from the default theme to the main folder of your theme. |
3. | Edit the overrides_custom.css file and add the following CSS rules: |
4. | Upload and activate the new theme with your image and CSS file, then click your browser’s Refresh button. |
The result is a page that has no blue border, thus giving more screen area to the content:
Theme With Modified Spacing to Remove Borders and Margins |
Recommended Comments
There are no comments to display.