CSS styling

If you feel that the current dashboard's look and feel is not so good, you can improve them through the CSS styling. The CDE editor has an embedded editor that lets you code in CSS without an additional tool.

The following steps will help you use the embedded editor to change the dashboard's look and feel:

  1. In the CDE editor, click on the Layout menu.
  2. Now click on the Add Resource icon in the layout structure panel.
    CSS styling
  3. The pop-up dialog appears, choose CSS, then External File and click on the OK button.
  4. Type in the following values:
    • Name: Chapter 5
    • Resource File: chapter5addition.css (click on the arrow button and choose the Chapter 5 folder, then click on the OK button and type in the value)
    • Type: Css
  5. Click on the edit (...) button next to the Resource file textbox, and an embedded editor dialog appears.
  6. Type the following CSS text in the editor and click on the Save button:
    #Filter_Panel_1 {
  width: 100%;
  background: url(down_arrow_select.png) no-repeat right #fff;
  border: 5px transparent #ccc;
}

#Filter_Panel_1 select {
  width: 100%;
  color: #00508b;
  overflow: hidden;
  -webkit-appearance: none;
  background: transparent;
  border: 2px solid #68c6ed;
}

    Note that every ID in the layout also becomes an identifier for the CSS style. The code will render the listbox in Filter_Panel_1 with a custom color and down arrow. The following diagram shows the filter listbox before and after the CSS styling:


    CSS styling
  7. Open your dashboard and you should see the final look and feel of the dashboard something like in the following screenshot:
    CSS styling
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset