Page Comparison

Open the MP2 → style_overwrites → variables.less file described in the previous chapter and start configuring the Media Manager.

Remember to remove the comment out slashes (//).

Specify the colors to be updated, one per line, following the pattern: @color-variable-name: desired_color;

Example:

@header-background-color: #2c2c2c;

@header-background-color: #ffffff;

A list of all variables names available can be found in Chapter 3.

Code Block

language	css
title	Often used variables

//Theme color
@color-highlight: #31B69F;
 
//Top of the page
@color-background-top : #393939;
 
//Notification color (Used when highlight is green - e.g. for default DZ skin)
@color-theme-notification-color: @color-highlight;
 
//Custom quality selector (Download custom) top
@color-lightbox-secondary-bg: @color-highlight;
 
//Custom quality selector (Download custom) send button
@color-lightbox-secondary-btn-bg: @color-highlight;

//Splash screen - continue button text
@color-splashscreen-info-badge-continue-text: @color-splashscreen-info-badge-title-text;

//Splash screen - continue button border
@color-splashscreen-info-badge-continue-border: @color-splashscreen-info-badge-title-text;

//Make it so that next buttons don't fade away upon hovering (Used when highlight is bright)
@color-button-highlight-bg-hover: #2F2F2F;

//Top bar - Pad-lock colors (Icon and background)
@color-header-user-avatar-bg: #A6A6A6;
@color-header-user-avatar-icon: #FFFFFF;

//Login name - Name and hover colors
@color-header-user-name: #A6A6A6;
@color-header-user-name-hover: #000000;


//The color for the button when not enabled (Next + send to me)
@color-button-highlight-bg: #000000;

//Make buttons not disappear upon hovering (e.g. next button)
@color-button-highlight-bg-hover: #2F2F2F;

Code Block

language	css
title	Often used styles

// Removes left side content menu icons
.icon-folder { display: none; }

// Removes multi-share 1 (This makes the page not look so weird)
.icon-share { display: none; }

// Removes multi-share 2 (This makes the page not look so weird)
#multiselect-option-share { display: none; }

// Removes multi-download - also removes the download icon from collections - meaning that you cannot download from collections
//.icon-download { display: none; }

// Removes the language picker (In the lower right corner)
.languageSwitcher { display: none; }

// Makes the download icon reappear on collections
.mp2.preview {
	.collectionPreview {
		.assetManager-asset-options {
			display:block!important;
		}
	}
}

// Makes "remove asset from collection" (x) reappear in the collections viewer
.layout.mp2 {
	.collectionManager {
		.assetManager-asset-options {
			display:block!important;
		}
	}
}

// Changes the navigation bar's text's and icon's color (For "Collections")
#id-top-navbar-collections {
	.nav-label-rightIcon {
		color:#B6163E; 
	}

	.icon-collection {
		color:#B6163E;
	}
}

// Changes the navigation bar's text's and icon's color (For "Menu")
//#id-top-navbar-menu {
//	color:#A5E1E6;
//
//	.icon-menu {
//		color:#A5E1E6;
//	}
//}

// Removes logout posibility individually
//#id-header-profileDropdown-logout { display: none; }

// Removes account accessing posibilities individually
//#id-header-profileDropdown-profile { display: none; }

// Removes account accessing and logout posibilities
.header-profileDropdown { display: none; }

// Changes color on something (Please update this text if you know where)
#collection-create-deployTerms { color: #A5E1E6; }

Code Block

language	powershell
title	Makes the main.css appear in your build folder

:: This file builds the MM project
call .\node_modules\.bin\lessc.cmd ..\MP2\src\styling\less\main.less ..\MP2\dist\app\css\main.css --clean-css="--s0"
:: xcopy /s ..\MP2\dist\app\css\main.css %USERPROFILE%\Desktop
xcopy /s ..\MP2\dist\app\css\main.css .
ECHO "Done!"
pause

2.1 Font Family

The default primary font can be changed by setting the @primary-font-name to the family name of the desired font.

Example: @primary-font-name: 'Comic Sans', arial, sans-serif;

If the font needs to be loaded from an external source (like Google Fonts), the import statement and the set of the @primary-font-name should be the first entries in the file.

Example:

@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700);

@primary-font-name: 'Comic Sans', arial, sans-serif;

@header-background-color: #2c2c2c;

Note: When loading an external font face, it is recommended to include in the @primary-font-name a list of fallback fonts that can be used in case the desired one is not accessible.

Note: If the application will run over HTTPS, the URL for the external font resource must also be using HTTPS, otherwise the browser will block it for security reasons.