Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Current »

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.


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;
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; }


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.

2.2 Splash screen


2.3 Login Box

2.4 Top bar

2.5 Menu bar

2.6 Left Menu

2.7 Search

2.8 Footer

2.9 Collection

2.10 Notification bar

2.11 Popup

2.12 Tooltip

2.13 Filter bar

2.14 Asset Manager

2.15 Asset Preview



2.16 Asset info

2.17 Multiselect bar

2.18 Paging

2.19 Forms

2.20 Confirm icon

2.21 Admin bar

2.22 Upload

 

2.23 Profile

2.24 Custom image quality selector

2.25 Quality selector

 

2.26 Taskmanager

2.27 FlowPlayer

Table of Contents

  • No labels