UI Customization

Objective

Soajs UI can be customized to support user needs. This can be done by replacing theme files inside soajs.dashboard.ui.

Dashboard Files Schema

Folder Schema

soajs.dashboard.ui
- themes
  - default
    - css
    - directives
    - font
    - img

Logo Image Customization

The file favicon.png is the logo file
1. make sure u name the new logo the same file
The file app.css is the css file that is used to customize the css of the the logo.

Example:

app.css

body {
}

a:hover {
    text-decoration: none;
}

em {
}

#header #logo {
    width: 13%;
    margin: 0px 10px;
    font-size: 35px;
}

Logo Name Customization

The file header.tmpl is the where the name of the logo is set.
1. create the file with same name in the directives folder
2. copy the below HTML to the file you created
3. replace ___title___ with the logo of the name you want.

Example:

header.tmpl

<div id="header">
<div id="logo" ng-click="go('/dashboard')"><img src="themes/{{themeToUse}}/img/favicon.png" alt="soajs" width="35px"/>___title___<br /></div>
<div id="pillars" ng-show="enableInterface">

<div class="one-pillar btn-group" dropdown ng-repeat="link in mainMenu.links | orderBy: 'pillar.position'">
<button type="button" class="" id="{{link.pillar.name}}" ng-class="{selected:link.selected}" ng-click="pillarChange(link);">
{{link.pillar.label}}
</button>
</div>
</div>
<user-menu></user-menu>
</div>

SOAJS

UI Customization

Analytics

Objective

Dashboard Files Schema

Folder Schema

soajs.dashboard.ui

themes

default

css

directives

font

img

Logo Image Customization

Example:

Logo Name Customization

Example:

Deployment

Related content