In this tutorial you will learn how to append link to specified reports to BellaDati top menu. Example of this menu can be found below:

Following steps describe how to create similar menu:

  1. Go to domain administaration
  2. Select option Custom HTML and copy following code to the section At the end of <head>

    <script>
    window.onload = function() {
    $(".topbar").append('<div class="menunavigation"><ul><li><a href="/bi/reports/report1">Name of report 1</a></li><li><a href="/bi/reports/report2">Name of report 2</a></li><li><a href="/bi/reports/report3">Name of report 3</a></li></ul></div>');};
    </script>

  3. Update links and name of the reports in a tag. Report alias is used in this example.
  4. Save the settings of Custom HTML.
  5. Click option Look&Feel settings
  6. Copy code below into the field CSS Stylesheet (this will customize the look of the new menu)

    .menunavigation {
    margin: auto 0;
    width: 100%;
    font:18px;

    }

    .menunavigation > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
    }

    .menunavigation li {
    display: inline-block;
    position: relative;
    }

    .menunavigation a {
    color: #fff;
    display: block;
    text-align: center;
    font-size: 13px;
    text-decoration: none;
    padding-left: 20px !important;
    padding-right: 20px !important;
    }


    .menunavigation a:hover {
    color: #fff;
    background: #00A0DF;
    border:5px solid bottom #ffffff;

    }
    .menunavigation .current{
    color: #fff;
    background: #009ee0;
    }

  7. Save the settings

  8. Logout and login again.

    Settings will be applied after next logout and login.

 

  • No labels