Customizing your Interface

This step by step tutorial is designed to help you customize your Survox Console install with your own logo image and branding. Below are steps that will help you to customize your interface.

Learn how to customize:

Background colors
Logos
Buttons
Font size
Font color
Border color
Header
Footer

In order to implement screen changes, you MUST have prior working knowledge Cascading Style Sheets!

Changes to the .css File

Below is the standard .css file supplied with the console. If you want to make any style changes, you can copy the contents of the file, make your style changes and then upload it to the /css directory in your web area.

/**************************

custom.css

file path: css/

Custom stylesheet

****************************/

/* Image for screen logo – Adjust height/width as needed */

.logo { margin-left: 15px; background-image: url(http://product01.cfmc.com/logo.png); height: 100px; }

/* Top header – height, background color, border */

.header1 { background-color: #054950; height: 90px; border-bottom: 2px solid white; font-size: 16px; }

/* Info Box – Login and study info for header */

div.infoBox { margin: 6px; font-size: 14px; color: #000; }

div.infoBox a { font-size: 14px; color: #789A9F; text-decoration: none; }

div.infoBox a:hover { font-size: 15px; color: #054950; text-decoration: underline; }

/* Background colors for body segments / left and right content boxes */

body { background-color: #789A9F; }

.page { background-color: #789A9F; }

.pageFrame { background-color: #789A9F; }

table#content td.left { background-color: #789A9F; }

table#content td.right { background-color: #789A9F; }

/* Buttons – main handles background strip */

.main { background-color: #789A9F; font-size: 16px; }

/* Horizontal menu buttons – width and font */

table#navigation td#navHome, table#navigation td#navAdmin, table#navigation td#navProjectCreation, table#navigation td#navSetup,

table#navigation td#navDeploy, table#navigation td#navManage, table#navigation td#navTracking,

table#navigation td#navAnalysis, table#navigation td#navShared, table#navigation td#navHelp { width: 105px; font-size:12px; }

/* Horizontal menu buttons – text color */

td#navHome a, td#navAdmin a, td#navProjectCreation a, td#navSetup a, td#navDeploy a, td#navManage a, td#navTracking a,

td#navAnalysis a, td#navShared a, td#navHelp a { color: #789A9F; }

/* Horizontal menu buttons – text color, mouseover */

td#navHome a:hover, td#navAdmin a:hover, td#navProjectCreation a:hover, td#navSetup a:hover, td#navDeploy a:hover,

td#navManage a:hover, td#navTracking a:hover, td#navAnalysis a:hover, td#navShared a:hover, td#navHelp a:hover

{ color: #054950; text-decoration: none; }

/* Horizontal menu buttons – background image/color, borders, margins */

table#navigation td#navHome div, table#navigation td#navAdmin div, table#navigation td#navProjectCreation div, table#navigation

td#navSetup div, table#navigation td#navDeploy div, table#navigation td#navManage div, table#navigation td#navTracking div,

table#navigation td#navAnalysis div, table#navigation td#navShared div, table#navigation td#navHelp div

{ margin-left: 2px; padding: 0 2px 0 2px; background-image: none; background-color: #fff; border: 1px outset #054950; }

/* Horizontal menu buttons – mouseover text and background colors */

table#navigation td#navHome div:hover, table#navigation td#navAdmin div:hover, table#navigation td#navProjectCreation div:hover,

table#navigation td#navSetup div:hover, table#navigation td#navDeploy div:hover, table#navigation td#navManage div:hover,

table#navigation td#navTracking div:hover, table#navigation td#navAnalysis div:hover, table#navigation td#navShared div:hover,

table#navigation td#navHelp div:hover { color: #054950; background-color: #efefef; background-image: none;}

/* Horizontal menu buttons – selected menu item text and background color */

table#navigation td#navHome div.selected, table#navigation td#navAdmin div.selected, table#navigation td#navProjectCreation div.selected,

table#navigation td#navSetup div.selected, table#navigation td#navDeploy div.selected, table#navigation td#navManage div.selected,

table#navigation td#navTracking div.selected, table#navigation td#navAnalysis.selected, table#navigation td#navShared div.selected,

table#navigation td#navHelp div.selected { background-color: #054950; text-decoration: none; background-image: none;}

/* Footer font size and color */

.footer_tag { color: #efefef; font-size: 10px; margin: 5px; }

HTML Color Codes

Below is a chart to help you choose your HTML color codes.

#FBEFEF

#FBF2EF

#FBF5EF

#FBF8EF

#FBFBEF

#F8FBEF

#F5FBEF

#F2FBEF

#EFFBEF

#EFFBF2

#EFFBF5

#EFFBF8

#EFFBFB

#EFF8FB

#EFF5FB

#EFF2FB

#EFEFFB

#F2EFFB

#F5EFFB

#F8EFFB

#FBEFFB

#FBEFF8

#FBEFF5

#FBEFF2

#FFFFFF

#F8E0E0

F8E6E0

#F8ECE0

#F7F2E0

#F7F8E0

#F1F8E0

#ECF8E0

#E6F8E0

#E0F8E0

#E0F8E6

#E0F8EC

#E0F8F1

#E0F8F7

#E0F2F7

#E0ECF8

#E0E6F8

#E0E0F8

#E6E0F8

#ECE0F8

#F2E0F7

#F8E0F7

#F8E0F1

#F8E0EC

#F8E0E6

#FAFAFA

#F6CECE

#F6D8CE

#F6E3CE

#F5ECCE

#F5F6CE

#ECF6CE

#E3F6CE

#D8F6CE

#CEF6CE

#CEF6D8

#CEF6E3

#CEF6EC

#CEF6F5

#CEECF5

#CEE3F6

#CED8F6

#CECEF6

#D8CEF6

#E3CEF6

#ECCEF5

#F6CEF5

#F6CEEC

#F6CEE3

#F6CED8

#F2F2F2

#F5A9A9

#F5BCA9

#F5D0A9

#F3E2A9

#F2F5A9

#E1F5A9

#D0F5A9

#BCF5A9

#A9F5A9

#A9F5BC

#A9F5D0

#A9F5E1

#A9F5F2

#A9E2F3

#A9D0F5

#A9BCF5

#A9A9F5

#BCA9F5

#D0A9F5

#E2A9F3

#F5A9F2

#F5A9E1

#F5A9D0

#F5A9BC

#E6E6E6

#F78181

#F79F81

#F7BE81

#F5DA81

#F3F781

#D8F781

#BEF781

#9FF781

#81F781

#81F79F

#81F7BE

#81F7D8

#81F7F3

#81DAF5

#81BEF7

#819FF7

#8181F7

#9F81F7

#BE81F7

#DA81F5

#F781F3

#F781D8

#F781BE

#F7819F

#D8D8D8

#FA5858

#FA8258

#FAAC58

#F7D358

#F4FA58

#D0FA58

#ACFA58

#82FA58

#58FA58

#58FA82

#58FAAC

#58FAD0

#58FAF4

#58D3F7

#58ACFA

#5882FA

#5858FA

#8258FA

#AC58FA

#D358F7

#FA58F4

#FA58D0

#FA58AC

#FA5882

#BDBDBD

#FE2E2E

#FE642E

#FE9A2E

#FACC2E

#F7FE2E

#C8FE2E

#9AFE2E

#64FE2E

#2EFE2E

#2EFE64

#2EFE9A

#2EFEC8

#2EFEF7

#2ECCFA

#2E9AFE

#2E64FE

#2E2EFE

#642EFE

#9A2EFE

#CC2EFA

#FE2EF7

#FE2EC8

#FE2E9A

#FE2E64

#A4A4A4

#FF0000

#FF4000

#FF8000

#FFBF00

#FFFF00

#BFFF00

#80FF00

#40FF00

#00FF00

#00FF40

#00FF80

#00FFBF

#00FFFF

#00BFFF

#0080FF

#0040FF

#0000FF

#4000FF

#8000FF

#BF00FF

#FF00FF

#FF00BF

#FF0080

#FF0040

#848484

#DF0101

#DF3A01

#DF7401

#DBA901

#D7DF01

#A5DF00

#74DF00

#3ADF00

#01DF01

#01DF3A

#01DF74

#01DFA5

#01DFD7

#01A9DB

#0174DF

#013ADF

#0101DF

#3A01DF

#7401DF

#A901DB

#DF01D7

#DF01A5

#DF0174

#DF013A

#6E6E6E

#B40404

#B43104

#B45F04

#B18904

#AEB404

#86B404

#5FB404

#31B404

#04B404

#04B431

#04B45F

#04B486

#04B4AE

#0489B1

#045FB4

#0431B4

#0404B4

#3104B4

#5F04B4

#8904B1

#B404AE

#B40486

#B4045F

#B40431

#585858

#8A0808

#8A2908

#8A4B08

#886A08

#868A08

#688A08

#4B8A08

#298A08

#088A08

#088A29

#088A4B

#088A68

#088A85

#086A87

#084B8A

#08298A

#08088A

#29088A

#4B088A

#6A0888

#8A0886

#8A0868

#8A084B

#8A0829

#424242

#610B0B

#61210B

#61380B

#5F4C0B

#5E610B

#4B610B

#38610B

#21610B

#0B610B

#0B6121

#0B6138

#0B614B

#0B615E

#0B4C5F

#0B3861

#0B2161

#0B0B61

#210B61

#380B61

#4C0B5F

#610B5E

#610B4B

#610B38

#610B21

#2E2E2E

#3B0B0B

#3B170B

#3B240B

#3A2F0B

#393B0B

#2E3B0B

#243B0B

#173B0B

#0B3B0B

#0B3B17

#0B3B24

#0B3B2E

#0B3B39

#0B2F3A

#0B243B

#0B173B

#0B0B3B

#170B3B

#240B3B

#2F0B3A

#3B0B39

#3B0B2E

#3B0B24

#3B0B17

#1C1C1C

#2A0A0A

#2A120A

#2A1B0A

#29220A

#292A0A

#222A0A

#1B2A0A

#122A0A

#0A2A0A

#0A2A12

#0A2A1B

#0A2A22

#0A2A29

#0A2229

#0A1B2A

#0A122A

#0A0A2A

#120A2A

#1B0A2A

#220A29

#2A0A29

#2A0A22

#2A0A1B

#2A0A12

#151515

#190707

#190B07

#191007

#181407

#181907

#141907

#101907

#0B1907

#071907

#07190B

#071910

#071914

#071918

#071418

#071019

#070B19

#070719

#0B0719

#100719

#140718

#190718

#190714

#190710

#19070B

#000000

Image for screen logo

The logo will appear in the left corner of each console screen. The image will be static. You can adjust the height/width as needed.

.logo { margin-left: 15px; background-image: url(http://product01.cfmc.com/logo.png); height: 100px; }

Parameter	Description
Margin Properties	The margin properties define the transparent space surrounding an element.You can define the entire margin around an element or define thetop, bottom, right and left margins
Margin-left	Specifies the width between the element’s left border and outer edge
Margin-right	Specifies the width between the element’s right border and outer edge
Margin-top	Specifies the width between the element’s top border and outer edge
Margin-bottom	Specifies the width between the element’s bottom border and outer edge
Background-image	This is the URL where your background image exists
Height	Adjust the height/width of the image as needed

Top Header: Height, Background Color, Border

This area defines the header at the top of the console screen. Here you can define, the background color, height and border of the header.

.header1 { background-color: #054950; height: 90px; border-bottom: 2px solid white; font-size: 16px; }

Parameter	Description
Background-color	Use a 6 digit html color code from the html color code chart above to define the color of your header
Height	Defined in pixels. This determines the size (in height) of the header at the top of the screen.
Border-bottom	Sets the width, color, and style on the bottom border of an element
Border-top	Sets the width, color, and style on the top border of an element
Border-left	Sets the width, color, and style on the left border of an element
Border-right	Sets the width, color, and style on the right border of an element
Font-size	Size of font if you were to display text in the header. (Usually no text is displayed)

Info Box: Login & Study Info For Header

This area defines the login information box at the right side of the console screen.

div.infoBox { margin: 6px; font-size: 14px; color: #000; } – Controls the parameters for the Company Element
div.infoBox a { font-size: 14px; color: #789A9F; text-decoration: none; } – Controls the parameters for the User and Project Elements
div.infoBox a:hover { font-size: 15px; color: #054950; text-decoration: underline; } – Controls the hover parameters for the User and Project Elements

Parameter	Description
Margin	Controls the margin size of the elements
Font-Size	Controls the font size of the element
Color	Controls the color of the element
Text-Decoration	Specifies the decoration added to the text of an element
Text-Decoration: None	Defines normal text (default)
Text-Decoration: Underline	Draws a line below the text
Text-Decoration: Overline	Draws a line above the text
Text-Decoration: Line-Through	Draws a line through the text
Text-Decoration: Blink	Defines a blinking text

Background Colors for Body Segments/Left & Right Content Boxes

This area defines the background colors for the body segments and left and right content boxes.

body { background-color: #789A9F; } – Contains the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
.page { background-color: #789A9F; } – Controls the background color for the page
.pageFrame { background-color: #789A9F; } – Controls the background color for the frame (bottom) of the Navigator Screen
table#content td.left { background-color: #789A9F; } – Controls the color on the left side of the Navigator Screen
table#content td.right { background-color: #789A9F; } – Controls the color on the right side of the Navigator Screen \\

Parameter	Description
Background-color	Use a 6 digit html color code from the html color code chart above to define the background for Body Segments and Left & Right Content Boxes

Buttons: Main Handles/Background Strip

This area defines the font size of the text inside the text box on the left side of the console screen.

.main { background-color: #789A9F; font-size: 16px; }

Parameter	Description
Background-color	Use a 6 digit html color code from the html color code chart above to define the background color for the background strip
Font-Size	Controls the font size of the element in the main handle

Horizontal Menu Buttons

Width and Font

This area defines the width and font of the horizontal menu buttons at the top of the console screen.

table#navigation td#navHome, table#navigation td#navAdmin, table#navigation td#navProjectCreation, table#navigation td#navSetup,
table#navigation td#navDeploy, table#navigation td#navManage, table#navigation td#navTracking,
table#navigation td#navAnalysis, table#navigation td#navShared, table#navigation td#navHelp { width: 105px; font-size:12px; }

Parameter	Description
Width	Sets the width of an element
Font-size	Controls the font size of the horizontal menu buttons

Text Color

This area defines the text color inside the horizontal menu buttons at the top of the console screen.

td#navHome a, td#navAdmin a, td#navProjectCreation a, td#navSetup a, td#navDeploy a, td#navManage a,
td#navTracking a, td#navAnalysis a, td#navShared a, td#navHelp a { color: #789A9F; }

Parameter	Description
Color	Controls the text color of the horizontal menu buttons

Text Color, Mouseovers

This area defines the mouseover text color when hovering over the horizontal menu buttons at the top of the console screen.

td#navHome a:hover, td#navAdmin a:hover, td#navProjectCreation a:hover, td#navSetup a:hover, td#navDeploy a:hover,
td#navManage a:hover, td#navTracking a:hover, td#navAnalysis a:hover, td#navShared a:hover, td#navHelp a:hover
{ color: #054950; text-decoration: none; }

Parameter	Description
Color	Controls the text color when hovering over the horizontal menu buttons
Text-Decoration	Specifies the decoration added to the text of an element
Text-Decoration: None	Defines normal text (default)
Text-Decoration: Underline	Draws a line below the text
Text-Decoration: Overline	Draws a line above the text
Text-Decoration: Line-Through	Draws a line through the text
Text-Decoration: Blink	Defines a blinking text

Background Image/Color, Borders, Margins

This area defines the mouseover text color when hovering over the horizontal menu buttons at the top of the console screen.

table#navigation td#navHome div, table#navigation td#navAdmin div, table#navigation td#navProjectCreation div,
table#navigation td#navSetup div, table#navigation td#navDeploy div, table#navigation td#navManage div,
table#navigation td#navTracking div, table#navigation td#navAnalysis div, table#navigation td#navShared div,
table#navigation td#navHelp div
{ margin-left: 2px; padding: 0 2px 0 2px; background-image: none; background-color: #fff; border: 1px outset #054950; }

Parameter	Description
Margin Properties	The margin properties define the transparent space surrounding an element. You can define the entire margin around an elementor define the top, bottom, right and left margins.
Margin-left	Specifies the width between the element’s left border and outer edge
Margin-right	Specifies the width between the element’s right border and outer edge
Margin-top	Specifies the width between the element’s top border and outer edge
Margin-bottom	Specifies the width between the element’s bottom border and outer edge
Padding	Clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
Background-image	This is the URL where your background image exists
Background-color	Use a 6 digit html color code from the html color code chart above to define the background color for the buttons
Border	Specifies what kind of border to display
Border:dotted	Specifies a dotted border
Border:dashed	Specifies a dashed border
Border:solid	Specifies a solid border
Border:double	Specifies two borders. The width of the two borders are the same as the border-width value
Border:groove	Specifies a 3D grooved border depending on the border-color value
Border:ridge	Specifies a 3D ridged border depending on the border-color value
Border:inset	Specifies a 3D inset border depending on the border-color value
Border:outset	Specifies a 3D outset border depending on the border-color value

Mouseover Text & Background Colors

This area defines the mouseover background color when hovering over the horizontal menu buttons at the top of the console screen.

table#navigation td#navHome div:hover, table#navigation td#navAdmin div:hover, table#navigation td#navProjectCreation div:hover, table#navigation td#navSetup div:hover, table#navigation td#navDeploy div:hover, table#navigation td#navManage div:hover, table#navigation td#navTracking div:hover, table#navigation td#navAnalysis div:hover, table#navigation td#navShared div:hover, table#navigation td#navHelp div:hover { color: #054950; background-color: #efefef; background-image: none;}

Parameter	Description
Color	Controls the color of the element
Background-color	Use a 6 digit html color code from the html color code chart above to define the background color for the buttons when hovered over
Background-image	This is the URL where your background image exists

Selected Menu Item Text & Background Color

This area defines the background color for the horizontal menu buttons when selected.

table#navigation td#navHome div.selected, table#navigation td#navAdmin div.selected, table#navigation td#navProjectCreation
div.selected,table#navigation td#navSetup div.selected,table#navigation td#navDeploy div.selected, table#navigation td#navManage
div.selected, table#navigation td#navTracking div.selected, table#navigation td#navAnalysis.selected, table#navigation td#navShared
div.selected, table#navigation td#navHelp div.selected { background-color: #054950; text-decoration: none; background-image: none;}

Parameter	Description
Background-color	Use a 6 digit html color code from the html color code chart above to define the background color for the buttons when selected
Text-Decoration	Specifies the decoration added to the text of an element
Text-Decoration: None	Defines normal text (default)
Text-Decoration: Underline	Draws a line below the text
Text-Decoration: Overline	Draws a line above the text
Text-Decoration: Line-Through	Draws a line through the text
Text-Decoration: Blink	Defines a blinking text
Background-image	This is the URL where your background image exists

Footer Font Size & Color

This area defines the font size and color of the footer tag that appears on the bottom of the console screen.

.footer_tag { color: #efefef; font-size: 10px; margin: 5px; }

Parameter	Description
Color	Use a 6 digit html color code from the html color code chart above to define the color of the footer tag
Font-Size	Controls the font size of the element in the main handle
Margin	Controls the margin size of the elements

To customize the Survox Console with your own logo image, use the following steps:

Upload your new logo image to the web OUTSIDE of the console’s web area
- This file can be any of the following graphic formats; .jpg, .gif, .png
- The dimensions should be 700 px (w) x 69 px (h).
- Placing it within the images directory of the console’s web area will mean it will get deleted on the next update
Open the css file “css/custom_example.css”
- This is the default file that is distributed with all installs and updates
- This example file will ALWAYS be overwritten on updates
- This file MUST be renamed to just ‘custom.css’ as per step #4 below for it to work
Search for the class ”.logo” and edit the URL. Replace the existing entry ”../images/logo.jpg” with your new logo’s full path defined in step #1.
- Change: .logo {
- background-image: url(../images/logo.jpg);
- }
  to.logo {
- background-image: url(http://www.somedomain.com/images/your_logo_image.jpg);
- }
Save the file as custom.css
To make any other changes to any of the .css classes, edit the newly modified custom.css file in step #4, make custom changes and save the file again. Make sure it is still named custom.css as per step #4
Upload the file “css/custom.css” to the Navigator’s css/ directory
Refresh and the new logo should appear in the upper left of every page in the console