app.less
app.less is the main CSS style sheet for the portal. It is written in the LESS dynamic stylesheet language. Customer Portal uses .LESS (dot-less), which is specifically designed for the .NET runtime. LESS allows you to declare variables at the top of the document which can then be used throughout. This feature allows you to make font or color changes in one spot which affect all the subsequent styles where those variables are used. Aside from variables, LESS also allows you to use mixins, operations, nested rules, and other functions to simplify using an external style sheet and promote an easier way to format your UI. Refer to lesscss.org for full documentation.
app.less deployment
The web application contains a special HTTP handler (in web.config) that translates files with a .LESS extension for the browser at runtime. The server translates the LESS file and delivers the file to the browser as CSS. This process eliminates the need to include the less.js file, as indicated in the LESS docs, for client-side CSS translation. For more information regarding this process, see lesscss.org.
Using app.less
For example, you have identified a class in one of the lower-precedence CSS files, such as “.nvtooltip” in nv.d3.css (which controls the display of the chart tooltips), and you want to override it. In app.less, there is a section called “NVD3 overrides” which has a reference to .nvtooltip. Rather than change everything in the associated classes for .nvtooltip in nv.d3.css, you can modify certain style points in the corresponding class in app.custom.less (such as font family/size, width, and so on). This can be done for any selector in any of the external CSS files. If it appears in app.custom.less, it will be seen by the browser first.
app.less information
Most of app.less is sectioned to make after installation customization simpler, and most of the colors and fonts in the application are listed as variables at the top of the file.
-
.navbar .brand. (located in the section of app.less called nav.html) sets the display of the logo in the upper left side of the navigation bar. This variable is used to re-brand the portal with a logo other than Itron’s. The default graphic used by Customer Portal is an SVG (scalable vector graphic) image that can be used in multiple places without needing multiple-sized images. Other graphic formats can be used as well. Simply replace the URL in background with your image and set the background-size. Itron recommends, for the simplicity of layout, that the image you use be either an SVG, JPEG, or PNG image scaled to 72px by 29px.
-
.page-splash .brand. (in the section of app.less called splash page) controls the display of the logo on the splash page. The Itron default image uses the same SVG file, but you can replace it with a JPG or PNG graphic scaled to 352px by 90px. The text below the logo (“Customer Portal”) is hard coded in the HTML in index.cshtml at the root of the application. If you want to translate or change the text, it will have to be done in index.cshtml.