UI Customization

Owned by Ragheb Bou Dargham (Unlicensed)
Last updated: May 22, 2019
1 min read

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

  1. The file favicon.png is the logo file 
    1. make sure u name the new logo the same file
  2. 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

  1. 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>


Deployment