AppCenter: Customizing the AppCenter Appearance

Learn Data Science
Teradata Employee

Special Thanks to Eran Sharpe:

About this blog Post:

I was recently asked by a client how to customize the experience of AppCenter.  Maybe you want to have your own color scheme and your own corporate branded logo?  In the AppCenter documentation is the answer.  I have included it here for your reference as well.

Log into AppCenter:

Click on help (?) -> Installing and setting up appcenter->configuring appcenter settings

You can download any of the current CSS templates, modify and then upload back to AppCenter.

The AppCenter comes with four built-in themes (color schemes). The AppCenter administrator may specify which theme will be the default and the one to be used when users first log in, by clicking on the pin icon next to the desired theme or by clicking the Select a Visual Theme icon on the right side of the AppCenter banner.


appc1.JPG

Users who log into the AppCenter will have the option to change the default theme to any one of the available themes by clicking on the theme icon and selecting the desired theme.

Note: The user's selection is stored in the user's browser, so the user may need to repeat the selection when using another web browser.

The AppCenter administrator can modify the list of available themes, by removing or adding new themes. The admin can also download the installed themes and save them as a back up.

Creating New AppCenter Themes

The AppCenter administrator can define new AppCenter themes, and upload the themes to the AppCenter.

Almost any visual aspect of the AppCenter, including fonts, colors, and logo can be modified to match the organization's needs.

To get started, the Admin can click on the link for uploading a template theme pack.

appc2.JPG

The pack is a zip archive, containing a style.css file and an images directory.

To make minor modifications such as font or background colors, or replace the AppCenter company logo, simply modify the styles.css file as desired, or replace the logo.png file in the archive, rename the archive to the desired theme name, and upload the archive into the AppCenter by clicking the Upload a customer theme pack button.

Note: The AppCenter expects a zip file. You cannot upload only the style.css file.

You are not limited to changing only the items listed in the style.css file. This file is a template to help you get started, but you can identify any visual element in AppCenter with your browser's debugger, and specify this css element and value in your theme's style.css file. Your entry will take precedence over the default value. In this way, you can control any visual element that can be defined through CSS.

appc3.JPG

As an example, here is the content of the example theme pack style.css file that you can download and modify:

/*

CUSTOM STYLE THEME SAMPLE

Adding more styles here will override the standard system CSS.

Identify a CSS selector of the element you wish to customize (using browser developer tools) and add a corresponding CSS rule. Below are some examples of user interface styles.

*/

/* Header bar background settings */

#header {

background-image: -webkit-linear-gradient(90deg, #E6E6E6 0%, #FFF 100%);

background-image: linear-gradient(0deg, #E6E6E6 0%, #FFF 100%);

}

#login #header{

background-image: -webkit-linear-gradient(0deg, rgb(239, 239, 239) 0%, #E6E6E6 100%);

background-image: linear-gradient(90deg, rgb(239, 239, 239) 0%, #E6E6E6 100%);

}

/* Header bar company logo */

#header header h1 a {

background: url("images/logo.png") no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0);

}

/* Header bar AppCenter title */

#header header h3 {

color: rgba(216, 216, 216, 0.7);

text-shadow: 0px 0px 0px rgba(63, 62, 62, 0.9);

font-size: 23px;

font-weight: 700;

}

#login header h3{

color:#989898

}

#login-form{

background: none repeat scroll 0% 0% rgb(248, 248, 248);

}

#login #footer{

background-image: -webkit-linear-gradient(0deg, rgb(225, 225, 225) 0%, rgb(228, 228, 228) 100%);

background-image: linear-gradient(90deg, rgb(225, 225, 225) 0%, rgb(228, 228, 228) 100%);

box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.35), 0px -1px 0px 0px rgba(0, 0, 0, 0.25) inset;

}

#login #footer p{

color: rgb(146,146,146);

}

#footer ul#nav-footer li a{

color: rgb(146,146,146);

}

/* Header bar Welcome text */

#header header p {

color: #555;

}

/* Header bar icons */

#header header #nav-header > li > a, #icn-help-builder {

border:0 solid RGB(107,107,107);

}

#header .navbar-group .btn,

#header .sidebar-group .btn,

#header .user-themes .btn{

border:0 solid RGB(107,107,107);

color: #777;

}

#header .active-group div.quick-app img{

border:0 solid RGB(107,107,107);

}

#header .navbar-group .btn, #header .sidebar-group .btn {

box-shadow: none !important;

}

#header .active-group div.quick-app img {

opacity: 0.8;

}

#header .active-group div.quick-app img:hover {

opacity: 0.99;

}

#header .btn-default .caret {

border-top-color: rgba(255, 255, 255, 0.75);

}

#header header #nav-header > li > a {

background-image: none;

position: relative;

top: 1px;

display: inline-block;

font-family: 'Glyphicons Halflings';

font-style: normal;

font-weight: 400;

line-height: 2;

-webkit-font-smoothing: antialiased;

text-indent: 0;

color: #777;

overflow: hidden;

text-align: center;

}

#header header #nav-header > li > a:hover {

color: rgba(225, 112, 17, 0.9);

}

#header header #nav-header > li > a:before {

width: 30px;

display: inline-block;

}

#header header #nav-header li a.icn-settings:before {

content: "\e019";

}

#header header #nav-header li a.icn-tasks:before {

content: "\e013";

}

#header header #nav-header li a.icn-log:before {

content: "\e032";

}

#header header #nav-header li a.icn-help:before {

content: "\e085";

}

#header header #nav-header li a.icn-logout:before {

content: "\e163";

}

#header #toolbar-container .active-screen{

color: #e9872a;

}

/* Header bar icons end */

/* Sidebar panel */

#sidebar {

background: #EDEDED;

box-shadow: -1px 0px 1px 1px rgba(0, 0, 0, 0.05) inset;

}

/* Sidebar panel menu items */

#sidebar nav ul li a, #sidebar nav ul li a {

color: #787878

}

/* Sidebar panel menu headers */

#sidebar nav ul li.header {

color:#787878;

}

/* Sidebar panel menu icons */

#sidebar .glyphicon{

color:#787878;

}

/* Sidebar version block */

#version{

color: rgba(0,0,0,.57);

text-align: left;

}

/* Center content area */

#mainbar {

background: #F8F8F8;

color:#626262;

}

/* Generic button style */

.btn-default{

background-color: #fff;

border-color: #ccc;

border-radius: 2px;

background-image: none;

}

.btn-success{

background-color: #509f50;

background-image: linear-gradient(0deg, #509f50 0%, #67c367 100%);

}

.btn-danger{

background-color: #d9534f;

background-image: none;

border-color: #d43f3a;

}