This section assumes a basic understanding of HTML and CSS styling.

Congratulations, you've just built a functional custom homepage! It looks pretty good, but it feels a little unbalanced since the clocks are so big. Let's make them smaller.

To do this, we're going to change some of the grid size class names, and utilize the Page Specific CSS option for the portal. If you click on a clock widget, you'll see a thin blue line around it. If you look carefully, you'll also see not just one, but two dotted blue lined boxes drawn around it. These are the container borders. There are three containers there:

Select the Container surrounding the clock. Once you've selected the correct element, you'll see the word Column at the top-right of the page next to the three icons:

Click on the edit icon in the top-right of the page (not the top-right of the clock widget). You will see a field called CSS class, and select fields denoting size. Set the CSS class to clock_column, and set Size - md to 2. This will set the CSS class name for the widget object for later manipulation, and make the widget about half its current size. Set all other Size fields to Default, and click Save.

Repeat this procedure with the column container for each clock, and then select the row containing the clock columns by clicking outside of the clock columns to the right or left of the widgets, click the pencil/edit icon again from the top-right of the page, and set the CSS class to clock_row, then press Save.

If you preview the page after following these steps, you'll notice that while the clocks are now smaller, they are all aligned left. Rows have been styled to center content in groups of twelve columns; now that we only have six total columns' worth of content (2 for each clock), we'll need to do something to center them.

In the designer header there are a few more buttons: Edit Portal Properties and Edit Page Properties:

Clicking on either button will open a modal window containing options for the current portal and current page selected. Since we only want to change the clocks on this page, we'll be filling out the Page Specific CSS on the Page Properties modal, so go ahead and click on Edit Page Properties. In the Page Specific CSS field, enter the following:

.clock_row { 
  text-align: center; 
} 

.clock_column { 
  margin: auto; 
  padding: 10px; 
  display: inline-block; 
  float: none; 
} 

This centers the content in .clock_row, and overrides the default float: left property attached to the columns. Your page properties for home should now look something like this:

Now that we've created the new homepage for our portal, go back to Service Portal | Portals, open My Service Portal, and change the Homepage from index to home. Finally, click Save, and when the page reloads you can click on Try It at the top-right or bottom-left, to see your new portal page in action!