||
Skip to end of metadata
Go to start of metadata

The following sections explain how you can change the default asset type icon to a custom asset type icon.

Step 1 - Create a custom icon

For this tutorial use the following gadget.png image as the custom icon. 

WSO2 ES will automatically crop large images when they are used as the custom icon.

 

Step 2 - Create a custom icon stylesheet

Create a CSS class that allows you to expose the custom image as an icon. For this tutorial, we have defined a new CSS class in the my-icons.css style as follows:

my-icons.css
.my-icon {
    background: transparent url(../img/gadget.png) no-repeat center;
    padding: 9px;
}
.my-icon.fw-lg {
    width: 30px;
    height: 30px;
}

The choice of the CSS class name that you give to your icon is up to you. However, it is generally a recommended to prefix it with your company name or another unique identifier to avoid naming conflicts.

Step 3 - Configure the asset type to use the new icon style

Generally, it is  customary for customizations to the WSO2 Enterprise Store to be done via the app and asset extension. However, the process of adding a custom icon is a situation where the base layout must be altered directly. This is due to the way in which the app and asset extensions govern the behavior of the pages. The Enterprise Store consists of two different page types: global and asset specific. The global pages are those that display shared information or those that are not specific to a particular asset type. An example is the Top Assets page of the Store application. The asset-specific pages deal exclusively with pages specific to an asset type such as the listing and details pages in the Publisher. The fact that the icon appears across multiple page types mean that you can no longer deliver the CSS styles and image via an extension. Therefore, follow the instructions below to configure the asset type to use the new icon style.

Step 3.1 - Add the stylesheet to the Store and Publisher

Copy the icon stylesheet, namely my-icons.css, to the CSS directory of each application's themes directory as follows:

  • Store: <ES_HOME>/repository/deployment/server/jaggeryapps/store/themes/store/css
  • Publisher: <ES_HOME>/repository/deployment/server/jaggeryapps/publisher/themes/default/css  
Step 3.2. - Add the icon image

Copy the icon image, namely gadget.png, to the  image directory of each of the following application themes directory.

  • Store: <ES_HOME>/repository/deployment/server/jaggeryapps/store/themes/store/img
  • Publisher: <ES_HOME>/repository/deployment/server/jaggeryapps/publisher/themes/default/img
Step 3.3. - Add the created custom icon stylesheet to the layout page

Include the custom icon stylesheet, namely  my-icons.css,  to the layout page by adding the following code snippet. The layout page is found at the following locations:

  • Store: <ES_HOME>/repository/deployment/server/jaggeryapps/store/themes/store/pages/2-column-right.hbs

    <!-- Custom icons -->
        <link href="{{url "/themes/store/css/my-icons.css"}}" rel="stylesheet">
    2-column-right.hbs
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        {{> title}}
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <!-- Le styles -->
        <link href="{{url "/themes/store/css/bootstrap.min.css"}}" rel="stylesheet">
        <link href="{{url "/themes/store/css/custom.css"}}" rel="stylesheet">
        <link href="{{url "/themes/store/css/nanoscroller.css"}}" rel="stylesheet">
        <link href="{{url "/themes/store/css/font-awesome.min.css"}}" rel="stylesheet">
        <link href="{{url "/themes/store/css/font-wso2.css"}}" rel="stylesheet">
        {{css}}
        <!-- Fav and touch icons -->
        <link rel="shortcut icon" href="http://wso2.com/files/favicon.ico" type="image/x-icon" />
    
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="{{url "/themes/store/js/html5shiv.min.js"}}"></script>
        <script src="{{url "/themes/store/js/respond.min.js"}}"></script>
        <link rel="stylesheet" href="{{url "/themes/store/css/ie.css"}}" type="text/css">
        <![endif]-->
    </head>
    <body>
    <div class="wrapper">
        <div class="container-fluid header-container">
            {{ include header}}
        </div>
        <div class="page-content-wrapper es-content-block" >
            {{include navigation}}
            <div class="container-fluid">
                <div id="taxonomy-expand-view" class="taxonomy-expand-view sidebar-wrapper sidebar-nav toggled nano" data-offset-bottom="40">
                    <div class="nano-content">
                        <button type="button" class="btn btn-secondary btn-taxonomy pull-right btn-expand-taxonomy-toggle" id="contract-taxonomy" data-toggle="tooltip" data-placement="left" title="Contract Section">
                            <i class="fw fw-contract"></i>
                        </button>
                        <nav class="taxonomy"><!-- Dynamic Content --></nav>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 wr-content padding-none">
                    <div id="assets-container">
                        {{include body}}
                    </div>
                </div>
    
            </div>
        </div>
    </div>
    {{>footer}}
    <!-- /container -->
    <!--  CSRF Protection -->
    <script src='{{url ""}}/csrf.js' type="text/javascript"></script>
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="{{url "/themes/store/js/jquery-1.11.1.min.js"}}"></script>
    <script src="{{url "/themes/store/js/jquery.nanoscroller-custom.min.js"}}"></script>
    <script src="{{url "/themes/store/js/bootstrap.min.js"}}"></script>
    <script src="{{url "/themes/store/js/async.min.js"}}"></script>
    <!-- Custom icons -->
        <link href="{{url "/themes/store/css/my-icons.css"}}" rel="stylesheet">
    <script src="{{url "/themes/store/js/handlebars.js"}}"></script>
    <script src="{{url "/themes/store/js/notify.min.js"}}"></script>
    <script src="{{url "/themes/store/js/messages.js"}}"></script>
    <script src="{{url "/themes/store/js/theme.js"}}"></script>
    <script src="{{url "/themes/store/js/url.js"}}"></script>
        {{js}}
        {{code}}
    <script src="{{url "/themes/store/js/caramel.handlebars.client.js"}}"></script>
    <script src="{{url "/themes/store/js/caramel-client.js"}}"></script>
    <script type="text/javascript">
        var affixOffset = 50;
        $( document ).ready(function() {
            if($(document).height() - $(window).height() > affixOffset){
                $(document).scroll(function(){
                    if($(document).scrollTop() >= ( affixOffset + 20)){
                        $('.navigation-container').addClass("affix");
                    } else{
                        $('.navigation-container').removeClass("affix");
                    }
                });
            }
        });
    </script>
    </body>
    </html>
  • Publisher:  <ES_HOME>/repository/deployment/server/jaggeryapps/publisher/themes/default/pages/single-col-fluid.hbs

    <!-- Custom icons -->
        <link href="{{url "/themes/default/css/my-icons.css"}}" rel="stylesheet">
    single-col-fluid.hbs
    <!DOCTYPE html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="no-js">
    <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        {{> title}}
        <link rel="icon" href="{{url "/themes/default/img/favicon.png"}}" type="image/x-icon" />
        <!-- Bootstrap -->
        <link href="{{url "/themes/default/css/bootstrap.min.css"}}" rel="stylesheet" media="screen">
        <!-- fontawesome -->
        <link rel="stylesheet" href="{{url "/themes/default/css/font-awesome.min.css"}}">
        <!-- font-wso2 -->
        <link rel="stylesheet" href="{{url "/themes/default/css/font-wso2.css"}}">
        <!-- Token input -->
        <link rel="stylesheet" href="{{url "/themes/default/js/token.input/css/token-input-facebook.css"}}">
        <!-- Helper css injections -->
        <!-- Custom css -->
        <link href="{{url "/themes/default/css/custom.css"}}" rel="stylesheet">
        <link href="{{url "/themes/default/css/custom-theme.css"}}" rel="stylesheet">
        {{css}}
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="{{url "/themes/default/js/html5shiv.min.js"}}"></script>
        <script src="{{url "/themes/default/js/respond.min.js"}}"></script>
        <![endif]-->
    </head>
    <body>
    <div class="wrapper">
        <div class="container-fluid">
            {{ include header}}
        </div>
        <div class="container-fluid ribbon-container">
            {{include ribbon}}
        </div>
        <div class="container-fluid wr-main-content">
            {{include listassets}}
        </div>
    </div>
    {{>footer}}
    {{>es-modal}}
    <!--  CSRF Protection -->
    <script src='{{url ""}}/csrf.js' type="text/javascript"></script>
    <script src="{{url "/themes/default/js/jquery-1.10.2.min.js"}}"></script>
    <script src="{{url "/themes/default/js/libs/jquery.form.min.js"}}"></script>
    <script src="{{url "/themes/default/js/bootstrap.min.js"}}"></script>
    <script src="{{url "/themes/default/js/async.min.js"}}"></script>
    <script src="{{url "/themes/default/js/publisher.commons.js"}}"></script>
    <script src="{{url "/themes/default/js/lc.processor.js"}}"></script>
    <script src="{{url "/themes/default/js/sugyama.js"}}"></script>
    <script src="{{url "/themes/default/js/raphael-min.js"}}"></script>
    <script src="{{url "/themes/default/js/graph.js"}}"></script>
    <script src="{{url "/themes/default/js/token.input/jquery.tokeninput.js"}}"></script>
    <script src="{{url "/themes/default/js/handlebars.js"}}"></script>
    <script src="{{url "/themes/default/js/notify.min.js"}}"></script>
    <script src="{{url "/themes/default/js/messages.js"}}"></script>
    <script src="{{url "/themes/default/js/validate.js"}}"></script>
    <!-- Custom icons -->
        <link href="{{url "/themes/default/css/my-icons.css"}}" rel="stylesheet">
    <!-- Helper files js injector -->
    {{js}}
    {{code}}
    <script src="{{url "/themes/default/js/caramel.handlebars.client.js"}}"></script>
    <script src="{{url "/themes/default/js/caramel-client.js"}}"></script>
    <script type="text/javascript">
    var affixOffset = 50;
    $( document ).ready(function() {
        $("[data-toggle=popover]").popover();
        if($(document).height() - $(window).height() > affixOffset){
            $(document).scroll(function(){
                if($(document).scrollTop() >= ( affixOffset + 20)){
                    $('.ribbon-container').addClass("affix");
                } else{
                    $('.ribbon-container').removeClass("affix");
                }
            });
        }
    });
    </script>
    </body>
    </html>

     

Step 4 - Configure the asset type to use the new icon style

  1. Create an asset extension, which alters the icon, in order to configure the asset type to use the new icon style. It is mandatory that the name of the asset extension should be as follows: asset.js

    asset.js
    asset.configure = function() {
        return {
            meta: {
                ui: {
                    icon: 'my-icon'
                }
            }
        };
    };
    
    
  2. Rename the default asset.js within the following directories to asset_need.js in order to create a backup of the default configurations.
    • Publisher - <ES_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/assets/gadget
    • Store - <ES_HOME>/repository/depoyment/server/jaggeryapps/store/extensions/assets/gagdet
  3. Add the newly created asset.js file into the latter mentioned directory paths within the Publisher and the Store.

Step 5 - Restart the WSO2 ES Server

For more information, see Shutting Down and Restarting the Server.

Step 6 - View the asset type custom icon in the Publisher and Store

  • Sign into the Publisher as a tenant to view the asset type custom icon in the Publisher.


  • Sign into the Store as a tenant to view the asset type custom icon in the Store.

     
  • No labels