Question

Всем добра!
Вопросов сразу два - не получается разместить дополнительную строку сразу под названием шапки - слишком большой отступ, без картинки то же самое. Никак не пойму где это отредактировать.
Второй вопрос - как добавить сюда же адреса, телефоны, контактную форму - добавляю текст в визуальном редакторе в этот контейнер - он не отображается.
Спасибо.

Answer 1

Перейдите в шапку сайта http://ya.ucoz.site/panel/?a=tmpl;m=1;t=AHEADER попробуйте заменить код который там будет на следующий:

 

код

<header class="header">

<div class="nav-row">

<div class="cont-wrap clr">

    <img src="http://ya.ucoz.site/Voda-2.jpg" alt="" width="75px">

    <a class="logo-lnk" href="$HOME_PAGE_LINK$"  title="Главная" style=" line-height: inherit;"><!-- <logo> -->Химчистка <span style="color: rgb(70, 130, 180);">Ясность</span><div class="desck"><i><span style="font-size: 8pt;">ковры, мягкая мебель, клининговые услуги</span></div><!-- </logo> --></a>

<div class="contact">город Киев, ул.Мира 25, тел 08000000000000000</div>

<div class="contform" style=" padding: 5px; float: right; position: relative; top: -50px; border-radius: 3px; background: #1aa7e9; "><a title="Обратная связь" href="javascript:;" onclick="openchat();" style=" color: #fff; ">Написать нам</a></div>

            <?if($SEARCH_FORM$)?>

            <div class="show-search" id="show-search"></div>

            <?endif?>

<div class="show-menu" id="show-menu"></div>

 

<?if($SEARCH_FORM$)?>

<div class="search-m-bd" id="search-m-bd">$SEARCH_FORM$</div>

<?endif?>

<!-- <sblock_nmenu> -->

<?if($NMENU_1$)?>

<nav class="main-menu" id="main-menu">

<div id="catmenu">

<?if($NMENU_1$)?><!-- <bc> -->$NMENU_1$<!-- </bc> --><?endif?>

</div>

</nav>

<?endif?>

<!-- </sblock_nmenu> -->

 

 

        </div>

</div>

 </header>

    

<!--<Обратная связь>--> 

<script type="text/javascript"> 

   function openchat(){new _uWnd('chat','Обратная связь',500,500,{align:0,shadow:0,close:1,autosize:1,maxh:600,minh:300,modal:1,resize:0,nomove:1}, $("#chat").html() )} 

</script> 

<div style="display:none;" id="chat">$MFORM_1$</div> 

   <!--</Обратная связь>-->   

 

конечно вместо адреса который в коде пропишите свой. И пожалуйста, не редактируйте визуальным редактором так как больше наломаете чем сделаете так как визуальный редактор не предназначен для редактирования дизайна сайта. Многие им злоупотребляют и ломают свой дизайн.

Comments

Спасибо большое! А как же убрать этот отступ между названием сайта и строчкой ковры?

---

Елена Егорова #3,

Найдите в шапке код:

<span style="font-size: 8pt;">ковры, мягкая мебель, клининговые услуги</span>

замените его на:

<span style="font-size: 8pt;display: block;">ковры, мягкая мебель, клининговые услуги</span>

---

Yuri_Geruk,

Спасибо большое)

---

Елена Егорова #3,

• > Как настроить высоту контактной формы и цвет
• >> Высота настривается в коде выше

function openchat(){new _uWnd('chat','Обратная связь',500,500,

выделил 500 и 500, первое ширина и второе высота, настраивайте. Цвет можете изменить выбрав другую тему оформления интерфейса https://www.ucoz.ru/qa/index.php/65198

---

Елена Егорова #3,

Хотя, в данном случае высоту вы не ограничите так как для ajax используется системная библиотека которая задает системные размеры для окна, ширину и высоту.

---

Елена Егорова #3,

Можно проблему решить примерно так, код шапки сайта заменить на следующий:

 

код

<header class="header">
 <div class="nav-row">
 <div class="cont-wrap clr">
 <img src="http://ya.ucoz.site/Voda-2.jpg" alt="" width="75px">
 <a class="logo-lnk" href="$HOME_PAGE_LINK$" title="Главная" style=" line-height: inherit;"><!-- <logo> -->Химчистка <span style="color: rgb(70, 130, 180);">Ясность</span><div class="desck"><i><span style="font-size: 8pt;">ковры, мягкая мебель, клининговые услуги</span></div><!-- </logo> --></a>
 <div class="contact">город Киев, ул.Мира 25, тел 08000000000000000</div>
 <div class="contform" style=" padding: 5px; float: right; position: relative; top: -50px; border-radius: 3px; background: #1aa7e9; "><a href="#win1" style=" color: #fff; ">Оставить заявку</a></div>
 <?if($SEARCH_FORM$)?>
 <div class="show-search" id="show-search"></div>
 <?endif?>
 <div class="show-menu" id="show-menu"></div>

 <?if($SEARCH_FORM$)?>
 <div class="search-m-bd" id="search-m-bd">$SEARCH_FORM$</div>
 <?endif?>
 <!-- <sblock_nmenu> -->
<?if($NMENU_1$)?>
 <nav class="main-menu" id="main-menu">
 <div id="catmenu">
 <?if($NMENU_1$)?><!-- <bc> -->$NMENU_1$<!-- </bc> --><?endif?>
 </div>
 </nav>
 <?endif?>
<!-- </sblock_nmenu> -->

 </div>
 </div>
 </header>
 
 <a href="#x" class="overlay" id="win1"></a>
   <div class="popup">
     $MFORM_1$
    <a class="close"title="Закрыть" href="#close"></a>
    </div>    
    
<style>
/* Базовые стили слоя затемнения и модального окна  */
.overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: none;
/* фон затемнения */
    background-color: rgba(0, 0, 0, 0.65);
    position: fixed; /* фиксированное поцизионирование */
    cursor: default; /* тип курсара */
}
/* активируем слой затемнения */
.overlay:target {
    display: block;
}
/* стили модального окна */
.popup {
    top: -100%;
    right: 0;
    left: 50%;
    font-size: 14px;
    z-index: 20;
    margin: 0;
    width: 85%;
    min-width: 320px;
    max-width: 600px;
/* фиксированное позиционирование, окно стабильно при прокрутке */
    position: fixed;
    padding: 15px;
    border: 1px solid #383838;
    background: #fefefe;
/* скругление углов */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
/* внешняя тень */
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-transform: translate(-50%, -500%);
    -ms-transform: translate(-50%, -500%);
    -o-transform: translate(-50%, -500%);
    transform: translate(-50%, -500%);
    -webkit-transition: -webkit-transform 0.6s ease-out;
    -moz-transition: -moz-transform 0.6s ease-out;
    -o-transition: -o-transform 0.6s ease-out;
    transition: transform 0.6s ease-out;
}
/* активируем модальный блок */
.overlay:target+.popup {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 20%;
}
/* формируем кнопку закрытия */
.close {
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    position: absolute;
    padding: 0;
    border: 2px solid #ccc;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    background-color: rgba(61, 61, 61, 0.8);
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
    text-align: center;
    text-decoration: none;
    font: 13px/20px 'Tahoma', Arial, sans-serif;
    font-weight: bold;
    -webkit-transition: all ease .8s;
    -moz-transition: all ease .8s;
    -ms-transition: all ease .8s;
    -o-transition: all ease .8s;
    transition: all ease .8s;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    font-size: 12px;
}
.close:hover {
    background-color: rgba(252, 20, 0, 0.8);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);    
}
/* изображения внутри окна */
.popup img {
    width: 100%;
    height: auto;
}
/* миниатюры слева/справа */
.pic-left, 
.pic-right {
    width: 25%;
    height: auto;
}
.pic-left {
    float: left;
    margin: 5px 15px 5px 0;
}
.pic-right {
    float: right;
    margin: 5px 0 5px 15px;
}
/* элементы м-медиа, фреймы */
.popup embed, 
.popup iframe {
    top: 0;
    right: 0;
    bottom: 0; 
    left: 0; 
    display:block;
    margin: auto;
    min-width: 320px;
    max-width: 600px;
    width: 100%;
}
.popup h2 { /* заголовок 2 */
    margin: 0;
    color: #008000;
    padding: 5px 0px 10px;
    text-align: left;
    text-shadow: 1px 1px 3px #adadad;
    font-weight: 500;
    font-size: 1.4em;
    font-family: 'Tahoma', Arial, sans-serif;
    line-height: 1.3;
}
/* параграфы */
.popup p {margin: 0; padding: 5px 0}    
</style>    

адрес пропишите свой.

---

Yuri_Geruk,

Спасибо., все получилось по форме и строчкам. А вот по адресу вопрос остался - как его пометить справа, надо формой отправки звонка и напротив названия сайта - например, как здесь https://chisti-kov.ru/. Теоретически я могу название сайта разбить на две чати, а адрес поместить одной строкой простым слоем - но как это все соотнести право-лево на одной строке?

---

Елена Егорова #3,

Попробуйте код вида:

<div class="contact">город Киев, ул.Мира 25, тел 08000000000000000</div>

заменить на:

<div class="contact" style="font-style: italic;position: absolute;left: 100%;top: 60px;">город Киев, ул.Мира 25, тел 08000000000000000</div>

---

Yuri_Geruk,

Вправо переместилось, шрифты и вид я отрегулирую. Только почему-то текст конкретно вообще левей кнопки заказа и бьется на отдельные строчки. Саму кнопку я пыталась прописсывать слевой стороны, но она все равно абсолютно вправо не перемещается.

---

Елена Егорова #3,

и никак не пойму чем ограничен слой с телефонами - символами, шириной?

---

Елена Егорова #3,

Елена, обратитесь за помощью к фрилансерам https://upartner.pro/ там помогут переделать шапку как вам нужно.

---

Yuri_Geruk,

Пишут, что очень-очень сложно))