В этом посте научимся создавать и подключать собственные темы и стили к форме обратной связи Битрикс.
В результате проделанной работы вы сможете самостоятельно сделать вот такую тему в модальном окне на темном фоне.
Необходимые настройки
В недавних обновлениях модуля Форма обратной связи + конструктор форм я добавил возможность подключать свои стили/темы опцией в настройках компонента
Если выбрать опцию другое и ничего не вписать, то к форме не будут применяться никакие встроенные стили.
Если выбрать опцию другое и что-то вписать, то будет подключаться при наличии выбранный файл стилей (тема) компонента по этому пути, но в зависимости от шаблона, например для .default шаблона путь /bitrix/components/api/main.feedback/templates/.default/
Применение своих стилей к форме возможно двумя способами:
1 способ:/bitrix/templates/имя шаблона сайта/template_styles.css2 способ:
Созданием своей темы для формы обратной связи, подключенной в настройках компонента.
Создание темы и подключение своих стилей для формы обратной связи
Мы рассмотрим подробнее второй способ, первый надеюсь будет понятен всем, кто умеет верстать и знаком с Битрикс.
Сначала в параметрах компонента необходимо задать новый стиль под каким-нибудь именем, например user и сохранить настройки компонента.
В этом случае компонент будет искать и подключать файл стилей из шаблона компонента с заданным именем, т.е. user.css, например вот здесь: /bitrix/components/api/main.feedback/templates/.default/
Имя придумывайте такое, чтобы я не придумал такое же, иначе при обновлении модуля ваш файл стилей перезапишется моим, а лучше сделайте его резервную копию и в случае чего восстановите.
Далее делаем копию файла стиля компонента uikit.css под именем user.css в той же папке шаблона компонента.
Все, теперь должен подключиться к форме файл user.css , который не будет перезаписываться при обновлениях модуля и будет подключаться только для этой формы.
Осталось узнать самое интересное, как применить стиль к этой форме, чтобы он не пересекался с другими стилями, по какому классу в html прицепиться?
А создается ко всей форме вот такой класс .tpl-default-user
Т.е. в самом начале идет название шаблона компонента tpl-default а потом заданный в настройках компонента стиль -user
Значит в скопированном стиле осталось класс .tpl-default-uikit заменить на свой класс .tpl-default-user и можно изменять стили как захочется, на свой вкус и цвет, они будут применяться только к этой форме.
Чтобы заменить все классы автоматически программой, чаще всего используется комбинация клавиш замены текста Ctrl + R, также и в PhpStorm делается.
Все найденные классы, которые будут заменены подсвечиваются полупрозрачным зеленым цветом, нажимаем кнопку Replace all и все классы заменятся на новый класс.
Все, на этом все настройки сделаны, теперь остается применить какие-нибудь свои стили к форме, например вот эти:
.tpl-default-user{position:relative;display:inline-block}
.tpl-default-user .api-mf-asterisk{color:#FF3737;font-size:14px;font-weight:700;margin-left:3px}
.tpl-default-user .api-mf-file-ext{font-size:11px;color:#6A6A6A}
.tpl-default-user input[type=text],.tpl-default-user select,.tpl-default-user textarea{width:265px;font-family:inherit;font-size:inherit;border:1px solid #8C8C8C;vertical-align:middle}
.tpl-default-user input[type=text]:focus,.tpl-default-user select:focus,.tpl-default-user textarea:focus{-webkit-box-shadow:0 1px #FFF,0 2px 6px 2px rgba(0,0,0,.1)inset;-moz-box-shadow:0 1px #FFF,0 2px 6px 2px rgba(0,0,0,.1)inset;box-shadow:0 1px #FFF,0 2px 6px 2px rgba(0,0,0,.1)inset}
.tpl-default-user .group-checkbox,.tpl-default-user .group-radio{width:265px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.tpl-default-user .group-checkbox.uk-form-danger,.tpl-default-user .group-checkbox.uk-form-success,.tpl-default-user .group-radio.uk-form-danger,.tpl-default-user .group-radio.uk-form-success{padding:4px 6px}
.tpl-default-user .api-mf-file-wrap{position:relative}
.tpl-default-user .api-mf-file-wrap input[type=file]{display:none}
.tpl-default-user .api-mf-file-name{font-size:13px}
.tpl-default-user .api-mf-hidden-input{display:none}
.tpl-default-user .api-mf-separator{text-align:center}
.tpl-default-user .api-mf-form-text-after,.tpl-default-user .api-mf-form-text-before{display:block;overflow:hidden;margin:15px 0;text-align:center}
.tpl-default-user .api-mf-button-text-before{text-align:center}
.tpl-default-user .ap-mf-form-title{margin:0 0 15px;padding:0;overflow:hidden;text-align:center}
.tpl-default-user img.calendar-icon{position:absolute;right:5px;top:50%;margin-top:-10px}
.tpl-default-user .api-mf-button-uuid{position:absolute;right:0;top:0}
.tpl-default-user .api-mf-antibot{border:0 none!important;font-size:0!important;height:0!important;line-height:0!important;padding:0!important;position:absolute!important;right:0!important;top:0!important;width:0!important}
.tpl-default-user .error-list ul{list-style:none;margin:0;padding:0;color:red;font-size:13px}
.tpl-default-user .uk-form-controls label{display:block}
.tpl-default-user .api-mf-captcha-inner{width:265px}
.tpl-default-user .api-mf-captcha input[type=text]{width:48%;text-transform:uppercase}
.tpl-default-user .api-mf-captcha img{width:50%}
.tpl-default-user .uk-form input,.tpl-default-user .uk-form select,.tpl-default-user .uk-form textarea{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;border-radius:0;font:inherit;color:inherit}
.tpl-default-user .uk-form select{text-transform:none}
.tpl-default-user .uk-form optgroup{font:inherit;font-weight:700}
.tpl-default-user .uk-form input::-moz-focus-inner{border:0;padding:0}
.tpl-default-user .uk-form input[type=checkbox],.tpl-default-user .uk-form input[type=radio]{padding:0}
.tpl-default-user .uk-form input[type=checkbox]:not(:disabled),.tpl-default-user .uk-form input[type=radio]:not(:disabled){cursor:pointer}
.tpl-default-user .uk-form input:not([type]),.tpl-default-user .uk-form input[type=text],.tpl-default-user .uk-form textarea{-webkit-appearance:none}
.tpl-default-user .uk-form fieldset{border:none;margin:0;padding:0}
.tpl-default-user .uk-form textarea{overflow:auto;vertical-align:top}
.tpl-default-user .uk-form ::-moz-placeholder{opacity:1}
.tpl-default-user .uk-form :invalid{box-shadow:none}
.tpl-default-user .uk-form input:not([type=radio]):not([type=checkbox]),.tpl-default-user .uk-form select{vertical-align:middle}
.tpl-default-user .uk-form>:last-child{margin-bottom:0}
.tpl-default-user .uk-form input:not([type]),.tpl-default-user .uk-form input[type=text],.tpl-default-user .uk-form select,.tpl-default-user .uk-form textarea{height:30px;max-width:100%;padding:4px 6px;border:1px solid #ddd;background:#fff;color:#444;-webkit-transition:all linear .2s;transition:all linear .2s;border-radius:4px}
.tpl-default-user .uk-form input:not([type]):focus,.tpl-default-user .uk-form input[type=text]:focus,.tpl-default-user .uk-form select:focus,.tpl-default-user .uk-form textarea:focus{border-color:#99baca;outline:0;background:#f5fbfe;color:#444}
.tpl-default-user .uk-form input:not([type]):disabled,.tpl-default-user .uk-form input[type=text]:disabled,.tpl-default-user .uk-form select:disabled,.tpl-default-user .uk-form textarea:disabled{border-color:#ddd;background-color:#fafafa;color:#999}
.tpl-default-user .uk-form :-ms-input-placeholder{color:#999!important}
.tpl-default-user .uk-form ::-moz-placeholder{color:#999}
.tpl-default-user .uk-form ::-webkit-input-placeholder{color:#999}
.tpl-default-user .uk-form :disabled:-ms-input-placeholder{color:#999!important}
.tpl-default-user .uk-form :disabled::-moz-placeholder{color:#999}
.tpl-default-user .uk-form :disabled::-webkit-input-placeholder{color:#999}
.tpl-default-user .uk-form legend{width:100%;border:0;padding:0;padding-bottom:15px;font-size:18px;line-height:30px}
.tpl-default-user .uk-form legend:after{content:"";display:block;border-bottom:1px solid #ddd;width:100%}
.tpl-default-user input:not([type]).uk-form-small,.tpl-default-user input[type].uk-form-small,.tpl-default-user select.uk-form-small,.tpl-default-user textarea.uk-form-small{height:25px;padding:3px;font-size:12px}
.tpl-default-user input:not([type]).uk-form-large,.tpl-default-user input[type].uk-form-large,.tpl-default-user select.uk-form-large,.tpl-default-user textarea.uk-form-large{height:40px;padding:8px 6px;font-size:16px}
.tpl-default-user .uk-form select[multiple],.tpl-default-user .uk-form select[size],.tpl-default-user .uk-form textarea{height:auto}
.tpl-default-user .uk-form-danger{border:1px solid;border-color:#dc8d99!important;background:#fff7f8!important;color:#d85030!important}
.tpl-default-user .uk-form-success{border:1px solid;border-color:#8ec73b!important;background:#fafff2!important;color:#659f13!important}
.tpl-default-user .uk-form-blank{border-color:transparent!important;border-style:dashed!important;background:none!important}
.tpl-default-user .uk-form-blank:focus{border-color:#ddd!important}
.tpl-default-user input.uk-form-width-mini{width:40px}
.tpl-default-user select.uk-form-width-mini{width:65px}
.tpl-default-user .uk-form-width-small{width:130px}
.tpl-default-user .uk-form-width-medium{width:200px}
.tpl-default-user .uk-form-width-large{width:500px}
.tpl-default-user .uk-form-row:after,.uk-form-row:before{content:"";display:table}
.tpl-default-user .uk-form-row:after{clear:both}
.tpl-default-user .uk-form-row+.uk-form-row{margin-top:15px}
.tpl-default-user .uk-form-help-inline{display:inline-block;margin:0 0 0 10px}
.tpl-default-user .uk-form-help-block{margin:5px 0 0}
.tpl-default-user .uk-form-controls>:first-child{margin-top:0}
.tpl-default-user .uk-form-controls>:last-child{margin-bottom:0}
.tpl-default-user .uk-form-controls-condensed{margin:5px 0;position:relative}
.tpl-default-user .uk-form-stacked .uk-form-label{display:block;margin-bottom:5px;font-weight:700;text-align:left}
.tpl-default-user .uk-form-stacked .group-button .uk-form-label{display:none}
.tpl-default-user .one-checkbox .uk-form-label{margin-top:5px;margin-right:5px;float:left;font-weight:700;text-align:left}
.tpl-default-user .one-checkbox .uk-form-controls-text{padding-top:5px}
.tpl-default-user .one-checkbox .error-list{clear: left}
@media (max-width:959px){
.tpl-default-user .uk-form-horizontal .uk-form-label{display:block;margin-bottom:5px;font-weight:700;text-align:left}
.tpl-default-user .group-button .uk-form-label{display: none;}
}
@media (min-width:960px){
.tpl-default-user .uk-form-horizontal .uk-form-label{width:200px;margin-top:5px;float:left;font-weight:700;text-align:right}
.tpl-default-user .uk-form-horizontal .uk-form-controls{margin-left:215px}
.tpl-default-user .uk-form-horizontal .uk-form-controls-text{padding-top:5px}
}
.tpl-default-user .uk-form-icon{display:inline-block;position:relative;max-width:100%}
.tpl-default-user .uk-form-icon>[class*=uk-icon-]{position:absolute;top:50%;width:30px;margin-top:-7px;font-size:14px;color:#999;text-align:center;pointer-events:none}
.tpl-default-user .uk-form-icon:not(.uk-form-icon-flip)>input{padding-left:30px!important}
.tpl-default-user .uk-form-icon-flip>[class*=uk-icon-]{right:0}
.tpl-default-user .uk-form-icon-flip>input{padding-right:30px!important}
.tpl-default-user .uk-alert{margin-bottom:15px;padding:10px;background:#ebf7fd;color:#2d7091;border:1px solid rgba(45,112,145,.3);border-radius:4px;text-shadow:0 1px 0 #fff;position: relative}
.tpl-default-user *+.uk-alert{margin-top:15px}
.tpl-default-user .uk-alert>:last-child{margin-bottom:0}
.tpl-default-user .uk-alert > div {padding: 0 0 0 55px !important;}
.tpl-default-user .uk-alert h1,.tpl-default-user .uk-alert h2,.tpl-default-user .uk-alert h3,.tpl-default-user .uk-alert h4,.tpl-default-user .uk-alert h5,.tpl-default-user .uk-alert h6{color:inherit}
.tpl-default-user .uk-alert>.uk-close:first-child{float:right}
.tpl-default-user .uk-alert>.uk-close:first-child+*{margin-top:0}
.tpl-default-user .uk-alert-success{background:#f2fae3;color:#659f13;border-color:rgba(101,159,19,.3)}
.tpl-default-user .uk-alert-success span{background: url("images/uk-alert-success.png") no-repeat 0 0;display: block;width: 36px;height: 33px;left: 15px;margin-top: -16px;position: absolute;top: 50%;}
.tpl-default-user .uk-alert-warning{background:#fffceb;color:#e28327;border-color:rgba(226,131,39,.3)}
.tpl-default-user .uk-alert-danger{background:#fff1f0;color:#d85030;border-color:rgba(216,80,48,.3)}
.tpl-default-user .uk-alert-large{padding:20px}
.tpl-default-user .uk-alert-large>.uk-close:first-child{margin:-10px -10px 0 0}
.tpl-default-user .uk-button::-moz-focus-inner{border:0;padding:0}
.tpl-default-user .uk-button{-webkit-appearance:none;margin:0;overflow:visible;font:inherit;color:#444;text-transform:none;display:inline-block;-moz-box-sizing:border-box;box-sizing:border-box;padding:0 12px;background:#f7f7f7;vertical-align:middle;line-height:28px;min-height:30px;font-size:1rem;text-decoration:none;text-align:center;border:1px solid rgba(0,0,0,.2);border-bottom-color:rgba(0,0,0,.3);background-origin:border-box;background-image:-webkit-linear-gradient(top,#fff,#eee);background-image:linear-gradient(to bottom,#fff,#eee);border-radius:4px;text-shadow:0 1px 0 #fff}
.tpl-default-user .uk-button:not(:disabled){cursor:pointer}
.tpl-default-user .uk-button:focus,.tpl-default-user .uk-button:hover{background-color:#fafafa;color:#444;outline:0;text-decoration:none;background-image:none}
.tpl-default-user .uk-button.uk-active,.tpl-default-user .uk-button:active{background-color:#f5f5f5;color:#444;border-color:rgba(0,0,0,.2);border-top-color:rgba(0,0,0,.3);background-image:none;box-shadow:inset 0 2px 4px rgba(0,0,0,.1)}
.tpl-default-user .uk-button-primary{background-color:#009dd8;color:#fff;background-image:-webkit-linear-gradient(top,#00b4f5,#008dc5);background-image:linear-gradient(to bottom,#00b4f5,#008dc5);border-color:rgba(0,0,0,.2);border-bottom-color:rgba(0,0,0,.4);text-shadow:0 -1px 0 rgba(0,0,0,.2)}
.tpl-default-user .uk-button-primary:focus,.tpl-default-user .uk-button-primary:hover{background-color:#00aff2;color:#fff;background-image:none}
.tpl-default-user .uk-button-primary.uk-active,.tpl-default-user .uk-button-primary:active{background-color:#008abf;color:#fff;background-image:none;border-color:rgba(0,0,0,.2);border-top-color:rgba(0,0,0,.4);box-shadow:inset 0 2px 4px rgba(0,0,0,.2)}
.tpl-default-user .uk-button-success{background-color:#82bb42;color:#fff;background-image:-webkit-linear-gradient(top,#9fd256,#6fac34);background-image:linear-gradient(to bottom,#9fd256,#6fac34);border-color:rgba(0,0,0,.2);border-bottom-color:rgba(0,0,0,.4);text-shadow:0 -1px 0 rgba(0,0,0,.2)}
.tpl-default-user .uk-button-success:focus,.tpl-default-user .uk-button-success:hover{background-color:#8fce48;color:#fff;background-image:none}
.tpl-default-user .uk-button-success.uk-active,.tpl-default-user .uk-button-success:active{background-color:#76b430;color:#fff;background-image:none;border-color:rgba(0,0,0,.2);border-top-color:rgba(0,0,0,.4);box-shadow:inset 0 2px 4px rgba(0,0,0,.2)}
.tpl-default-user .uk-button-danger{background-color:#d32c46;color:#fff;background-image:-webkit-linear-gradient(top,#ee465a,#c11a39);background-image:linear-gradient(to bottom,#ee465a,#c11a39);border-color:rgba(0,0,0,.2);border-bottom-color:rgba(0,0,0,.4);text-shadow:0 -1px 0 rgba(0,0,0,.2)}
.tpl-default-user .uk-button-danger:focus,.tpl-default-user .uk-button-danger:hover{background-color:#e33551;color:#fff;background-image:none}
.tpl-default-user .uk-button-danger.uk-active,.tpl-default-user .uk-button-danger:active{background-color:#c91c37;color:#fff;background-image:none;border-color:rgba(0,0,0,.2);border-top-color:rgba(0,0,0,.4);box-shadow:inset 0 2px 4px rgba(0,0,0,.2)}
.tpl-default-user .uk-button:disabled{background-color:#fafafa;color:#999;border-color:rgba(0,0,0,.2);background-image:none;box-shadow:none;text-shadow:0 1px 0 #fff}
.tpl-default-user .uk-button-link,.tpl-default-user .uk-button-link.uk-active,.tpl-default-user .uk-button-link:active,.tpl-default-user .uk-button-link:disabled,.tpl-default-user .uk-button-link:focus,.tpl-default-user .uk-button-link:hover{border-color:transparent;background:0 0;box-shadow:none;text-shadow:none}
.tpl-default-user .uk-button-link{color:#07d}
.tpl-default-user .uk-button-link.uk-active,.tpl-default-user .uk-button-link:active,.tpl-default-user .uk-button-link:focus,.tpl-default-user .uk-button-link:hover{color:#059;text-decoration:underline}
.tpl-default-user .uk-button-link:disabled{color:#999}
.tpl-default-user .uk-button-link:focus{outline:1px dotted}
.tpl-default-user .uk-button-mini{min-height:20px;padding:0 6px;line-height:18px;font-size:11px}
.tpl-default-user .uk-button-small{min-height:25px;padding:0 10px;line-height:23px;font-size:12px}
.tpl-default-user .uk-button-large{min-height:40px;padding:0 15px;line-height:38px;font-size:16px;border-radius:5px}
.tpl-default-user .uk-button-group{display:inline-block;vertical-align:middle;position:relative;font-size:0;white-space:nowrap}
.tpl-default-user .uk-button-group>*{display:inline-block}
.tpl-default-user .uk-button-group .tpl-default-user .uk-button{vertical-align:top}
.tpl-default-user .uk-button-dropdown{display:inline-block;vertical-align:middle;position:relative}
.tpl-default-user .uk-button-group>.uk-button:not(:first-child):not(:last-child),.tpl-default-user .uk-button-group>div:not(:first-child):not(:last-child) .uk-button{border-radius:0}
.tpl-default-user .uk-button-group>.uk-button:first-child,.tpl-default-user .uk-button-group>div:first-child .uk-button{border-top-right-radius:0;border-bottom-right-radius:0}
.tpl-default-user .uk-button-group>.uk-button:last-child,.tpl-default-user .uk-button-group>div:last-child .uk-button{border-top-left-radius:0;border-bottom-left-radius:0}
.tpl-default-user .uk-button-group>.uk-button:nth-child(n+2),.tpl-default-user .uk-button-group>div:nth-child(n+2) .uk-button{margin-left:-1px}
.tpl-default-user .uk-button-group .uk-button:active{position:relative}
/* Добавлены только эти стили ниже, стили выше от встроенной темы uikit.css */
.tpl-default-user .uk-form input:not([type]),.tpl-default-user .uk-form input[type=text],.tpl-default-user .uk-form select,.tpl-default-user .uk-form textarea{
background-color: #fafafa;
border: 1px solid #E4E4E4;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.tpl-default-user .uk-form textarea{height: auto}
.tpl-default-user .uk-form input:not([type]):focus,.tpl-default-user .uk-form input[type=text]:focus,.tpl-default-user .uk-form select:focus,.tpl-default-user .uk-form textarea:focus{
background-color: #fcfcfc;
border-color: #4f4395;
outline: medium none;
-webkit-box-shadow: 0 0 5px rgba(104, 89, 191, 0.6);
-moz-box-shadow: 0 0 5px rgba(104, 89, 191, 0.6);
box-shadow: 0 0 5px rgba(104, 89, 191, 0.6);
}
.tpl-default-user .uk-form-danger{
background-color: #fcfcfc !important;
border-color: #e94b35;
}
.tpl-default-user .uk-button{
display: inline-block;
background: #4f4395;
color: #FFF;
min-height: 43px;
padding: 0 45px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
border: 0;
outline: 0;
border-top: 2px solid transparent;
border-bottom: 2px solid #3D2F73;
text-shadow: 0 3px 2px rgba(0, 0, 0, 0.7);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.tpl-default-user .uk-button:hover {
color: #FFF;
background: #6859BF;
}
.tpl-default-user .uk-button:active {
color: #FFF;
background: #473780;
}
#modal-feedback .modal-header{
color: #fff;
text-shadow: 0 3px 2px rgba(0, 0, 0, 0.7);
background: #4f4395; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRmNDM5NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU5JSIgc3RvcC1jb2xvcj0iIzQ5M2M4YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0NzM3ODAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #4f4395 0%, #493c8b 59%, #473780 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f4395), color-stop(59%,#493c8b), color-stop(100%,#473780)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4f4395 0%,#493c8b 59%,#473780 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4f4395 0%,#493c8b 59%,#473780 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4f4395 0%,#493c8b 59%,#473780 100%); /* IE10+ */
background: linear-gradient(to bottom, #4f4395 0%,#493c8b 59%,#473780 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4395', endColorstr='#473780',GradientType=0 ); /* IE6-8 */
}
#modal-feedback .modal-close:after{
color: #fff;
background: #4f4395;
}
Тут обратите внимание на айди модального окна на моем сайте #modal-feedback, у вас он может быть другой, там, где верстка модального окна смотрите, эти стили нужны для для модального окна плагина CSS Modal, если у вас форма не в модальном окне, тогда ничего искать не нужно, можно даже удалить эти стили, которые применяются к модальному окну, остальные пость остаются.
На этом все, надеюсь у вас получилась такая же формочка красотка, как и у меня, если что-то не получится, оставляйте комментарии.
Заключение
Вкратце создание темы для формы обратной связи выглядит так:
- Размещаем компонент обратной связи где-нибудь на странице сайта, настриваем как хотим;
- Задаем в настройках компонента имя нового стиля/темы выбрав в опции Тема шаблона вариант другое;
- Копируем любой встроенный файл стилей шаблона компонента в
/bitrix/components/api/main.feedback/templates/.default/под этим новым именем; - Заменяем в скопированном файле класс встроенного стиля на свой с префиксом
.tpl-default-имя стиля; - Изменяем стили на свой вкус, как захочется;
Тема готова, для надежности делаем резервную копию файла куда-нибудь, на случай, если вдруг совпадет и перезапишется или удалите модуль нечаянно.
Тему прикрепил, если понравится, можно в коробку положить, пишите если что.