Customizing the Look and Feel

By default, Mashup Builder is set up to use the NETVIBES logo. You can easily install your own logo and switch to your logo to customize your application.

1. Copy your logo into <DATADIR>/webapps/360-edm-mashup-ui/resources/logo/images.
2. Open Mashup Builder: http://<HOSTNAME>:<BASEPORT+1>/mashup-builder.
3. Select the /index page, and then select the Design view.
4. Click the header of the Image widget.
5. On the widget properties panel at the bottom of the page, modify the Image URL path so it points to your logo file.
6. Go to the /search page and repeat the previous two steps.
7. Select the Preview to check your configuration changes.
   Note: The placeholder image inside the image widget does not change.

8. Click Apply.

By default, Mashup Builder is set up to use the standard theme_enterprise theme. You can easily install your own themes and switch to another theme to customize your application.

1. You must customize your own theme in a theme.less file.
2. Add your custom theme in a new directory (for example theme_MyCompany) under <DATADIR>/webapps/360-edm-mashup-ui/resources/themes/
3. Repeat steps 1 and 2 to add more custom themes.
4. In Mashup Builder, click the Application button at the top left of the screen.
5. In Developer Area, click Reload components.
6. In Application properties, select another Theme, for example, theme_MyCompany.
7. Select the Preview to check your configuration changes.
8. Click Apply.

You may want to go further than applying themes to customize the look and feel of your Mashup Builder application. This can be performed either by referencing CSS and JavaScript files, or by entering inlined CSS or JavaScript code.

1. In Mashup Builder, click the Application button at the top left of the screen.
2. From the Styles menu, specify:
   • Style files: Enter the path(s) of the CSS files that you want to use on your application.
   • Style inlined: Enter the inlined CSS code that you want to use on your application (to use CSS directly within your HTML code).
3. From the JavaScript menu, specify:
   • JavaScript files: Enter the path(s) of the JavaScript files that you want to use on your application.
   • JavaScript inlined: Enter the inlined JavaScript code that you want to use on your application (to use JavaScript directly within your HTML code).
4. Click Apply.

You may want to have a different look and feel for one or several pages of your application, and override the theme that is applied all throughout, see Switch to another theme. This can be performed by customizing the CSS of the page(s).

1. In Mashup Builder, select the page you want to customize, for example /search.
2. Select Edit page settings at the right of the screen.
3. From the General section, you can customize the page title with variables and meta headers.
4. From the Resources section, specify:
   • Style files: Enter the path(s) of the CSS files that you want to use on your page.
   • Styles inlined: Enter the inlined CSS code that you want to use on your page (to use CSS directly within your HTML code).
5. From the Style section, specify:
   • CSS ‘id=’ of the body page: The page unique id that will be used in the CSS.
   • CSS ‘class=’ of the body page: The page class name that will be used in the CSS.
6. Select the Preview to check your configuration changes.
7. Click Apply.

You can change the look and feel or the behavior of a page by specifying custom code.

1. In Mashup Builder, select the page you want to customize, for example /search.
2. Select the Code view and in:
   • Styles: Enter the inlined CSS code that you want to use on the page.
   • JavaScript: Enter the JavaScript code that you want to use on the page.
3. Select the Preview to check your configuration changes.
4. Click Apply.

You can change the standard style of widgets by customizing their CSS

1. In Mashup Builder, select the page containing the widget you want to customize, for example /search, and select the Design view.
2. Click the header of the widget, for example Result List.
3. On the widget properties panel, select the CSS tab and specify the following:
   • Widget CSS ‘id=’: Specify the widget’s unique id that will be used in the CSS.
   • Widget CSS ‘class=’: Specify the widget’s class name that will be used in the CSS.
4. Select the Preview to check your configuration changes.
5. Click Apply.

For several chart widgets, you can also set the look and feel from the JavaScript tab by adding custom JavaScript code.

1. For example, if you want to customize the colors used by a pie chart widget:
   • Go to the JavaScript tab.
   • Uncomment the colors line by removing /* and */
   • Specify your favorite colors using their HTML hexadecimal codes. For example: colors: ['#058DC7', '#50B432', '#ED561B', '#FF9900', '#CC33CC', '#660099', '#FF00FF']
2. Select the Preview to check your configuration changes.
3. Click Apply.

For several widgets acting as containers (Tab, Table widgets), you can configure the layout of sub-widgets by adding or merging cells with the cell designer, resize the width of cells, etc.

1. For example, add two charts within a Tab container widget (the Tab widget must be in a Tabs Container widget).
2. Click the Edit widget properties icon and select Edit widget layout.
3. Hover your cursor over the cells (the sub-widgets) to display the cell designer, or between two cells to modify the width of the cells.

   In this example, the width of the Stacked Column Chart widget has been increased to use 70% of the Tab’s width
   
   

4. Select the Preview to check your configuration changes.
5. Click Apply.