Webapps: Maximize content (and remove padding/margin on left and right side)

KNIME Server
5

Hi @spider,

there are a few properties to look out for in styles section of the dev console (the second column in your screenshot).

   --grid-gap-width: 24px;
   --grid-max-width: 1600px;
   --grid-min-width: 365px;

Small disclaimer: These values are not only used on “workflow” pages but also on all other pages.
The first value is responsible for the padding/margin. The second one is the max. width for the center (where the Data App is displayed) and the third property is the min. width.

If you want to persist these changes, you need to create a theme folder in the
<workflow_repository>/config/ folder on the KNIME Server. Create a new folder there (e.g. webportalTheme) and create two new files. The first one needs to be called theme.config and the second can be called anything you want (e.g., theme.css).

Contents of the theme.config:

# Add a custom css file to style the WebPortal 
css_file=theme.css

Contents of the theme.css:

:root {
    --grid-gap-width: 24px;
    --grid-max-width: 1600px;
    --grid-min-width: 365px;
}

Last but not least you need to add following line (if it doesn’t exist) to the knime-server.config file (also available in <workflow_repository>/config/):
com.knime.server.webportal2.theme_folder=<name of theme folder>
so in this example
com.knime.server.webportal2.theme_folder=webportalTheme

Afterwards, you need to restart the server.

Please let me know if there are any further questions.
If you are interested in theming in general, please refer to this guide:
https://docs.knime.com/2021-12/webportal_admin_guide/index.html#theming

Another disclaimer: I’ve only tested this with KS 4.14.1 and I am not entirely sure when these properties have been added but if they are available in the dev console you can also change them via the process mentioned above.

Best regards,
Julian

7 Likes