Customizing the Styling with your own House Style Colors

[bok-callout type=”orange”]PLEASE NOTE:  The following instructions are pure customizations, therefore, they are not officially supported by Collibra. They are intended solely for the purpose as a guide.  These were created on DGC v. 4.3.1 and are not guaranteed to work in newer versions.  Collibra has the permission of Stanford University to use these screenshots and settings.[/bok-callout]

In the following sections, we give some examples of customizing the colors of the key components of the user interface. You can use this example as a basis to set your own house style colors, and place this file with a CSS in the $HOME/styling folder. Doing this will override the default color settings. You can start from the file enclosed which is explained in the following sections.

Note: This list is not exhaustive, you can inspect more options by right clicking on an element and toggling on the developer tools in your browser. 

Below you will see an example of where to include these changes:

End Result

Color Set

The first step is to select the color palette you will be using and include the hexadecimal values in comments at the beginning of the CSS file. The house style guide of your company usually provides these. Below is an example:

Color Set
@CHARSET "UTF-8";

/* PRIMARY COLORS /* 

Cardinal #8C1515

Cool Grey #4d4f53

Process black #000000

/* NEUTRAL COLORS

Light sand #D2C295

Darker Sand #B3995D

Mid Grey #928B81

Light Grey #B6B1A9

White-like #dad7cb

Pastel #C7D1C5

*/
					
					

 

General Background

The background consists of basically four colors to customize in the following elements that appear on every page in DGC, as shown in the images below:

  1. general background
  2. the border of the main frame
  3. the background color within the main frame
  4. the font of the footer

[bok-callout]Change the logo
Note, the logo is customized elsewhere. This is explained here: Changing the Product Logo and Background[/bok-callout]

/* =========== BACKGROUND =========== */
/* Note: only choose one of the two below options */
/* ----------- 1a : general background color overriding the gradient ----------- */
	/* div#maincontainer { background: #00A4E4 !important;} */
/* ----------- 1b : general background color preserving the gradient ----------- */
	BODY { background-color: #B3995D !important;}

/* ----------- 2 : frame border background color ----------- */
#contentwrapper { border: 4px #D2C295  solid ; }
/* ----------- 3 : in-frame background color  ----------- */
/* #contentwrapper { background-color: #D2C295; } */
/* ----------- 4 : general background color  ----------- */
#footer #footer-link, #footer .submit-bug { color: #D2C295; }
					
					

 

You can also customize all of the other key component areas are described and shown below:

Navigation Bar

  1. Background color and gradient
  2. Border-bottom color
  3. Browser button label when closed
  4. Browser button label when opened
  5. Divider
  6. Breadcrumbs showing communities and domains
  7. Dashboard labels

 

/* =========== NAVIGATION MENU ===========  */
/* ----------- 1 : background color  ----------- */
DIV#navigationmenu {  background-color: #8C1515 !important; }
 
/* Remove the gradient from the green bar at the top. */
#navigationmenu {
    background-image: none;
  /* Use background property to create your own gradient: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient */
}
 
/* ----------- 2 : border-bottom color  ----------- */
DIV#navigationmenu {  border-bottom-color: #B3995D !important;}
/* ----------- 3 : "browser" button label when closed  ----------- */
DIV#navigationmenu > .navigatorbutton > .label {
 color: #D2C295;
}
/* ----------- 4 : "browser" button label when opened  ----------- */
#navigationmenu>.navigatorbutton.opened>.label {
color: #dad7cb;
}

/* ----------- 5 : divider  ----------- */
DIV#navigationmenu > .navigatorbutton > .divider {
background: #D2C295;
}
/* ----------- 6 : breadcrumbs showing communities and domains  ----------- */
#navigationmenu DIV#breadcrumb ul li a {
  color: #D2C295 !important;
}

/* ----------- 7 : dashboard labels  ----------- */
#ds-navigation-list A { color: #D2C295;}
					
					

 

Title Bar

/* =========== TITLE BAR =========== 
 
/* ----------- 1 : color  ----------- */
DIV#titlebar {    background-color: #4D4F53 !important; }
					
					
					

 

Top Right Product Menu

  1. Context arrow
  2. Separator between menu items
  3. Menu item label
  4. Menu item image
  5. Selected menu item and image when hovering 
  6. Any menu item and image when hovering
  7. Avatar picture frame
  8. Avatar image when hovering
  9. Avatar account label

 

/* =========== TOP RIGHT PRODUCT MENU ===========  */
/* ----------- 1 : context arrow  ----------- */
/* ----------- (should be same color as BACKGROUND (2) : frame border background color  ----------- */
#mainmenu .contextarrow{ border-color:transparent transparent #D2C295 !important; }
/* ----------- ? : ???  ----------- */
/* #mainmenu .menuitem{
  color: #C7D1C5;
}*/
/* ----------- 2 : separator between menu items  ----------- */
#mainmenu > .separator {   background-color: #DAD7CB; }
/* ----------- 3 : menu item label  ----------- */
#mainmenu .menuitem > .label {   color: #DAD7CB ; }
/* ----------- 4 : menu item image  ----------- */
#mainmenu .menuitem .image {   color: #DAD7CB ; }

/* ----------- 5 : selected menu item label and image when hovering over it  ----------- */
#mainmenu SPAN.menuitem.selected:hover > .label,
#mainmenu SPAN.menuitem.selected:hover > .image {
  color: #EAAB00 !important;
}
/* ----------- 6 : any menu item label and image when hovering over it  ----------- */
#mainmenu .menuitem:hover > .label,
#mainmenu .menuitem:hover > .image {
  color: #EAAB00;
}
/* ----------- 7 : avatar picture frame  ----------- */
#mainmenu .menuitem > .avatar {
  border-color: #B26F16 !important;
}
/* ----------- 8 : avatar image when hovering over it  ----------- */
#mainmenu .menuitem:hover > .avatar {
  border-color: #B26F16 !important;
}
/* ----------- 9 : avatar account label  ----------- */
#mainmenu .menuitem > .label.account {
  color: #B26F16;
}
					
					
					

 

  1. Search bar frame
  2. Search magnifying glass icon

 

/* =========== SEARCH =========== */
/* ----------- 1 : search bar frame  ----------- */
DIV#mainsearch {
border: 2px solid #D2C295 !important;
}
/* ----------- 2 : search magnifying glass icon  ----------- */
#mainsearch > .icon-search {
color: #D2C295;
}
					
					

Browser

  1. Background color of the browser
  2. Sidebar of the browser
  3. Background of the browser top-part
  4. Color browser label when opened
  5. Icon for expand and collapse in browser
  6. Line under the search bar in browser
  7. Magnifying glass icon in browser
  8. Search text in browser
  9. Bottom shadow of browser bar
  10. Community and domain icons in browser
  11. (not shown) Change the color of the characters for community and domain names in the browser.

 

/* =========== BROWSER  ===========
/* ----------- 1 : background of the browser ----------- */
/* #browser-module .browser-content-wrapper .browser-content {   background-color: #4D4F53; } */
/* ----------- 2: sidebar of the browser ----------- */
 #browser-module .browser-content-wrapper .browser-content .sidebar {   background-color: #8C1515; }
}
/* ----------- 3 : background of the browser top-part ----------- */
/* .navigatorbutton.opened {
  background: #97c859 url("/dgc430/resources/library/images/gradients/menubar.png") repeat-x 0 -25px;
  border-bottom: #97c859 2px;
}*/
/* ----------- 4: colour "browser" label when opened ----------- */
/* #navigationmenu>.navigatorbutton.opened>.label { color: #white; } */
/* ----------- 5 : icon for expand and collapse in browser ----------- */
/* #browser-module .browser-content-wrapper .browser-content .browser-tree .tree .icon-expand,
#browser-module .browser-content-wrapper .browser-content .browser-tree .tree .icon-collapse {
  color: #005984;
}*/

/* ----------- 6 : line under the search bar in browser ----------- */
/* #browser-module .browser-content-wrapper .browser-widget-filter-wrapper .filter-wrapper INPUT {
  border-color: #005984;
  color: #005984;
}*/
/* ----------- 7 : magnifying glass icon in browser ----------- */
/*
#browser-module .browser-content-wrapper .browser-widget-filter-wrapper .filter-wrapper I.icon-search {
  color: #005984;
}
*/
/* ----------- 8: search text in browser ----------- */
/*
#browser-module .browser-content-wrapper .browser-widget-filter-wrapper .filter-wrapper INPUT:focus,
#browser-module .browser-content-wrapper .browser-widget-filter-wrapper .filter-wrapper:hover INPUT {
 color: #005984 !important;
}
*/
/* ----------- 9 : bottom shadow of browser bar ----------- */
/* #browser-module .browser-content-wrapper {  box-shadow: -3px 4px 4px -3px black; }*/
/* ----------- 10 : community and domain icons in browser ----------- */
/*
#browser-module .browser-content-wrapper .browser-content .browser-tree .tree A {
  color: #005984;
}
#browser-module .browser-content-wrapper .browser-content .browser-tree .tree L {
  color: #005984;
}
#browser-module .browser-content-wrapper .browser-content .browser-tree .tree LI {
  color: #005984;
}*/
 



/* ----------- 11 : text for community and domains characters ----------- */


#browser-module .browser-content-wrapper .browser-content .browser-tree .tree A {
  /* Enter the color for the browser text underneath. ‘white’ by default. */
  color: …;
}
 
#browser-module .browser-content-wrapper .browser-content .browser-tree .tree .jstree-hovered, #browser-module .browser-content-wrapper .browser-content .browser-tree .tree .jstree-anchor:hover {
  /* Enter the color for the browser text on hover underneath. ‘#b6cb9c’ by default. */
  color: …;
}
 
/*The browser arrows cannot change color. They are images so new ones will have to be created in order to do that.*/
					
					

You have to login to comment.