Standard/Responsive HTML - Layout and design
Compose Enterprise is going through a design update. The illustrations on this page might be of the old design, but the information is up to date. Thank you for your patience during this update!
If you’re creating a design with a responsiveHTML or standardHTML framework, then the CSS code in this user guide can be used to customize the general layout. This user guide will explain the preview settings for the frameworks and also provide some simple CSS code to change colors, rounded corners and hide layout elements.
Note: You’ll find fewer relevant user guides in this documentation space if your service uses standardHTML or responsiveHTML framework. We highly advice converting your Compose services to bootstrap framework as it delivers a better fundament to support responsive design. The future user guides will mainly be centered around responsive design. See the Bootstrap theme user guide for more information.
When setting the pixels in the service design settings (either in the Form Preview Settings or the Workflow Settings section), the illustration below displays what layout elements are affected.
Colors
This CSS code can be used to change the main color palette of the design:
.Respondent-mainWrapper .left-box-gradient {
background-color: #E6C239;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E6C239', endColorstr='#CF8606'); /* for IE */
background: -webkit-gradient(linear, left top, right top, from(#E6C239), to(#CF8606)); /* for webkit browsers */
background: -moz-linear-gradient(left, #E6C239, #CF8606); /* for firefox 3.6+ */
}
.Respondent-mainWrapper.haveLeftNavigation .left-menu-color {
background-color: #FCF4E9 !important;
border-right: 1px solid #C0C0C0;
box-shadow: -1px 0 3px 0 #BBBBBB inset;
left: 0;
z-index: 2;
}
.Respondent-mainWrapper.haveHelpSection .help-area-color {
background-color: #f5f5f5;
border-left: 1px solid #C0C0C0;
box-shadow: 1px 0 3px 1px #CCCCCC inset;
left: auto;
right: 11px;
z-index: 4;
}Rounded corners
The amount of “roundness” is a scale from 24 to 0. The round corners are made with images.
/* corner roundness - 24 */
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span { height: 36px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span { height: 36px; width: 36px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span { height: 36px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span { height: 36px; width: 36px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center { height: 36px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span {
background-image: url("images/light/corners-shadow-24.png");
*background-image: url("images/light/corners-shadow-24.gif");
}
/* corner roundness - 12 */
/*
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span { height: 24px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span { height: 24px; width: 24px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span { height: 24px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span { height: 24px; width: 24px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center { height: 24px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span {
background-image: url("images/light/corners-shadow-12.png");
*background-image: url("images/light/corners-shadow-12.gif");
}
*/
/* corner roundness - 6 */
/*
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span { height: 16px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span { height: 16px; width: 16px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span { height: 16px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span { height: 16px; width: 16px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center { height: 16px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span {
background-image: url("images/light/corners-shadow-6.png");
*background-image: url("images/light/corners-shadow-6.gif");
}
*/
/* corner roundness - 0 */
/*
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span { height: 12px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span { height: 12px; width: 12px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span { height: 12px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span { height: 12px; width: 12px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center { height: 12px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span {
background-image: url("images/light/corners-shadow-0.png");
*background-image: url("images/light/corners-shadow-0.gif");
}
*/Dark background
You can also combine the same round corners but with a dark background. Images for round corners in a dark background are also provided.
.Respondent-mainWrapper .mainTable {
background-image: url("images/dark/left-shadow.png");
*background-image: url("images/dark/left-shadow.gif");
}
.Respondent-mainWrapper .mainTable > div,
.Respondent-mainWrapper .mainTable > div > span {
background-image: url("images/dark/right-shadow.png") !important;
*background-image: url("images/dark/right-shadow.gif") !important;
}
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center {
background-image: url("images/dark/top-shadow.png");
*background-image: url("images/dark/top-shadow.png");
}
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center {
background-image: url("images/dark/bottom-shadow.png");
*background-image: url("images/dark/bottom-shadow.png");
}
/* corner roundness - 24 */
/*
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span { height: 36px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span { height: 36px; width: 36px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span { height: 36px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span { height: 36px; width: 36px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center { height: 36px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span {
background-image: url("images/dark/corners-shadow-24.png");
*background-image: url("images/dark/corners-shadow-24.gif");
}
*/
/* corner roundness - 12 */
/*
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span { height: 24px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span { height: 24px; width: 24px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span { height: 24px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span { height: 24px; width: 24px;
}
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span {
background-image: url("images/dark/corners-shadow-12.png");
*background-image: url("images/light/corners-shadow-12.gif");
}
*/
/* corner roundness - 6 */
/*
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span { height: 16px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span { height: 16px; width: 16px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span { height: 16px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span { height: 16px; width: 16px;
}
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span {
background-image: url("images/dark/corners-shadow-6.png");
*background-image: url("images/dark/corners-shadow-6.gif");
}
*/
/* corner roundness - 0 */
/*
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span { height: 12px; }
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span { height: 12px; width: 12px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span { height: 12px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span { height: 12px; width: 12px;
}
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableThead > div.table-borders span.table-center > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-left > span,
.Respondent-mainWrapper .mainTable > .mainTableTfoot > div.table-borders span.table-center > span {
background-image: url("images/dark/corners-shadow-0.png");
*background-image: url("images/dark/corners-shadow-0.gif");
}
*/Remove the gradient-colored left stripe:
/*Hide left stripe*/
/*
.Respondent-mainWrapper .left-box-gradient {
display: none;
width: 0px;
left: -58975px;
top: 587495px;
opacity: 0;
height: 0px;
}
.Respondent-mainWrapper .mainTable .table-left > span { width: 36px; }
.Respondent-mainWrapper .mainTable > div > div > span.table-center { margin-left: 11px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot > .table-borders { margin-left: -11px; }
.Respondent-mainWrapper .mainTable > .mainTableTfoot { margin-left: 11px; }
.Respondent-mainWrapper .mainTableTbody > .tbodyContent > .table-left > span { width: 11px; }
.Respondent-mainWrapper .mainTable .table-toolbar .table-center > span {
border-left: 1px solid #AAAAAA;
}Standard HTML design:
, multiple selections available,