Кстати вы можете объединить цветную форму с сайдбаром, И получится еще более "навороченная" форма.
Пример того, как я заморочился и сделал на одном из проектов (один из зарубежных сми):
Стили, которые использовал для этой формы:
body.breadcrumb-fancy .control-breadcrumb,
.control-breadcrumb.breadcrumb-fancy{
background-color: #5d5d5d;
}
.control-breadcrumb li a{
color: #fff;
}
body.breadcrumb-fancy .control-breadcrumb li:last-child,
.control-breadcrumb.breadcrumb-fancy li:last-child{
background-color: rgba(0, 0, 0, 0.1);
color: #cacaca;
}
body.breadcrumb-fancy .control-breadcrumb li:last-child:before,
.control-breadcrumb.breadcrumb-fancy li:last-child:before{
border-left-color: rgba(0, 0, 0, 0.1);
}
body.breadcrumb-fancy .control-breadcrumb li,
.control-breadcrumb.breadcrumb-fancy li{
background-color: rgba(0, 0, 0, 0.2);
color: #cacaca;
}
body.breadcrumb-fancy .control-breadcrumb li:after,
.control-breadcrumb.breadcrumb-fancy li:after{
border-left: 14px solid rgba(0, 0, 0, 0.1);
}
body.breadcrumb-fancy .control-breadcrumb li:before, .control-breadcrumb.breadcrumb-fancy li:before{
opacity: 0;
}
.fancy-layout .control-tabs.secondary-tabs > div > ul.nav-tabs, .fancy-layout.control-tabs.secondary-tabs > div > ul.nav-tabs{
background: #5d5d5d;
}
.fancy-layout .notPretty .form-tabless-fields label{
color: #2a3e51;
}
.compact-container.breadcrumb-fancy .fancy-layout .form-tabless-fields,
.compact-container.breadcrumb-fancy .fancy-layout .control-tabs.primary-tabs > div > ul.nav-tabs,
.compact-container.breadcrumb-fancy .fancy-layout.control-tabs.primary-tabs > div > ul.nav-tabs,
.compact-container.breadcrumb-fancy .fancy-layout .form-tabless-fields .loading-indicator-container .loading-indicator{
background: #5d5d5d;
}
.compact-container.breadcrumb-fancy .fancy-layout .form-tabless-fields input[type=text]{
background: rgba(0,0,0,.2);
color: #fff;
padding: 0 39px 0 10px;
}
.compact-container.breadcrumb-fancy .fancy-layout .form-tabless-fields .field-multilingual .ml-btn,
.compact-container.breadcrumb-fancy .fancy-layout .form-buttons .btn,
.compact-container.breadcrumb-fancy .fancy-layout .form-tabless-fields label{
color: #fff;
}
.compact-container.breadcrumb-fancy .fancy-layout .form-tabless-fields input[type=text]:focus, .compact-container.breadcrumb-fancy .fancy-layout .form-tabless-fields input[type=text]:hover{
background-color: rgba(154, 154, 154, 0.1);
}
.compact-container.breadcrumb-fancy .layout.fancy-layout>.layout-row>.layout-row {
height: 100%;
}
.compact-container.breadcrumb-fancy .heading-area textarea {
font-size: 30px;
background-color: rgba(0,0,0,0.2);
color: #fff;
font-weight: 200;
border: none;
box-shadow: none;
margin-top: 0px;
margin-bottom: 0px;
height: 120px !important;
max-height: 120px !important;
min-height: 120px !important;
resize: none;
}
.compact-container.breadcrumb-fancy .heading-area textarea:focus, .heading-area textarea:hover{
border:none !important;
background-color: rgba(154,154,154,0.1);
}
Цветовая схема:
Первичный:#262322
Вторичный: #ad2729
