Report Layout Designer

In Survalyzer there is a report layout designer feature as seen in the following screenshot:

It is not available to all users by default, it needs to be requested and turned on for specific users by Survalyzer team.

Read more here about receiving access to Layout Designers.

Changes possible to make with layout editor settings

  1. Report layout header / footer
  2. Color Palette
  3. Font
  4. Favicon
  5. Report page title

Example changes possible to make with report layout editor CSS free input field

You can copy & paste the following code to CSS input field in the report layout editor and adjust it to your brand identity.

Always test results with the target online report that is using your layout. Not all changes will be visible directly in the report layout editor preview.

/* Sidebar Logo */
.da-sidebar-logo img {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(REPLACE WITH IMAGE URL) no-repeat;
    background-size: contain;
    width: 300px;
    /* Width of new image */
    height: 108px;
    /* Height of new image */
    padding-left: 300px;
    /* Equal to width of new image */
    background-position: center;
  }
/* Sidebar Background Color */
div.da-sidebar-content{
      background-color: #336f8d;
  }
/* Navigation Report Title */
sha-report-navigation > div:nth-child(2) > div > h4 {
  color: #fff;
}
/* Navigation Group Headings */
div.da-sidebar-section-head {
    color: #ffffff;
    border-bottom: 1px solid #ffffff;
  }
/* Navigation Item: not Active */
div.da-sidebar-section-item {
      color: #fff; /* font color */
  }
/* Navigation Item: Active */
div.da-sidebar-item-active {
      background-color: #ccdbe3;
      color: #444443;
  }
/* Navigation Item: Hover */
div.da-sidebar-section-item:hover {
      background-color: #6693aa;
      color: #fff; /* font color */
  }
/* Navigation Item: External or Download Links */
.sv-nav-link div {
      color: #444; /* font color */
 }
/* Navigation Item: External or Download Links: Hover */
.sv-nav-link:hover {
    background-color: #ccdbe3;
 }
.sv-nav-link:hover div {
    color: #444443;
 }
/* Sidebar close button */
div.da-nav-close{
    background-color: #66cc99;
    color: #444443;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
  }
/* Sidebar Open Close Mobile */
@media (max-width: 768px){
  div.da-nav-close {
    background-color: transparent;
  }
  div.closed .da-nav-close-arrow{
    color: #6a7d39;
  }
  .da-sidebar-logo{
    display: none;
  }
  .da-close-menu{
    color: #6a7d39;
  }
}
/* Slot Container Shadow and Size */
sha-slot-container {
  height: 100%
}
.da-page-content .da-row {
    margin-bottom: 0.25rem !important;
}
.da-page-content .da-row .da-col  {
 align-content: start;
 padding-left: 2px;
 padding-right: 2px;
}
.da-slot-cont {
    box-shadow: 0px 0px 6px 2px #cccccc;
    margin-left: 5px;
    margin-right: 5px;
    padding: 10px;
    height: 100%;
}
/* Slot Title */
div.da-slot-title {
  	margin-top: 10px;
}
/* Slot Subtitle */
div.da-slot-subtitle {
  	margin-bottom: 20px;
}
/* Dynamic filter dropdown selected color */
.dx-overlay-content .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-active, 
.dx-overlay-content .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-list-item-selected {
	background-color: #000091;
    color: #fff;
}
/* Report Login Page Logo */
.da-login-container .da-login-logo {
    height: 50px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    background-image: url(REPLACE WITH IMAGE URL);
}
/* Hiding Login Page triangles */
.da-body-login {
    background-image: none;
  }
/* Login Button Color */
.btn.btn-success {
    background-color: #66cc99;
    border-color: #66cc99;
    color: #ffffff;
  }
  
/* Login Button Color hover */
.btn.btn-success:hover {
    background-color: #49c286;
    border-color: #40bf80;
    color: #ffffff;
  }
/* Login page background */
.da-body-login {
    background-color: #ffffff;
  }
/* login page link (password forgotten) */
sha-report-login > div > div > div:nth-child(4) > div > a {
  color: #000;
}
Updated on July 1, 2024
Was this article helpful?

Related Articles

Need Support?
Please login to your Survalyzer account and use the "Create Support Request" form.
Login to Survalyzer