Adding a New Store Logo to Enterprise Mobility Manager(EMM)

I explained how to change styles (background colors, fonts etc.) of Store of WSO2 EMM from this. 

By default, WSO2 EMM Store comes with WSO2 logo. But you can change it easily. 

Today, from this post I'm going to show how to change the logo of Store of  EMM. 

First, Create a directory called "carbon.super/themes" inside <EMM_HOME>/repository/deployment/server/jaggeryapps/store/themes/.

Then, Create a directory called "custom/libs/theme-wso2_1.0/images" inside <EMM_HOME>/repository/deployment/server/jaggeryapps/store/themes/carbon.super/themes.

Copy your logo to <EMM_HOME>/repository/deployment/server/jaggeryapps/store/themes/carbon.super/themes/custom/libs/theme-wso2_1.0/images. Let's assume the image name is "myimage.png".

Then, Add image name to <EMM_HOME>/repository/deployment/server/jaggeryapps/store/themes/store/partials/header.hbs. Change the Image name of <img> tag with a class name of "logo"

<img src="{{customThemeUrl "/libs/theme-wso2_1.0/images/myimage.png"}}" alt="apps-store"
                     title="apps-store" class="logo" />

If you want to change the Store name, change the value of <h1> with a class name "display-block-xs".

<h1 class="display-block-xs">Google Apps Store</h1>

Refresh store. Store will look like below.

Adding a New Store Theme to Enterprise Mobility Manager(EMM)

A theme consists of UI elements such as logos, images, background colors etc. WSO2 EMM Store comes with a default theme.

You can extend the existing theme by writing a new one.

From this blog post I'm going to show how to change styles (background colours, fonts etc.)
First, Create a directory called "carbon.super/themes" inside <EMM_HOME>/repository/deployment/server/jaggeryapps/store/themes/.

Then, Create a directory called "css" inside <EMM_HOME>/repository/deployment/server/jaggeryapps/store/themes/carbon.super/themes.
Add below two css files to above created css directory. You can change it's value based on your preferences.

1. appm-left-column-styles.css

/*========== MEDIA ==========*/
@media only screen and (min-width: 768px) {
    .page-content-wrapper.fixed {
        min-height: calc(100% - 130px);
        max-height: calc(100% - 130px);
    }
}

.media {
    margin-top: 0;
}

.media-left {
    padding-right: 0;
}

.media-body {
    background-color: #EFEFEF;
}

/**/
/*========== NAVIGATION ==========*/


.section-title {
    background-color: #444444;
    border: 1px solid #444444;
    height: 40px;
    padding-top: 5px;
    width: 200px;
    padding-left: 10px;
    font-size: 18px;
    color: #fff;
}

/**/
/*========== TAGS ==========*/
.tags {
    word-wrap: break-word;
    width: 200px;
    padding: 5px 5px 5px 5px;
    background-color: #ffffff;
    display: inline-block;
    margin-bottom: 0;
}

.tags > li {
    line-height: 20px;
    font-weight: 400;
    cursor: pointer;
    border: 1px solid #E4E3E3;
    font-size: 12px;
    float: left;
    list-style: none;
    margin: 5px;
}

.tags > li a {
    padding: 3px 6px;
}

.tags > li:hover,
.tags > li.active {
    color: #ffffff;
    background-color: #7f8c8d;
    border: 1px solid #7f8c8d;
}

.tags-more {
    float: right;
    margin-right: 11px;
}

/**/
/*=========== RECENT APPS ==========*/
.recent-app-items {
    list-style: none;
    width: 200px;
    padding: 5px 0 5px 0;
    background-color: #ffffff;
    margin-bottom: 10px;
}

.recent-app-items > li {
    padding: 6px 6px 6px 6px;
}
.recent-app-items .recent-app-item-thumbnail {
    width: 60px;
    height: 45px;
    line-height: 45px;
    float: left;
    text-align: center;
}

.recent-app-items .recent-app-item-thumbnail > img {
    max-height: 45px;
    max-width: 60px;
}

.recent-app-items .recent-app-item-thumbnail > div {
    height: 45px;
    width: 60px;
    color: #ffffff;
    font-size: 14px;
}

.recent-app-items .recent-app-item-summery {
    background-color: transparent;
    padding-left: 3px;

    width:127px;
}

.recent-app-items .recent-app-item-summery, .recent-app-items .recent-app-item-summery > h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

nav.navigation > ul{
    background: #525252;
    color: #fff;
    position: relative;
    -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    list-style: none;
    padding:0px;
    margin: 0px;
}

nav.navigation ul li {
    min-height: 40px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 100;
    position: relative;
}

nav.navigation a:after{
    content: " ";
    display: block;
    height: 0;
    clear: both;
}

nav.navigation ul li a i {
    line-height: 100%;
    font-size: 21px;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    float: left;
    text-align: center;
    padding: 9px;
}

nav.navigation .left-menu-item {
    text-align: left;
    vertical-align: middle;
    padding-left: 10px;
    line-height: 38px;
    width: 160px;
    height: 40px;
    font-size: 14px;
    display: table;
    margin-left: 40px;
}

nav.navigation .left-menu-item i{
    float: none;
    position: relative;
    left: 0px;
    font-size: 10px;
    display: table-cell;
}

ul.sublevel-menu {
    padding: 0px ;
    list-style: none;
    margin: 0px;
    display: block;
    background-color: rgb(108, 108, 108);

}

ul.sublevel-menu li{
    line-height: 40px;
}

ul.sublevel-menu li a{
    display:block;
    font-size: 14px;
    text-indent:10px;
}
ul.sublevel-menu li a:hover{
    background-color: #626262;
}
nav.navigation ul > li .sublevel-menu li .icon{
    background-color: rgb(108, 108, 108);
}
nav.navigation ul > li ul.sublevel-menu li a:hover .icon{
    background-color: #626262;
}
ul.sublevel-menu .icon {
    background-color: none;
    font-size: 17px;
    padding: 11px;
}

nav a.active .sublevel-menu {
    display: block;
}

nav .sublevel-menu {
    display: none;
}

nav.navigation.sublevel-menu{
    display: none;
}

nav.navigation ul > li.home .icon {
    background: #c0392b;
    color: white;
}

nav.navigation ul > li.home.active {
    background: #c0392b;
    color: white;
}

nav.navigation ul > li.home.active > .left-menu-item {
    background: #c0392b;
}

nav.navigation ul > li.green .icon {
    background: #63771a;
    color: white;
}

nav.navigation ul > li.green:hover > .icon {
    background: #63771a;
    color: white;
}

nav.navigation ul > li.green:hover .left-menu-item, nav.navigation ul > li.green.active .left-menu-item, nav.navigation ul > li.green.hover .left-menu-item {
    background: #63771a;
    color: white;

}

nav.navigation ul > li.red .icon {
    background: #c0392b;
    color: white;
}

nav.navigation ul > li.red:hover > .icon {
    background: #c0392b;
    color: white;
}

nav.navigation ul > li.red:hover .left-menu-item, nav.navigation ul > li.red.active  .left-menu-item, nav.navigation ul > li.red.hover .left-menu-item {
    background: #c0392b;
    color: white;

}

nav.navigation ul > li.orange .icon {
    background: #0a4c7f;
    color: white;
}

nav.navigation ul > li.orange:hover > .icon {
    background: #0a4c7f;
    color: white;
}

nav.navigation ul > li.orange:hover  .left-menu-item, nav.navigation ul > li.orange.active  .left-menu-item, nav.navigation ul > li.orange.hover  .left-menu-item {
    background: #0a4c7f;
    color: white;

}

nav.navigation ul > li.yellow .icon {
    background: #f39c12;
    color: white;
}

nav.navigation ul > li.yellow:hover > .icon {
    background: #f39c12;
    color: white;
}

nav.navigation ul > li.yellow:hover .left-menu-item, nav.navigation ul > li.yellow.active  .left-menu-item, nav.navigation ul > li.yellow.hover  .left-menu-item {
    background: #f39c12;
    color: white;

}

nav.navigation ul > li.blue .icon {
    background: #2980b9;
    color: white;
}

nav.navigation ul > li.blue:hover > .icon {
    background: #2980b9;
    color: white;
}

nav.navigation ul > li.blue:hover  .left-menu-item, nav.navigation ul > li.blue.active .left-menu-item, nav.navigation ul > li.blue.hover  .left-menu-item {
    background: #2980b9;
    color: white;

}

nav.navigation ul > li.purple .icon {
    background: #766dde;
    color: white;
}

nav.navigation ul > li.purple:hover > .icon {
    background: #766dde;
    color: white;
}

nav.navigation ul > li.purple:hover  .left-menu-item, nav.navigation ul > li.purple.active  .left-menu-item, nav.navigation ul > li.purple.hover  .left-menu-item {
    background: #766dde;
    color: white;

}

nav.navigation ul > li.grey .icon {
    background: #2c3e50;
    color: white;
}

nav.navigation ul > li.grey:hover > .icon {
    background: #2c3e50;
    color: white;
}

nav.navigation ul > li.grey:hover  .left-menu-item, nav.navigation ul > li.grey.active .left-menu-item, nav.navigation ul > li.grey.hover .left-menu-item {
    background: #2c3e50;
    color: white;

}

nav.navigation .second_level {
    display: none;
}

nav.navigation .second_level a {
    line-height: 20px;
    padding: 8px 0 8px 10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

nav.navigation .second_level a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

nav.navigation .second_level > .back {
    height: 100%;
    padding: 0 3px;
    background: #FFF;
    vertical-align: middle;
    font-size: 13px;
    width: 5px;
}

nav.navigation .second_level > .left-menu-item {
    padding: 6px 0;
    text-align: left;
    width: 100%;
    vertical-align: middle;
}

@media (min-width: 320px) and (max-width: 991px) {
    ul.sublevel-menu li a {
        text-indent:0px;
    }
}

.page-content-wrapper.fixed .sidebar-wrapper.sidebar-nav,
.page-content-wrapper.fixed .sidebar-wrapper.sidebar-options {
    width: 250px;
    background: #373e44;
    overflow-y: auto;
    overflow: visible;
}

.page-content-wrapper.fixed .sidebar-wrapper.sidebar-nav-sub {
    height: 100%;
    z-index: 1000000;
    background: #272c30;
}


.page-content-wrapper.fixed .sidebar-wrapper.sidebar-options {
    width: 235px;
    max-height: calc(100% - 85px);
}
.sidebar-wrapper.toggled .close-handle.close-sidebar {
    display: block;
}

#left-sidebar{
    background-color: inherit;
    color: inherit;
}

#left-sidebar.sidebar-nav li a{
    color:inherit;
}

@media (min-width: 768px){
    .visible-side-pane{
        position: relative;
        left: 0px;
        width: initial;
    }
}

.mobile-sub-menu-active {
    color: #63771a !important;
}

2. appm-main-styles.css

/*========== HEADER ==========*/
header {
    background: #242c63;
}

header .header-action {
    display: inline-block;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    padding: 10px 10px 10px 10px;
}

header .header-action:hover,
header .header-action:focus,
header .header-action:active {
    background: #4d5461;
}

/**/
/*========== BODY ==========*/
.body-wrapper a:hover {
    text-decoration: none;
}

.body-wrapper > hr {
    border-top: 1px solid #CECDCD;
    margin-top: 50px;
}

/**/
/*=========== nav CLASS ========*/
.actions-bar {
    background: #2c313b;
}

.actions-bar .navbar-nav > li a {
    line-height: 50px;
}

.actions-bar .navbar-nav > li a:hover,
.actions-bar .navbar-nav > li a:focus,
.actions-bar .navbar-nav > li a:active {
    background: #4d5461;
    color: #ffffff;
}

.actions-bar .navbar-nav > .active > a,
.actions-bar .navbar-nav > .active > a:hover,
.actions-bar .navbar-nav > .active > a:focus,
.actions-bar .navbar-nav > .active > a:active {
    background: #4d5461;
    color: #ffffff;
}

.actions-bar .dropdown-menu {
    background: #2c313b;
}

.actions-bar .dropdown-menu > li a {
    line-height: 30px;
}

.navbar-search, .navbar-search .navbar {
    min-height: 40px;
}

.navbar-menu-toggle {
    float: left;
    height: 40px;
    padding: 0;
    line-height: 47px;
    font-size: 16px;
    background:#1A78D8;
    color: #ffffff;
}
.navbar-menu-toggle:hover, .navbar-menu-toggle:focus, .navbar-menu-toggle:active {
    color: #ffffff;
    background: #0F5296;
}
/**/
/*========== SEARCH ==========*/
.search-bar {
    background-color: #035A93;
}

.search-box .input-group, .search-box .input-group > input,
.search-box .input-group-btn, .search-box .input-group-btn > button {
    min-height: 40px;
    border: none;
    margin: 0;
    background-color: #004079;
    color: #ffffff;
}

.search-box .input-group-btn > button {
    opacity: 0.8;
}

.search-box .input-group-btn > button:hover,
.search-box .input-group-btn > button:active,
.search-box .input-group-btn > button:focus {
    opacity: 1;
}

.search-box .search-field::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #fff;
    opacity: 0.8;
    font-weight: 100;
}

.search-box .search-field:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #fff;
    opacity: 0.8;
    font-weight: 100;
}

.search-box .search-field::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #fff;
    opacity: 0.8;
    font-weight: 100;
}

.search-box .search-field:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #fff;
    opacity: 0.8;
    font-weight: 100;
}

.search-field {
    padding-left: 10px;
}
.search-box .search-by, .search-box .search-by-dropdown {
    background-color: #002760 !important;
    color: #fff !important;
}

.search-box .search-by-dropdown {
    margin-top: 0;
    border: none;
}

.search-box .search-by-dropdown li a {
    background-color: #002760;
    color: #fff;
}

.search-box .search-by-dropdown li a:hover,
.search-box .search-by-dropdown li a:active,
.search-box .search-by-dropdown li a:focus {
    background-color: #004D86 !important;
    color: #fff;
}

.search-options {
    position: absolute;
    top: 100%;
    right: 0;
    bottom: auto;
    left: auto;
    float: right;
    z-index: 1000;
    margin: 0 15px 0 15px;
    background-color: #002760;
    color: #fff;
}

/**/
/*========== PAGE ==========*/
.page-header {
    height: auto;
    padding: 10px 0 10px 0;
    border-bottom: none;
    margin: 0;
}

.page-header:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
}

.page-header .page-title {
    margin: 0;
    padding-top: 6px;
    display: inline-block;
}

.page-header .page-title-setting {
    display: inline-block;
    margin-left: 5px;
    padding-top: 10px;
}

.page-header .page-title-setting > a {
    padding: 5px 5px 5px 5px;
    opacity: 0.7;
}

.page-header .page-title-setting > a:hover,
.page-header .page-title-setting > a:active,
.page-header .page-title-setting > a:focus,
.page-header .page-title-setting.open > a {
    opacity: 1;
    background-color: #e4e4e4;
}

.page-header .sorting-options > button {
    padding: 0 5px 0 5px;
}

.page-content .page-title {
    margin-left: 0px;
}
/**/
/*========== NO APPS ==========*/
.no-apps {
    width: 100%;
}

.no-apps, .no-apps div, .no-apps p {
    background-color: #ffffff;
    text-align: center;
    cursor: help;
}

.no-apps p {
    cursor: help;
}

/**/
/*========== APP THUMBNAIL ITEMS==========*/
.app-thumbnail-ribbon {
    display: block;
    position: absolute;
    top: 0;
    height: 25%;
    color: #ffffff;
    z-index: 500;
    border: 1px solid rgb(255, 255, 255);
    border: 1px solid rgba(255, 255, 255, .5);
    /* for Safari */
    -webkit-background-clip: padding-box;
    /* for IE9+, Firefox 4+, Opera, Chrome */
    background-clip: padding-box;
    border-top-width: 0;
}

.app-thumbnail-type {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 30%;
    color: #ffffff;
    z-index: 500;
    border: 1px solid rgb(255, 255, 255);
    border: 1px solid rgba(255, 255, 255, .5);
    /* for Safari */
    -webkit-background-clip: padding-box;
    /* for IE9+, Firefox 4+, Opera, Chrome */
    background-clip: padding-box;
    border-left-width: 0;
    border-bottom-width: 0;
    font-size: 2em;
}

.app-thumbnail-ribbon > span, .app-thumbnail-type > span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

/**/
/*========== APP TILE ==========*/
.app-tile {
    background-color: #ffffff;
    margin-bottom: 20px;
}

.app-tile .summery {
    padding: 10px 0 10px 10px;
    max-width: 100%;
}

.app-tile .summery > h4 {
    margin-top: 5px;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-tile .summery a h4 {
    margin-top: 5px;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-tile .summery > h5 {
    margin-top: 0;
}

.app-tile .summery > h4, .app-tile .summery > h5, .app-tile .summery > p {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.app-tile .summery > .more-menu {
    /*position: relative;*/
}

.app-tile .summery > .more-menu .more-menu-btn {
    float: right;
    height: auto;
    background-color: #F7F7F7;
    color: #838383;
    padding: 10px;
    margin-top: -10px;
}

.app-tile .summery > .more-menu.open .more-menu-btn {
    background-color: #D2D2D2;
}

.app-tile .summery > .more-menu .more-menu-btn:hover {
    background-color: #e4e4e4;
}

.app-tile .summery > .more-menu .more-menu-items {
    margin-top: 0;
}

/**/
/*========== APP DETAILS ==========*/
.app-details {
    background-color: #ffffff;
}

.app-details .summery > h4, .app-details .summery > p {
    white-space: nowrap;
    overflow: hidden;
}

.app-details .summery > .actions {
    margin: 10px 0 0 0;
}

.app-details .summery > .actions > a {
    margin: 5px 5px 5px 0;
}

.app-details .summery > .actions > a > i {
    padding-right: 5px;
}

.app-details-tabs {
    padding: 0 15px 0 15px;
}

.app-details-tabs > .nav-tabs > li > a {
    border-radius: 0;
}

.app-details-tabs > .nav-tabs > li.active > a,
.app-details-tabs > .nav-tabs > li.active > a:hover,
.app-details-tabs > .nav-tabs > li.active > a:focus,
.app-details-tabs > .nav-tabs > li.active > a:active {
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 0;
}

.app-details-tabs > .nav-tabs > li > a:hover,
.app-details-tabs > .nav-tabs > li > a:focus,
.app-details-tabs > .nav-tabs > li > a:active {
    background-color: #E8E8E8;
    border: 1px solid #E8E8E8;
    border-radius: 0;
}

.app-details-tabs > .tab-content {
    padding: 20px 17px;
    background-color: #fff;
}

.app-details-tabs > .tab-content > h3 {
    margin-top: 0;
}

/**/
/*========== DEFAULT THUMBNAIL & BANNER ==========*/
.default-thumbnail, .default-banner {
    color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

/**/
/*========== RATING ==========*/
.rating > .one {
    opacity: 1;
}

.rating > .zero {
    opacity: 0.3;
}

/**/
/*========== UTILS ==========*/
a.disabled {
    cursor: default;
}

.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.ratio-responsive-1by1 {
    padding: 100% 0 0 0;
}

.ratio-responsive-4by3 {
    padding: 75% 0 0 0;
}

.ratio-responsive-16by9 {
    padding: 56.25% 0 0 0;
}

.ratio-responsive-1by1, .ratio-responsive-4by3, .ratio-responsive-16by9 {
    width: 100%;
    position: relative;
}

.ratio-responsive-item {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

.ratio-responsive-item:after {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.ratio-responsive-img > img {
    display: block;
    position: absolute;
    max-height: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.hover-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}

.hover-overlay-container:hover .hover-overlay {
    display: block;
    background: rgba(0, 0, 0, .6);
    cursor: pointer;
}

.hover-overlay-inactive-container:hover .hover-overlay {
    display: block;
    background: rgba(0, 0, 0, .6);
    cursor: not-allowed;
}

/**/
/*========== COLORS ==========*/
/*
focus : background 5% lighter, border 5% darker
hover: background 10% lighter, border 5% darker
active: background 10% lighter, border 5% darker
*/

/* subscribe  - main color: #603cba */
.background-color-subscribe {
    background-color: #603cba;
}

.background-color-on-hover-subscribe {
    background-color: transparent;
}

.background-color-on-hover-subscribe:hover {
    background-color: #603cba;
}

.btn-subscribe {
    color: #fff;
    background-color: #603cba;
    border-color: #603cba;
}

.btn-subscribe:focus,
.btn-subscribe.focus {
    color: #fff;
    background-color: #6D49C7;
    border-color: #532FAD;
}

.btn-subscribe:hover,
.btn-subscribe:active,
.btn-subscribe.active {
    color: #fff;
    background-color: #7A56D4;
    border-color: #532FAD;
}

/* favorite  - main color: #810847 */
.background-color-favorite {
    background-color: #810847;
}

.background-color-on-hover-favorite {
    background-color: transparent;
}

.background-color-on-hover-favorite:hover {
    background-color: #810847;
}

.btn-favorite {
    color: #fff;
    background-color: #810847;
    border-color: #810847;
}

.btn-favorite:focus,
.btn-favorite.focus {
    color: #fff;
    background-color: #8E1554;
    border-color: #75003B;
}

.btn-favorite:hover,
.btn-favorite:active,
.btn-favorite.active {
    color: #fff;
    background-color: #9B2261;
    border-color: #75003B;
}

/* all apps  - main color: #007A5F */
.background-color-all-apps {
    background-color: #007A5F;
}

.background-color-on-hover-all-apps {
    background-color: transparent;
}

.background-color-on-hover-all-apps:hover {
    background-color: #007A5F;
}

/* advertised  - main color: #C64700 */
.background-color-ad {
    background-color: #C64700;
}

.background-color-inactive {
    background-color: #C10D15;
}

.background-color-deprecated {
    background-color: #FFCC00;
}

/*========== MOBILE PLATFORM COLORS ========*/
.background-color-android {
    background-color: #a4c639;
}

.background-color-apple {
    background-color: #CCCCCC;
}

.background-color-windows {
    background-color: #00bcf2;
}
.background-color-webapps {
    background-color: #32a5f2;
}

/*=============== MOBILE ENTERPRISE INSTALL MODAL =========*/
.ep-install-modal {
    background: white !important;
    color: black !important;
}

.ep-install-modal .dataTables_filter label {
    margin-top: 5px;
    margin-bottom: 5px;
}
.ep-install-modal .dataTables_filter label input {
    margin: 0 0 0 0 !important;
    min-width: 258px !important;
}

.ep-install-modal .dataTables_info {
    float: none !important;
}

.ep-install-modal .dataTables_paginate {
    float: none !important;
}

.ep-install-modal .dataTables_paginate .paginate_enabled_next{
    color: #1b63ff;
    margin-left: 5px;
}

.ep-install-modal .dataTables_paginate .paginate_enabled_previous{
    color: #1b63ff;
}

.ep-install-modal .dataTables_paginate .paginate_disabled_next{
    margin-left: 5px;
}

.ep-install-modal .modal-header button {
    color: #000000;
}

#noty_center_layout_container {
    z-index: 100000001 !important;
}

/*=================MOBILE DEVICE INSTALL MODAL*==============*/
.modal-dialog-devices .pager li>a {
    background-color: transparent !important;
}
.modal-dialog-devices .thumbnail {
    background-color: transparent; !important;
    border: none !important;
}
/*---*/

/*===================HOME PAGE SEE MORE OPTION==============*/
.title {
    width: auto;
    padding: 0 10px;
    height: 50px;
    border-bottom: 3px solid #3a9ecf;
    float: left;
    padding-top: 14px;
    font-size: 20px;
    font-weight: 100;
}

.fav-app-title {
    width: auto;
    padding: 0 10px;
    height: 50px;
    border-bottom: 3px solid #3a9ecf;
    float: left;
    padding-top: 14px;
    font-size: 20px;
    font-weight: 100;
    margin-bottom: 10px;
}

.more {
    color:#000;
    float:right;
    background-image:url(../img/more-icon.png)!important;
    background-position:center left;
    background-repeat:no-repeat;
    text-transform:uppercase;
    padding:23px 3px 16px 36px !important
}

a.more:hover {
    color:#3a9ecf;
    text-decoration:none;
    background-image:url(../img/more-icon-hover-blue.png)!important;
    background-position:center left;
    background-repeat:no-repeat
}

a.more:active {
    background-color:none
}

a.more:focus {
    border:none
}
/*---*/

Refresh store. Store will look like below.