Scroll

Styling

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.

Styling Exago's Surroundings

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:

Exago Control Properties

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.

  • ConfigFile – Loads a configuration file other than that created by the Administration Console (ex. ConfigFile="NorthwindConfig.xml").
NOTE. If entering Exago through the Api this parameter is ignored.
  • Language File - Specify which language file(s) to use in place of the ‘Language File’ parameter of Main Settings in the configuration file. (ex. LanguageFile ="es-mx, gettingstartedcustom").
  • ForceIECompatMode – Setting to True will force certain JavaScript functions to working in ‘compatibility’ mode. Currently this property only needs to be set if dragging a Data Field into a cell of the Report Designer does not work properly. (ex. ForceIECompatMode="true").
  • XUaCompat – Setting that controls whether to remove the meta u-ax-comptaible tag when running reports to PDF in IE8. The default is ‘false’ which removes the tag. If you are experiencing issues downloading PDF reports in IE8 setting this flag to True may resolve the issue. (ex. XUaCompat="true").

Changing CSS

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 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:

Changing Icon Images

To further Exago’s integration capabilities, any icon in Exago can be changed on a per-company or per-user basis:

  1. Create the custom images you would like to display.
  2. Identify the Id of the image you want to change. See Finding Image Ids for more details.
  3. Create a language file that maps the Ids to the location of the custom images. See Multi-Language Support for more information.
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'); }

Hovering Images

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:

  1. Follow the steps above to create the non-hover icon.
  2. Create the custom icon with the hover effect. Save it to have the same name as the non-hover icon and append “_h” to its name.

Finding Image Ids

To find the Ids of icons in Exago:

  1. Open Exago in a browser.
  2. Use the browser’s developer tools to inspect the icon you want to change. For most browsers this can be done by pressing F12.
  3. Look at the id property of the icon. There will be several words separated by underscores. Use the last element as the image Id (see example below).

Hiding the Exago Logo

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; }

Styling the Administration Console

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:

  1. Make a copy of ExagoHome.aspx and give it a unique name (ex. CompanyAdmin.aspx)
  2. At the top of this copy change the source from WebReportsCtrl.ascx to WebAdminCtrl.ascx (see example below.
<%@ Page Language="C#" EnableViewState="false" %>
<%@ Register src="WebAdminCtrl.ascx" tagname="WebAdminCtrl" tagprefix="wr" %>
  1. Modify surrounding styles and css in the same manner described in the sections above.

 


Hidden Article Information

Article Author
Alex Agoado
created 2015-12-15 15:57:47 UTC
updated 2017-08-03 14:03:35 UTC

Labels
styling, stylization, css, branding, rebranding, icon, changing icons,
Have more questions? Submit a request