Page Comparison

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

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

//Fjern venstresidemenu mappe-ikoner
.icon-folder {
    display: none;
}

// Fjern multishare 1 (Den ene får blot siden til ikke at se mærkelig ud)
.icon-share {
    display: none;
}

// Fjern multishare 2 (Den ene får blot siden til ikke at se mærkelig ud)
#multiselect-option-share {
    display: none;
}

//Fjern multi download - fjerner også download fra collections
//.icon-download {    display: none;}

//Fjern language picker (Nede i højre hjørne)
.languageSwitcher {
    display: none;
}

//Få download tilbage på collections
.mp2.preview {
	.collectionPreview {
		.assetManager-asset-options {
			display:block!important;
		}
	}
}

//Få "remove asset from collection" (x) tilbage i collections-vieweren
.layout.mp2 {
	.collectionManager {
		.assetManager-asset-options {
			display:block!important;
		}
	}
}

//Få farvet navigations-barens text + icons (Collections)
#id-top-navbar-collections {
	.nav-label-rightIcon {
		color:#B6163E; 
	}

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

//Få farvet navigations-barens text + icons (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; }

#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.