Add image with style class

Add an image or logo to the application using a style class.

1. Open the project_dir/customization/custom_project_dir/js/MyHeaderBarWidget.tpl.html file with a text editor.
2. Inside the div element add an <img> tag, and set its class attribute to the mylogo style. Save your changes.

   <div>
     <img class="mylogo"/>
     Applications started: <b class="MyHeaderBarWidget-counter"></b>
     <span data-i18n="mycusto.window.currentTitle"></span> : <b class="MyHeaderBarWidget-title"></b>
   </div>

   Tip: If the logo is to appear on the right-hand side of the title, add the img element after the window title in the <div>.
3. In your project_dir/customization/custom_project_dir/scss directory, add a new style sheet scss file, called MyHeaderBarWidget.scss. In this scss example we define the mylogo style class.

   /* Header bar */
   .mylogo {
       width: 50px;
       height: 50px;
       background-image: url("../resources/img/my_logo.png");
   }
   

   You can see:

   • The .mylogo style class has settings for the size of the logo.
   • The background-image property sets the URL for locating the image file.
   Note: As scss stylesheets are compiled in the main.css in the css directory, the path to a resource is set from the main.css of your distribution to the resource using relative path (../).
4. Open your project_dir/customization/custom_project_dir/MyMainContainerWidget.js file. The header bar widget is added. Check that the main container class has code that adds the header bar class as a child of the main container widget.

   "use strict";
   
   modulum('MyMainContainerWidget', ['WidgetGroupBase', 'WidgetFactory'],
           
          ...
   
           constructor: function() {
             $super.constructor.call(this);
   
             var headerBar = new cls.MyHeaderBarWidget();
             headerBar.setParentWidget(this);
             this.getElement().querySelector("header").appendChild(headerBar.getElement());
           }
         };
       });
   
       cls.WidgetFactory.register('MainContainer', cls.MyMainContainerWidget);
     });

   In the highlighted code in the JavaScript example, you can see:
   • The variable headerBar references an instance of the MyHeaderBarWidget class.
   • The .getElement().querySelector method inserts the header bar widget as a child of the header element in the main container element of the interface.
5. In your project_dir/customization/custom_project_dir/scss/customization.scss file add a reference to the MyHeaderBarWidget.scss. In this example we import the MyHeaderBarWidget style.

   @import "MyHeaderBarWidget";
   @import "MyMainContainerWidget";

6. Rebuild using grunt.
7. Test the logo is displayed as expected by closing and reopening your application.
   Tip: You may need to use CTRL + F5 to clear the browser cache before you see your changes.