Flatten Appearance

Follow

  This article is for our new Experience Manager.

If you are an EventMobi customer and using manage.eventmobi.com your account is using our Classic Content Manager. If this is the case, please visit support.eventmobi.com

This will remove the gradient from the app. It mainly affects the menus and navigation bar at the top of the app, but it also removes the gradient for buttons and various other areas where there happens to be a gradient. 

Important notes to make this code work: 

  • You will need to change the color of your app (in branding) to a darker tone of the finalized and flattened app color.
  • Change the bolded text in the code to be applicable for your app (colour codes, links to images, etc) You can use this site to help you select the Hex codes for your colours: http://www.colorpicker.com/

Code:

/*Flatten Appearance*/

.widget-container {

   margin-top: 0;

   margin-bottom: 0;

}

.widget-contents {

   box-shadow: none;

}

.outer-container .menu, .menu-header, .menu-nav-header, .menu-nav-item, .navbar,.menu-nav-item.divider:hover, .menu-nav-ad .card-banner .card-banner-link {

   background: #570246;

   box-shadow: none;

}

.menu-nav-footer {

   padding: 0 20px 30px;

   margin: 0;

}

.menu-nav-item.ng-scope:hover {

   background: #4e023f;

}

.menu-nav-item .is-selected:hover,

.list-title, .outer-container .search-block--beta, .button-block, .button-half-block {

   background: #f5f5f5;

}

.menu-favorites-item, .menu-button-block {

   box-shadow: none;

}

.menu-nav-item.divider,

.menu-nav-item.divider:hover {

   background: #6d2f61;

   min-height: 2px;

   height: 2px;

   box-shadow: none;

}

.menu-input, .menu-button, .menu-button .is-selected, .menu-search {

   background: transparent;

   border-color: #000;

   box-shadow: none;

}

.button {

   background-image: none;

   background-color: #f5f5f5;

}

.button-card-footer, .button-card-footer-half-width{

   background-image: none;

   background-color: #f5f5f5;

   

}

.menu-favorites-item, .menu-button-block {

   background: #570246;

}

.button.critical {

   background-image: none;

   background-color: #ef3131;

}

.button.critical:hover {

   background-image:none;

   background-color:#c42727;

}

.widget-countdown-number {

   background-image: none;

   background-color: #d205a9;

}

 
 
 
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.