Some knowledge of CSS and HTML is recommended before changing the MangoApps CSS shown below.

Further Customization: To customize the domain logo for your MangoApps, follow the steps in this article.

Want to customize your login screen?  Copy the classes and ID’s labelled LOGIN SCREEN CUSTOMIZATION in the Advanced CSS section to make this:

login_1580
As an administrator, you can alter the appearance of the entire MangoApps domain through CSS. To edit the CSS file in MangoApps go to the admin portal click Branding then choose “Advanced”

branding
You can proceed to make changes to the “Custom full site CSS” section in the dialog and “Save” your changes using the button at the bottom of the window when you are done editing.

The MangoApps UI Elements that are affected by each block of the CSS file are as follows:

Basic CSS

Class:  body>.ms-main-bg
Description:  Highlighted red area will be changed.
Example:
body>.ms-main-bg{background:red;}
Class:  .new-navigation-ui .topbar-inner
Description:  Highlighted header red area will be changed.
Example:
.new-navigation-ui .topbar-inner{background-color:red!important;}
Class:  .compose-btn-container>.actionblue-flat
Description:  Highlighted header Compose button and that hover effect will be changed.
Example:
.compose-btn-container>.actionblue-flat{background:red;}

Advanced CSS

Class:  html.non-logged-inDescription:  One component of LOGIN SCREEN CUSTOMIZATION.

Example:
html.non-logged-in {
background:url(http://tinytake.com/images/top-image.jpg) no-repeat center center fixed #00B0FB;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/ce/pulse/images/v2/themes/1_light_grey.jpg',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/ce/pulse/images/v2/themes/1_light_grey.jpg', sizingMethod='scale')";
width: 100%;
height: 100%;
position: fixed;
}

Class:  .non-logged-in .topbar-inner, .non-logged-in .foot_languagesDescription:  One component of LOGIN SCREEN CUSTOMIZATION.

Example:
.non-logged-in .topbar-inner, .non-logged-in .foot_languages {
background:#222;
background-color:rgba(34, 34, 34, 0.7);
}

Class:  body.non-logged-inDescription:  One component of LOGIN SCREEN CUSTOMIZATION.

Example:
body.non-logged-in {
background:transparent;
}

Class:  .otheracc-actions, .mobile_wrapperDescription:  One component of LOGIN SCREEN CUSTOMIZATION.

Example:
.otheracc-actions, .mobile_wrapper {
display:none;
}

ID:  #login_boxDescription:  One component of LOGIN SCREEN CUSTOMIZATION.

Example:
#login_box {
background: rgba(0,0,0,0.5);
padding: 15px;
width: 330px;
}

Class:  .userId_box input[type="text"], .userId_box input[type="password"]Description:  One component of LOGIN SCREEN CUSTOMIZATION.

Example:
.userId_box input[type="text"], .userId_box input[type="password"] {
width:305px;
height:20px;
}

Class:  .userId_box.chkboxDescription:  One component of LOGIN SCREEN CUSTOMIZATION.

Example:
.userId_box.chkbox {
width:330px;
}

Class:  .content-wrapper h2Description:  One component of LOGIN SCREEN CUSTOMIZATION.

Example:
.content-wrapper h2 {
font-size:18px;
color:#fff;
margin-bottom:15px;
}

Class:  .user_id_pwd, .login_container .content-wrapper span.rcContainer labelDescription:  One component of LOGIN SCREEN CUSTOMIZATION.

Example:
.user_id_pwd, .login_container .content-wrapper span.rcContainer label {
color:#fff !important;
text-shadow:none;
}

Class:  .login_title lDescription:  One component of LOGIN SCREEN CUSTOMIZATION.

Example:
.login_title l{
width:127px !important;
}

Class:  a, .bluetext, .stat, .user_colleague_view, .ent_app_msg, #searchCount .ideasCounts, a.black-text:hover, .controlPanel .buttonPanel .panelList li a.selected
Description:  All clickable links to be highlighted.
Example:
a, .bluetext, .stat, .user_colleague_view, .ent_app_msg, #searchCount .ideasCounts, a.black-text:hover, .controlPanel .buttonPanel .panelList li a.selected { background:red; }
Class:  .a.sign_out
Description:  Highlighted text color will change. 
Class:  .sidebar-wrapper
Description:  Selected left menu background will change. 
Class:  ul.sidebar-menu li a:hover, ul.sidebar-menu li .sidebar-more-menu li a:hover
Description:  Left menu background color change on mouse hover. 
Class:  ul.sidebar-menu>li.active>a, ul.sidebar-menu>li.active>a:hover
Description:  Background color change when left menu link active .
ID:#user_banner
Description:Banner background not showing. 
Class:  .default button, .actionbutton.actionblue, .actionbutton.actionredDescription:  Buttons such as “Project Tools”, “Group Tools” and “Wiki Tools” will change.Example:  Multiple browser support:

.default button, .actionbutton.actionblue, .actionbutton.actionred {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1e5799′, endColorstr=’#7db9e8′,GradientType=0 ); /* IE6-9 */
border:1px solid black;
}