This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson we'll learn about how to style VBCS applications.

All styling in VBCS applications happens manually in CSS. There are no declarative features for changing the display of text or images. As all VBCS applications are just JET applications, they use JET Themes to style the applications.

When styling your VBCS or JET applications, it is important that you use theming correctly to do so, otherwise you run the risk of finding that your re-styling breaks when you upgrade your platform versions.  JET components provides a styling API through the use of SASS only, and any directly styled oj-* component selectors or other approaches will not be supported. This is because the internal structure of JET components, and the styles that they use, are subject to change from release to release. The published set of SASS variables constitutes a stable supported API that will internally re-map the configuration as required by internal changes within the JET implementation. Read the JET Dev Guide on Themes for more information.

By default, all VBCS applications use the Alta UI Theme. VBCS applications have a built-in app.css file that you can use to define additional styling on top of the main Alta theme. For example, if you have made a <div> clickable, you may want to add a class called "clickable" to the div and define the CSS for the class so that it's highlighted, the cursor changes to a pointer when you hover over it, etc.

If, however, you want to style the core elements of a VBCS theme, you should use SASS variables and generate the CSS rather than coding against the DOM elements directly using oj-* selectors in app.css. The reason is that the internal DOM of JET elements can and does change between releases of JET. Therefore a CSS that worked in one release may not work in another. SASS variables insulate you from these changes.

Updating Your Project

This lesson builds on the Expense Report project we have been using in the VBCS Learning Path. If you are starting at this lab, go to Building Your First VBCS Application and follow the steps to import the project, then continue below.

  1. Download this ZIP file to your computer.
  2. In your project, click the menu in the top right and choose Import Resources.
  3. Drag and drop the ZIP file into the dialog. Select Delete existing files and resources and click Import.

Using Custom Classes in VBCS CSS

Let's define a custom class to style clickable text in VBCS. As you can see when you open the main-start page, I've changed the list in the Expense Reports to have a clickable <h3> title for each expense report that navigates to the Edit page for that record. I've also added the custom class "clickable" to the div.

In the Web Apps panel, open Expenses → resources → css → app.css and add the following code:

.clickable {
	color: #07C;	
}
	
.clickable:hover {
	cursor: hand;
	cursor: pointer;
}

Go back to your main-start page and reload the page in the Page Designer.

Using a Custom Theme

We won't go into how you actually create a new theme in JET. For that you can read the JET Dev Guide on Themes and try out the JET Theme Builder. The JET Theme Builder will generate a theme that looks like these:

To use this theme in your application:

  1. In the Web Apps panel, expand Expenses → resources and right-click the css node. Choose Import. Drag and drop one of the above ZIPs and choose OK. For the Stealth them, for example, you should get a directory structure like this:
  2. Switch to the Source View panel and click index.html to open it in the code editor:
  3. Change the link to the CSS file to: 
     <link type="text/css" rel="stylesheet" href="resources/css/stealth.css">