Внутрь каждого блока мы поместим поля и простые label :

Мы использовали три поля ввода: Логин, Пароль и Подтвержение пароля , а в конце блока тег input с типом submit для перехода на следующий шаг. Другие блоки работают точно также.
В конце контейнера у нас простой индикатор выполнения, вот его код:

Полный html код такой:

CSS

Теперь добавим стили к форме. Будем применять правило @fontface для использования пользовательских шрифтов. В нашем случае это шрифт Cantarell . Полный код CSS приведен ниже:

/* CSS Reset (Eric Meyer) */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0} @font-face { font-family: "Cantarell"; src: url(../fonts/Cantarell-Regular.eot); src: local("Cantarell"), url("../fonts/Cantarell-Regular.ttf") format("truetype"); } body { background-color: #f9f9f9; color: #222; font-family: Cantarell, Verdana, sans-serif; font-size: 12px; } input::-moz-focus-inner, input::-moz-focus-inner { border: none; } input:focus, input:focus { outline: none; } .clear { clear: both; } #container { background: url("../images/container.png") no-repeat; width: 754px; height: 370px; margin: 20px auto; padding: 50px 0; overflow: hidden; position: relative; } #container #first_step, #second_step, #third_step, #fourth_step { display: none; } #container #first_step { display: block; } #container .form { margin: 66px 72px 0 72px; } #container h1, #container h2 { font-size: Cantarell, Verdana, sans-serif; text-align: center; font-size: 24px; text-shadow: 1px 1px 2px #222; } #container h1 span { color: #a90329; } #container h2 { color: #888; font-size: 20px; text-align: left; text-shadow: none; } #container table { margin: 20px 40px; font-size: 14px; font-weight: bold; } #container table td { padding: 5px 10px; } #container table td:nth-child(2) { color: #a90329; } #container input, #container select { background: url("../images/input.png") no-repeat; color: #888; border: 1px solid #ccc; font-family: Cantarell, Verdana, sans-serif; font-weight: bold; font-size: 15px; width: 300px; height: 35px; padding: 0 25px; margin: 20px 0; float: left; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } #container input.submit { background: url("../images/button.png") no-repeat; border: none; cursor: pointer; width: 85px; height: 38px; position: relative; bottom: 2px; left: 655px; } #container input.submit:focus { border: none; } #container input.send{ background: url("../images/send.png") no-repeat; } #container input.error { border: 1px solid red; } #container input.valid { border: 1px solid #1FFF00; } #container input:focus, #container select:focus { border: 1px solid #a90329; color: #a90329; } #container select { padding: 5px 0 5px 25px; } #container option { padding: 0 15px; } #container label { color: #666; font-size: 12px; font-weight: bold; line-height: 14px; float: right; margin: 23px -25px; width: 270px; } #progress_bar { background: url("../images/progress_bar.png") no-repeat; width: 339px; height: 24px; margin: 0 auto; position: relative; } #progress { background: url("../images/progress.png") repeat-x; width: 0px; height: 23px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; } #progress_text { position: relative; line-height: 21px; text-align: center; font-weight: bold; color: white; text-shadow: 1px 1px 2px #222; width: 339px; height: 24px; top: -23px; left: 0; }

JS

jQuery будем использовать для плавной смены блоков (слайды), проверки правильности данных, изменения процента выполнения.
Нам нужно будет в шапке старницы подключить библиотеку jQuery и ещё два плагина:
jQuery UI и jQuery inputfocus (используется для управления фокусом и размытия событий формы).
jQuery код приведен ниже:

$(function(){ //original field values var field_values = { //id: value "username" : "Логин", "password" : "Пароль", "cpassword" : "Пароль", "firstname" : "Имя", "lastname" : "Фамилия", "email" : "email" }; //inputfocus $("input#username").inputfocus({ value: field_values["username"] }); $("input#password").inputfocus({ value: field_values["password"] }); $("input#cpassword").inputfocus({ value: field_values["cpassword"] }); $("input#lastname").inputfocus({ value: field_values["lastname"] }); $("input#firstname").inputfocus({ value: field_values["firstname"] }); $("input#email").inputfocus({ value: field_values["email"] }); //reset progress bar $("#progress").css("width","0"); $("#progress_text").html("0% Выполнено"); //first_step $("form").submit(function(){ return false; }); $("#submit_first").click(function(){ //remove classes $("#first_step input").removeClass("error").removeClass("valid"); //ckeck if inputs aren"t empty var fields = $("#first_step input, #first_step input"); var error = 0; fields.each(function(){ var value = $(this).val(); if(value.length<4 || value==field_values[$(this).attr("id")]) { $(this).addClass("error"); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass("valid"); } }); if(!error) { if($("#password").val() != $("#cpassword").val()) { $("#first_step input").each(function(){ $(this).removeClass("valid").addClass("error"); $(this).effect("shake", { times:3 }, 50); }); return false; } else { //update progress bar $("#progress_text").html("33% Выполнено"); $("#progress").css("width","113px"); //slide steps $("#first_step").slideUp(); $("#second_step").slideDown(); } } else return false; }); $("#submit_second").click(function(){ //remove classes $("#second_step input").removeClass("error").removeClass("valid"); var emailPattern = /^+@+\.{2,4}$/; var fields = $("#second_step input"); var error = 0; fields.each(function(){ var value = $(this).val(); if(value.length<1 || value==field_values[$(this).attr("id")] || ($(this).attr("id")=="email" && !emailPattern.test(value))) { $(this).addClass("error"); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass("valid"); } }); if(!error) { //update progress bar $("#progress_text").html("66% Выполнено"); $("#progress").css("width","226px"); //slide steps $("#second_step").slideUp(); $("#third_step").slideDown(); } else return false; }); $("#submit_third").click(function(){ //update progress bar $("#progress_text").html("100% Выполнено"); $("#progress").css("width","339px"); //prepare the fourth step var fields = new Array($("#username").val(), $("#password").val(), $("#email").val(), $("#firstname").val() + " " + $("#lastname").val(), $("#age").val(), $("#gender").val(), $("#country").val()); var tr = $("#fourth_step tr"); tr.each(function(){ //alert(fields[$(this).index()]) $(this).children("td:nth-child(2)").html(fields[$(this).index()]); }); //slide steps $("#third_step").slideUp(); $("#fourth_step").slideDown(); }); $("#submit_fourth").click(function(){ //send information to server alert("Данные отправлены"); }); });
Вот у нас и получилась форма с регистрацией в несколько шагов. Для использования данного примера нужно только изменить форму action с ссылкой на ваш php файл, используемый для хранения данных и отредактировать 132 строчку на:
$(‘form’).unbind(‘submit’).submit(); . Чтобы посмотреть форму в действии нажмите на кнопку Демо .

HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода и , списки <select> , подсказки и т.д. Весь код формы заключается в элемент <form> .</p> <p>Большая часть информации веб-форм передаётся с помощью элемента <input> . Для ввода одной строки текста применяется элемент <input type="text"> , для нескольких строк - элемент <textarea> . Элемент <select> создает выпадающий список.</p> <p>Элемент <label> создаёт надписи к полям формы. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label> , то атрибут for указывать не нужно.</p><p> <label for="lastname">Last Name</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Last Name</label> <label>Last Name<input type="text" name="lastname"></label> </p><p>Поля формы можно разделять на логические блоки с помощью элемента <fieldset> . Каждому разделу можно присвоить название с помощью элемента <legend> .</p><p> <fieldset> <legend>Контактная информация</legend> <label>Имя<input type="text" required></label> <label>E-mail<input type="email" required></label> </fieldset> <br><img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy> Рис. 1. Группировка полей формы </p><p>Чтобы сделать форму более понятной для пользователей, в поля формы добавляют текст, содержащий пример вводимых данных. Такой текст называется подстановочным и создаётся с помощью атрибута placeholder .</p> <p>Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки * , установленный возле названия поля. В новой спецификации появился специальный атрибут required , который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.</p><p> <input type="text" required placeholder="Ваше имя"> </p><p>Для изменения внешний вид текстового поля при получении фокуса, используется псевдокласс focus . Например, можно сделать фон текущего поля более темным или добавить цветную рамку, чтобы оно выделялось среди остальных:</p><p>Input:focus { background: #eaeaea; } </p><p>Ещё один полезный html5-атрибут — атрибут autofocus . Он позволяет автоматически установить фокус на нужном начальном поле для элементов <input> и <textarea> (только в один элемент каждой формы).</p> <h2>Пример создания формы регистрации</h2> <div class="form-wrap"> <div class="profile"><img src='https://i1.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy> <h1>Регистрация</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Имя</label> <input type="text" name="name" required> </div> <div class="radio"> Пол <label> <input type="radio" name="sex" value="мужской">мужской <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="женский">женский <div class="radio-control female"></div> </label> </div> <div> <label for="email">E-mail</label> <input type="email" name="email" required> </div> <div> <label for="country">Страна</label> <select name="country"> <option>Выберите страну проживания</option> <option value="Россия">Россия</option> <option value="Украина">Украина</option> <option value="Беларусь">Беларусь</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Отправить</button> </form> </div> <p><b>Примечание </b><br> action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.</p> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy> Рис. 2. Внешний вид формы по умолчанию <p>Как видно из рисунка, каждый элемент формы имеет стили браузера по умолчанию. Очистим стили и оформим элементы формы.</p><p>Form-wrap { width: 550px; background: #ffd500; border-radius: 20px; } .form-wrap *{transition: .1s linear} .profile { width: 240px; float: left; text-align: center; padding: 30px; } form { background: white; float: left; width: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; color: #7b7b7b; } .form-wrap:after, form div:after { content: ""; display: table; clear: both; } form div { margin-bottom: 15px; position: relative; } h1 { font-size: 24px; font-weight: 400; position: relative; margin-top: 50px; } h1:after { content: "\f138"; font-size: 40px; font-family: FontAwesome; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); } /********************** стилизация элементов формы **********************/ label, span { display: block; font-size: 14px; margin-bottom: 8px; } input, input { border-width: 0; outline: none; margin: 0; width: 100%; padding: 10px 15px; background: #e6e6e6; } input:focus, input:focus { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio label { position: relative; padding-left: 50px; cursor: pointer; width: 50%; float: left; line-height: 40px; } .radio input { position: absolute; opacity: 0; } .radio-control { position: absolute; top: 0; left: 0; height: 40px; width: 40px; background: #e6e6e6; border-radius: 50%; text-align: center; } .male:before { content: "\f222"; font-family: FontAwesome; font-weight: bold; } .female:before { content: "\f221"; font-family: FontAwesome; font-weight: bold; } .radio label:hover input ~ .radio-control, .radiol input:focus ~ .radio-control { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio input:checked ~ .radio-control { color: red; } select { width: 100%; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; background: #e6e6e6; color: #7b7b7b; -webkit-appearance: none; /*убираем галочку в webkit-браузерах*/ -moz-appearance: none; /*убираем галочку в Mozilla Firefox*/ } select::-ms-expand { display: none; /*убираем галочку в IE*/ } .select-arrow { position: absolute; top: 38px; right: 15px; width: 0; height: 0; pointer-events: none; /*активизируем показ списка при нажатии на стрелку*/ border-style: solid; border-width: 8px 5px 0 5px; border-color: #7b7b7b transparent transparent transparent; } button { padding: 10px 0; border-width: 0; display: block; width: 120px; margin: 25px auto 0; background: #60e6c5; color: white; font-size: 14px; outline: none; text-transform: uppercase; } /********************** добавляем форме адаптивность **********************/ @media (max-width: 600px) { .form-wrap {margin: 20px auto; max-width: 550px; width:100%;} .profile, form {float: none; width: 100%;} h1 {margin-top: auto; padding-bottom: 50px;} form {border-radius: 0 0 20px 20px;} } </p><p><b>Файл form.php </b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $headers .= "Bcc: ваш_email". "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && !empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL)){ mail($email, $subject, $msg, $headers); echo "Спасибо! Вы успешно зарегистрировались."; } ?> </p><p><b>Примечание </b><br> В переменной $subject укажите текст, который будет отображаться как заголовок письма;<br> Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;<br> url_вашего_сайта замените на адрес сайта с формой регистрации;<br> ваш_email замените на ваш адрес электронной почты;<br> $headers .= "Bcc: ваш_email". "\r\n"; отправляет скрытую копию на ваш адрес электронной почты.</p> <p>Мы составили список, состоящий из 60 бесплатных форм авторизации, которые вы можете использовать на своем WordPress-сайте, в блоге, на форуме и т.д. Каждая форма тщательно протестирована, чтобы можно было гарантировать ее работоспособность и доступность исходного кода.</p> <h2>WordPress Login Customizer</h2> <p>Формы из этого списка созданы с помощью HTML / CSS. Но в данном случае речь идет о лучшем плагине для настройки пользовательского интерфейса WordPress. Он поставляется с несколькими шаблонами, которые можно дополнительно настроить в соответствии с дизайном сайта. С помощью этого плагина вы сможете избавиться от скучной страницы входа в WordPress.</p> <h2>Creative Login Form</h2> <p>Простая, но креативная форма входа, созданная с помощью HTML и CSS3. Ее также можно использовать и как форму регистрации. Это наш любимый шаблон из представленных в этом списке.</p> <p>Мы поискали в интернете действительно крутые формы авторизации, но найти такие оказалось непросто. Поэтому решили представить вам собственные. Вот 20 форм входа, разработанных нашей командой.</p> <h2>Форма авторизации №1</h2> <p>Простая, креативная и яркая форма входа с градиентным фоном. Вы можете использовать ее для любых целей, таких как авторизация в веб-сервисе, мобильном или десктопном приложении.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №2</h2> <p>Минималистичная и изысканная форма входа с кнопкой, градиентной заливкой, а также с анимацией и логотипом. Используйте ее, изменив необходимые элементы.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №3</h2> <p>Страница входа с фоновым изображением, тенью и эффектом наведения для кнопки входа в систему.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №4</h2> <p>Вы можете скачать эту веб-форму и использовать по своему усмотрению. Она является полностью адаптивной.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №5</h2> <p>Прекрасная и современная форма с опциями входа через Facebook или Google. Ее кнопки имеют красивые эффекты наведения, что позволяет предоставить пользователям прекрасный опыт взаимодействия.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №6</h2> <p>Если веб-страница аккуратная и красивая, форма входа не должна отличаться от ее дизайна. Вот форма, которая точно оправдает ваши ожидания.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №7</h2> <p>Форма с тремя вариантами входа в учетную запись: Facebook, Twitter или адрес электронной почты. А если у пользователя еще нет учетной записи, можно связать форму со страницей регистрации.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №8</h2> <p>Еще одна современная, модная и красивая форма входа в систему. Она особенно хорошо смотрится на мобильных устройствах.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №9</h2> <p>Если хотите уйти от чисто белого или одноцветного дизайна, вам стоит обратить внимание на эту форму. Она поддерживает добавления фонового изображения или наложения градиента. Также есть опция входа через Facebook или Google.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №10</h2> <p>Это полная противоположность предыдущему варианту. Она выглядит минималистично, но в то же время очень аккуратно.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №11</h2> <p>Вместо того чтобы создавать форму с нуля, вы можете использовать готовый к использованию великолепный шаблон — такой как этот.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №12</h2> <p>Фоновое изображение с наложением синей тени, имя с аватаром и поля ввода — это форма авторизации №12. Для кнопки входа в систему добавлен эффект наведения.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №13</h2> <p>Шаблон с разделением экрана, в котором одна половина предназначена для изображения, а другая — для формы.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №14</h2> <p>В этой подборке есть и простые, и более сложные формы входа. А шаблон №14 — из числа минималистичных.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №15</h2> <p>Довольно минималистичная форма, но в ее верхней части можно добавить баннер. Благодаря этой небольшой опции можно сделать форму более привлекательной.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №16</h2> <p>Это форма входа с полноэкранным изображением, поверх которого размещаются поля для ввода логина и пароля, а также кнопка с эффектом наведения.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №17</h2> <p>Чтобы сделать форму более персонализированной, можно использовать этот шаблон. Он включает в себя изображение, расположенное сбоку.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №18</h2> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №19</h2> <p>Яркая, энергичная и захватывающая — это все о данной форме входа. Она полностью адаптивная, оптимизирована под мобильные устройства и совместима со всеми основными веб-браузерами.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №20</h2> <p>Градиентный фон, черная кнопка с эффектом наведения, поля для ввода логина и пароля, а также раздел «Забыли пароль?» Все это есть в форме авторизации №20.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Выпадающая форма авторизации</h2> <p>Скачать </p> <h2>Floating Sign Up Form</h2> <p>Разработано для форм подписки с использованием вкладок и меток.</p> <p>Скачать </p> <h2>Простая форма авторизации</h2> <p>Что раньше останавливало людей, когда они хотели авторизоваться на WordPress -сайте так это слишком простой внешний вид. В этой форме сохранен популярный дизайн, но к нему добавлено цветовое оформление.</p> <p>Скачать </p> <h2>Flat Login – Sign Up Form</h2> <p>Когда вы нажмете кнопку “Click me”, расположенную в правом верхнем углу, с помощью анимации форма входа будет преобразована в форму регистрации.</p> <p>Скачать </p> <h2>Login With Self-Contained SCSS Form</h2> <p>Это форма, созданная с использованием SCSS. Расширение CSS, которое добавляет базовому языку новые возможности и элегантность. Оно позволяет использовать переменные, вложенные правила, встроенный импорт и многое другое.</p> <p>Скачать </p> <h2>Animated Login Form</h2> <p>Это анимированная форма входа, а верхняя часть “Hey you, Login already” преобразуется в форму при нажатии кнопки.</p> <p>Скачать </p> <h2>Login Form Using CSS3 And HTML5</h2> <p>Пример того, как создать простую форму входа в систему с помощью HTML5 и CSS3. В ней применяются псевдо элементы (:after и:before) для создания эффекта нескольких страниц. Эта форма использует HTML5, чтобы упростить валидацию и представление данных.</p> <p>Скачать </p> <h2>Login With Shake Effect</h2> <p>Если вы ввели неправильный пароль, то будете уведомлены об этом с помощью красивого эффекта дрожания. Простое и эффективное решение.</p> <p>Скачать </p> <h2>Boxy Login Form</h2> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </div> </div> <div class="td-pb-span4 td-main-sidebar" role="complementary"> <div class="td-ss-main-sidebar"> </div> </div> </div> </div> </article> <script type="text/javascript"> try { var sbmt = document.getElementById('submit'), npt = document.createElement('input'), d = new Date(), __ksinit = function() { sbmt.parentNode.insertBefore(npt, sbmt); }; npt.value = d.getUTCDate() + '' + (d.getUTCMonth() + 1) + 'uniq9065'; npt.name = 'ksbn_code'; npt.type = 'hidden'; sbmt.onmousedown = __ksinit; sbmt.onkeypress = __ksinit; } catch (e) {} </script> <div class="td-sub-footer-container td-container-wrap "> <div class="td-container "> <div class="td-pb-row "> <div class="td-pb-span td-sub-footer-menu "></div> <div class="td-pb-span td-sub-footer-copy "> © 2024 doskaabkhazii.ru. Немного о компьютере</div> </div> </div> </div> </div> <script data-cfasync="false" type="text/javascript"> if (window.addthis_product === undefined) { window.addthis_product = "wpwt"; } if (window.wp_product_version === undefined) { window.wp_product_version = "wpwt-3.1.2"; } if (window.wp_blog_version === undefined) { window.wp_blog_version = "4.9.1"; } if (window.addthis_share === undefined) { window.addthis_share = {}; } if (window.addthis_config === undefined) { window.addthis_config = { "data_track_clickback": true, "ui_language": "ru", "ui_atversion": "300" }; } if (window.addthis_plugin_info === undefined) { window.addthis_plugin_info = { "info_status": "enabled", "cms_name": "WordPress", "plugin_name": "Website Tools by AddThis", "plugin_version": "3.1.2", "plugin_mode": "AddThis", "anonymous_profile_id": "wp-f2d21fd70bfc0c32605b4e5e1e4ff912", "page_info": { "template": "posts", "post_type": "" }, "sharing_enabled_on_post_via_metabox": false }; } (function() { var first_load_interval_id = setInterval(function() { if (typeof window.addthis !== 'undefined') { window.clearInterval(first_load_interval_id); if (typeof window.addthis_layers !== 'undefined' && Object.getOwnPropertyNames(window.addthis_layers).length > 0) { window.addthis.layers(window.addthis_layers); } if (Array.isArray(window.addthis_layers_tools)) { for (i = 0; i < window.addthis_layers_tools.length; i++) { window.addthis.layers(window.addthis_layers_tools[i]); } } } }, 1000) }()); </script> <script type='text/javascript'> var tocplus = { "smooth_scroll": "1", "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "Auto" }; </script> <script type='text/javascript' src='https://doskaabkhazii.ru/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=bbebb9a04042e1d7d3625bab0b5e9e4f'></script> <script> (function() { var html_jquery_obj = jQuery('html'); if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) { var path = '/wp-content/themes/Newspaper/style.css'; jQuery.get(path, function(data) { var str_split_separator = '#td_css_split_separator'; var arr_splits = data.split(str_split_separator); var arr_length = arr_splits.length; if (arr_length > 1) { var dir_path = '/wp-content/themes/Newspaper'; var splited_css = ''; for (var i = 0; i < arr_length; i++) { if (i > 0) { arr_splits[i] = str_split_separator + ' ' + arr_splits[i]; } //jQuery('head').append('<style>' + arr_splits[i] + '</style>'); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) { return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm, ''); }); splited_css += "<style>" + formated_str + "</style>"; } var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) { td_theme_css.after(splited_css); } } }); } })(); </script> <div id="tdw-css-writer" style="display: none" class="tdw-drag-dialog tdc-window-sidebar"> <header> <a title="Editor" class="tdw-tab tdc-tab-active" href="#" data-tab-content="tdw-tab-editor">Edit with Live CSS</a> <div class="tdw-less-info" title="This will be red when errors are detected in your CSS and LESS"></div> </header> <div class="tdw-content"> <div class="tdw-tabs-content tdw-tab-editor tdc-tab-content-active"> <script> (function(jQuery, undefined) { jQuery(window).ready(function() { if ('undefined' !== typeof tdcAdminIFrameUI) { var $liveIframe = tdcAdminIFrameUI.getLiveIframe(); if ($liveIframe.length) { $liveIframe.load(function() { $liveIframe.contents().find('body').append('<textarea class="tdw-css-writer-editor" style="display: none">'); }); } } }); })(jQuery);