Visually modifying and rebranding the user interface is a simple but effective step toward integrating Exago into the host application. For styling purposes Exago can be thought of as a control that sits within a div on an .aspx page. Aesthetic changes can be made for single users or groups of users by directing each user/group to different custom .aspx pages.
To visually integrate Exago make a copy of the .aspx example below and modify the elements surrounding the Exago control or override the CSS of the user interface itself.
NOTE. Do not make changes directly to ExagoHome.aspx as they will be overwritten during upgrades. Instead use the example below to create a custom .aspx page.
The example below demonstrates an .aspx page that contains the Exago control. In this page, some built-in CSS is un-commented in order to hide the Exago logo.
<%@ Page Language="C#" EnableViewState="false" EnableEventValidation="false" %>
<%@ Register src="WebReportsCtrl.ascx" tagname="WebReportsCtrl" tagprefix="wr" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Exago</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html, body { height:100%; width:100%; margin:0; padding:0; overflow:auto; background-color: #FEFDFD; }
html { overflow: hidden; } /* Prevents "bounce scroll" on the body in MacOS and iOS */
#WebReportsContainer { position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; }
/*
The optional wrMainCompanyLogo style override is in the head of the document because we want
the browser to load the style before the image is loaded so that the image does not
briefly appear on-screen before the style applies as the page is loading. Other style
overrides may be put in the body below so that selectors of the same specificity as
existing Exago selectors will take precedence.
*/
div.wrMainCompanyLogo {
display: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="WebReportsContainer">
<wr:WebReportsCtrl ID="WebReportsCtrl" runat="server" />
</div>
</div>
</form>
<style type="text/css">
/* Styles can be overidden here like this: .wrDynamicTabItemSelected { color:red; }
Please duplicate this file (ExagoHome.aspx) to your own aspx page, since this file will be recreated during next install
See technical guide for additional information */
/*
Uncomment the following styles in addition to the wrMainCompanyLogo override in the head section
to remove the company logo from the left-hand sidebar */
.wrMainReportsContainer {
top: 111px;
}
.wrMainTbContainer {
margin-top: 10px;
}
</style>
</body>
</html>
The effect of these changes is seen below.
Original:
New:
Within each .aspx page several properties can be set on the Exago Control to modify various settings and behaviors of Exago. The following properties can be set.
NOTE. If entering Exago through the Api this parameter is ignored.
All of the CSS used by Exago can be modified at the bottom of the .aspx page. This means that every individual element or class of objects can be modified. To do make changes, add <style type="text/css"></style> to your .aspx page in the line above </body>. Between these style tags place the desired modifications to the CSS.
The table below details the recommend CSS classes for styling.
Class |
Feature |
Property |
Example |
Text Elements |
|||
.wrMain |
Modifies text throughout Exago. |
color |
.wrMain { color:Red; } |
.wrInputText |
Modifies the text of input boxes and dropdowns. |
color |
.wrInputText { color:Blue; } |
.wrTree |
Modifies the text of tree controls such as the reports in the Main Menu or the Data Fields in the Report Designer. |
color |
.wrTree { color:Green; } |
.wrTreeItemSelected |
Modifies the selected item in a tree control. |
color |
.wrTreeItemSelected{color: yellow; }
|
.wrTabItem |
Modifies the text of unselected tabs. |
color |
.wrTabItem { color:Aqua; } |
.wrTabItemSelected |
Modifies the text of the selected tab. |
color |
.wrTabItemSelected{color: #FF00FF; } |
.wrDialogTitle |
Modifies the text of the title of dialog menus |
color |
.wrDialogTitle{color: Orange; } |
Background Elements |
|||
.wrMainLeftPaneGradient
|
Modifies the gradient at the top of the Main Menu |
background
|
.wrMainLeftPaneGradient{background: -webkit-gradient(linear, left top, left bottom, from(white), to(Blue));} |
.wrMainLeftPane
|
Modifies the background of the Main Menu |
background-color |
.wrMainLeftPane{background-color: Blue;}
|
.wrTabContent
|
Modifies the background of all Tabs |
background-color |
.wrTabContent{background-color: Blue;}
|
.wrTabContentWizard
|
Modifies the background of all Wizards (ex. the New Report Wizard) |
background-color |
.wrTabContentWizard{background-color: Blue;}
|
.wrDialogShadow
|
Modifies the background of all dialog menus (ex. the Filters Menu) |
background
|
.wrDialogShadow {background: -webkit-gradient(linear, left top, left bottom, from(white), to(Blue));} |
.wrPopupMenu |
Modifies the background of all popup menus (ex. the Folder Management Menu) |
background |
.wrPopupMenu{ background: -webkit-gradient(linear, left top, left bottom, from(white), to(blue));
|
.wrDesignLeftPane
|
Modifies the background of the Data Field Menu in the Report Designer |
background-color |
.wrDesignLeftPane{background-color: Blue;}
|
.wrDsgnTbContainer
|
Modifies the background of the Report Designer |
background-color |
.wrDsgnTbContainer{background-color: Blue;}
|
.wrTabItem
|
Modifies the background unselected tabs |
background-color |
.wrTabItem{background-color: Blue;}
|
.wrDsgnTbSection
|
Modifies the gradient behind the buttons on the Report Designer |
background
|
.wrDsgnTbSection{background: -webkit-gradient(linear, left top, left bottom, from(white), to(Blue));} |
Selected Elements |
|||
.wrTabItemSelected
|
Modifies the selected tab |
background
|
.wrTabItemSelected{background: -webkit-gradient(linear, left top, left bottom, from(white), to(Blue));} |
.wrTreeItemSelected |
Modifies the selected item in a tree control |
background-color |
.wrTreeItemSelected{background-color:Purple; }
|
.wrPopupMenuItemHover, wrPopupMenuItem:hover
|
Modifies the selected item popup menu (ex. the Report Folder Management) |
background-color |
.wrPopupMenuItemHover, .wrPopupMenuItem:hover{background-color:Purple; }
|
.wrTbImgHover, .wrMainTbImgHover, .wrTbImg:hover |
Modifies the background of tool bar images when they are hovered over. |
background-color |
.wrTbImgHover, .wrMainTbImgHover, .wrTbImg:hover{background-color:Orange;}
|
Other Elements |
|||
.wrImageButton, .wrButton1
|
Modifies the buttons (ex. Ok, Cancel) |
background |
.wrImageButton, .wrButton1 {background: -webkit-gradient(linear, left top, left bottom, from(white), to(Blue));} |
.wrLine
|
Modifies the lines used throughout Exago |
border-top, border-bottom |
.wrLine{border-top: solid 1px #55D8F2;border-bottom: solid 1px blue;}
|
.wrDialogDragBar
|
Modifies the bar atop all dialog menus (ex. the Filters Menu) |
background |
.wrDialogDragBar{background: -webkit-gradient(linear, left top, left bottom, from(white), to(Blue));} |
.wrMainReportDescriptionContainer
|
Modifies the report description in the Main Menu |
border |
.wrMainReportDescriptionContainer{border: solid 1px blue;}
|
The code below demonstrates an example of custom CSS styling.
Code:
<style type="text/css">
.wrMain { color:Red; }
.wrInputText { color:Blue; }
.wrTree { color:Green; }
.wrTreeItemSelected { background-color:Purple; }
.wrDynamicTabItemSelected { color: Pink; }
.wrDialogTitle { color: Orange; }
.grRh { color: mediumaquamarine; }
.grNum { color: sandybrown; }
.wrGridTbl thead th { color: cadetblue; }
.wrTabText { color: dodgerblue; }
</style>
Before:
After:
To further Exago’s integration capabilities, any icon in Exago can be changed on a per-company or per-user basis:
Ex.<element id="ExportTypeMenuHtml" image= "Config\Images\Custom\HTMLExecutIconLarge.png"></element>
Alternately, you can use the css content tag to override individual images:
img.ExportTypeMenuHtml { content: url('Config/Images/Custom/HTMLExecutIconLarge.png'); }
For icons that have hover effects (ex. the next page button on report output) there is a special naming convention.
To change custom icons with hover effects:
To find the Ids of icons in Exago:
You can use the following code to hide the default Logo in a custom home page:
<head> Styling
div.wrMainCompanyLogo { display: none; }
<body> Styling
.wrMainReportsContainer { top: 111px; }
.wrMainTbContainer { margin-top: 10px; }
Though we strongly recommend against exposing the administration console to end-users or clients, it can be stylized much like the Exago interface.
To style the administration console:
<%@ Page Language="C#" EnableViewState="false" %>
<%@ Register src="WebAdminCtrl.ascx" tagname="WebAdminCtrl" tagprefix="wr" %>