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.

Create Carbon Application Archive (CAR) File Using WSO2 Developer Studio

1. Start Developer Studio.
2. Go to Developer Studio > Open Dashboard menu.
3. Click on "ESB Config Project" under "Integration Project".
4. If you want to create the ESB project from existing configuration files, select "Point to Existing Synapse-configs Folder". Otherwise, select "New ESB Config Project" . Then, Click Next.

5. Create a project by giving a name to the project and maven information (Group Id, Artifact Id, Version).

6. Create api, proxy services, sequences, tasks etc that you want to include in the ESB Config project.

7. Build your project. (mvn clean install)
8. Go to Developer Studio > Open Dashboard and  Click on "Composite Application Project" under "Distribution".
9. Give a name to your Composite Project and select all the dependencies that should be included in the CAR Application. Here, I'm adding the ESB Config project that I created in step 4 to CAR application. Then, click "Next"

10. Give maven information (Group Id, Artifact Id, Version). and click "Finish".
11. Click on pom.xml of the created composite application project and go to design view. Select the correct server role of your dependencies.

12. Right click on created composite application project and select "Export Composite Application Project".
13. Give a name, version and export destination to create the CAR app.

14. Now you will find the CAR app in the destination that you gave in the previous step.

You can deploy the created CAR file in WSO2 products as mentioned here.

[WSO2 App Manager] Favorite Apps

In your app store, there may be so many apps. In such a situation, you may need to search apps by name/ provider or business owner.

But if you use only a few apps from the store frequently, it is an extra effort if you have to search them always.

In WSO2 App Manager 1.2.0, there is a new feature called "Favorite Apps". That can be used to set/unset apps as favorite apps.

Now, Let's see how to set an app as a favorite app.

How to set an app as a favorite app?

First, log into App Store. Then, click on the button (with 3 dots) in the bottom right corner of the app that you want, and click on "Add to Favorites". Then you can see that app in "Favorite app list". The favorite apps are displayed with a flag like below.

If you navigate to "Favourites" tab, you will see all your favorite apps as shown below.

How to remove an app from the favorite list?

Click on the button in the bottom right corner of the app. Then, click on "Remove from Favorites".

How to set the "Favorites" page as home page ?

Navigate to the "Favorite" page. Click on the gear icon shown in the image and select “Set this page as home”.

If you want to revert above setting, click on the gear icon and select "Remove from home page".

That's all. Enjoy WSO2 App Manager.  :) 

[WSO2 App Manager] How to Customize Webapp Overview Page

I posted several posts on how to add different custom input fields to Publisher. In this post, let's see how to customize Publisher overview page.

By default, webapp overview page is like below.

If you want to preview custom fields in the overview page, you need to modify <APPM_HOME>/repository/deployment/server/jaggeryapps/publisher/themes/appm/helpers/splitter.js.

Suppose you added a custom field called "Price" like in this post. Then you have to add below condition inside splitData function of above file.

   
   else if (dataPart[i].name == "overview_price") {  
     overview_main.push(dataPart[i]);  
   }  
   

Then,  the webapp overview page with custom feild will look like below.

[WSO2 API Manager] How to Add a User Signup Workflow

From WSO2 API Manager, new developers can self-sign up to the API Store.  After that,  they can login to API Store using that account. But if admins want to approve those new accounts before new developers use their accounts, workflows can be configured. For that, we are using WSO2 Business Process Server (BPS).

Let's see how to add a user signup workflow.

1. If API Manager and Business Process Server are running on the same machine, follow this step.

Set Offset value to 2 in <BPS_HOME>/repository/conf/carbon.xml.


   
    <Offset>2</Offset>  
   

2. If there is no directory called "epr" inside <BPS_HOME>/repository/conf/, then create it.
3. Copy following epr files from APIM_HOME>/business-processes/epr to <BPS_HOME>/repository/conf/epr.
• UserSignupService.epr
• UserSignupProcess.epr
4. Start BPS and login to Management console.
5. Go to Home > Manage > Processes > Add > BPEL. Then, upload <APIM_HOME>/business-processes/user-signup/BPEL/UserSignupApprovalProcess_1.0.0.zip.
   
   
   
6. Go to Home > Manage > Human Tasks >. Then, upload <APIM_HOME>/business-processes/user-signup/HumanTask/UserApprovalTask-1.0.0.zip.
   


Configuration on BPS is finished.  Now, let's see how to configure WSO2 APIM.
7. Start APIM and  login to Management console.
8. Go to Home > Resources > Browse and navigate to /_system/governance/apimgt/applicationdata/workflow-extensions.xml. Click on "Edit As Text". 
9. Comment <UserSignUp executor="org.wso2.carbon.apimgt.impl.workflow.UserSignUpSimpleWorkflowExecutor"> and uncomment  <UserSignUp executor="org.wso2.carbon.apimgt.impl.workflow.UserSignUpWSWorkflowExecutor">
Also, update below property values based on your BPS server credintials, service endpoint.


   
 <UserSignUp executor="org.wso2.carbon.apimgt.impl.workflow.UserSignUpWSWorkflowExecutor">  
      <Property name="serviceEndpoint">http://localhost:9765/services/UserSignupProcess/</Property>  
      <Property name="username">admin</Property>  
      <Property name="password">admin</Property>  
      <Property name="callbackURL">https://localhost:8243/services/WorkflowCallbackService</Property>  
   </UserSignUp>  
   


Now Configuration in API Manager is finished. 
10. Now, go to API store and sign up to the store. 
    
11. When you signup to the API Store you will get a Notification. (User account awaiting Administrator Approval).
    
12. Then, login to Admin Dashboard (https:<Server Host>:9443/admin). 
13. Go to Tasks > User Creation. Then you will able to see the pending user approval tasks like below.
    
14. If you click on "Start" button, the tasks status changed into "In_Progress". 
    
15. Once, you click on "Complete" button, signed up user account become active and that user able to login to the API Store.