Модификация пакетов услуг

Модификация блока с ценами на пакеты услуг с помощью CSS/JS:
— выравнивание высоты блоков с пакетами услуг в версии для десктопа и планшета;
— блок с пакетом выделен фоном и имеет окантовку с закруглёнными углами (чтобы не сливались в мобильной версии)
— есть возможность выделения цветом «хитового/рекомендованного» пакета услуг (вариант 1);
— Есть возможность выделени чётных/не чётных пакетов цветом (вариант 2)


Вариант ценовых пакетов на основе третьего варианта из раздела «Услуги» в предварительно подготовленных шаблонах!


Почасовой заказ

Даже всемогущая пунктуация не имеет власти

  • даже всемогущая пунктуация не имеет власти 
  • над рыбными текстами, ведущими безорфографичный образ жизни.
  • однажды одна маленькая строчка рыбного текста по имени Lorem ipsum 
  • решила выйти в большой мир грамматики

100$

Пакет

Даже всемогущая пунктуация не имеет власти

  • даже всемогущая пунктуация не имеет власти 
  • над рыбными текстами, ведущими безорфографичный образ жизни.
  • однажды одна маленькая строчка рыбного текста по имени Lorem ipsum 
  • решила выйти в большой мир грамматики
  • великий Оксмокс предупреждал ее о злых запятых

300$

Целый день

Даже всемогущая пунктуация не имеет власти

  • даже всемогущая пунктуация не имеет власти 
  • над рыбными текстами, ведущими безорфографичный образ жизни.
  • однажды одна маленькая строчка рыбного текста по имени Lorem ipsum 
  • решила выйти в большой мир грамматики
  • великий Оксмокс предупреждал ее о злых запятых
  • диких знаках вопроса и коварных точках с запятой

500$


Как это сделано?

Добавляем HTML-блок на страницу. В него добавляем стили и немного JS:

<style>
#section-1447547 .row > div {
   margin: 24px;
   padding: 10px;
   border: 1px solid #e7e6e6; /* цвет окантовки блока услуги */
   border-radius:10px;        /* радиус скругления углов */
   background-color: #f4f4f4; /* цвет фона */
}

/*выделяем "важный", "модный" или "хитовый" вариант пакета (черным).
  nth-child(2) - цифра 2 - это порядковый номер этого пакета. В данном примере второй (по центру) */
#section-1447547 .row > div:nth-child(2),
#section-1447547 .row > div:nth-child(2) h1,
#section-1447547 .row > div:nth-child(2) h2,
#section-1447547 .row > div:nth-child(2) h3 {
   color: white; /* цвет текста в выделенном блоке */
}
#section-1447547 .row > div:nth-child(2) { /* тоже относится к выделенному черным пакету */
   margin: 24px;
   padding: 10px;
   border: 1px solid #383838; /* цвет окантовки выделенного блока услуги */
   border-radius:10px;        /* радиус скругления углов выделенного блока */
   background-color: #272727; /* цвет фона выделенного блока */
}

</style>

<script>

/* скрип по выравниванию высоты блоков с пакетом. Выравнивает только на десктопной версии и версии для планшетов, на мобильной - убираются лишние порбелы */

if( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) === false ) {
   var section = $("#section-1447547 .row > div");
   var h=0;
   $.each(section, function(){
      if ($(this)[0].offsetHeight > h) { h = $(this)[0].offsetHeight; }
   });
   section.css('height',h);
}
</script>

Везде, где вы видите в примере #section-1447547 — это ID блока с пакетами. Выяснить свой номер можно кликнув по шестеренке в углу блока (см. скриншот).


Вариант 1

Выделение цветом только одного блока. Этот вариант рассмотрен выше.

Вариант 2а

Выделение цветом четных блоков: в стилях заменяем nth-child(2) на nth-child(even)

Вариант 2б

Выделение цветом НЕ четных блоков: в стилях заменяем nth-child(2) на nth-child(odd)

Моды для Wfolio.ru

Модификация пакетов услуг. Фотограф Константин Шамин

Модификация мультиссылок (taplink)

Модификация страницы с мультиссылкой с помощью CSS: — изменение отступов между кнопками; — изменение размера текста...
Модификация пакетов услуг. Фотограф Константин Шамин

Удаление сообщения о Cookie на отдельной странице

Если вы включили Cookie на сайте (Настройки — Разные настройки — Уведомление об использовании cookie (GDPR)),...
Модификация пакетов услуг. Фотограф Константин Шамин

Создание папок из csv-списка

Еще один полезный для детских/школьных фотографов скрипт по массовому созданию папок из списка
Модификация пакетов услуг. Фотограф Константин Шамин

Скачиваем все CSV файлы проекта

Продолжаем тему списков избранных. Что делать, когда у вас огромное количество списков и скачивать их по одному...
Модификация пакетов услуг. Фотограф Константин Шамин

Копирование файлов из списка избранного в отдельную папку

Бывает ситуация, когда нам необходимо создать папку, в которую поместить только фотографии из конкретного списка...
Модификация пакетов услуг. Фотограф Константин Шамин

Таблица из CSV

Модификация пакетов услуг. Фотограф Константин Шамин

Калькулятор цен

Возможность формировать цену заказа с учетом добавления дополнительных услуг.
Модификация пакетов услуг. Фотограф Константин Шамин

Добавление всплывающего title к фотографии

Модификация пакетов услуг. Фотограф Константин Шамин

Изменение цвета кнопок на отдельной странице

Модификация пакетов услуг. Фотограф Константин Шамин

Скрываем блок от Инстаграм

Модификация пакетов услуг. Фотограф Константин Шамин

Добавлние кнопок к форме обратной связи

Модификация пакетов услуг. Фотограф Константин Шамин

Виджет обратного отсчета

Модификация пакетов услуг. Фотограф Константин Шамин

Меняем светлую тему на темную (или любую другую)

Модификация пакетов услуг. Фотограф Константин Шамин

Запрет индексации отдельной страницы

Модификация пакетов услуг. Фотограф Константин Шамин

Скрытие пунктов меню в зависимости от языка сайта