Меняем светлую тему на темную (или любую другую). Фотограф Константин Шамин

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

Для того, чтобы изменить оформление страницы со светлой на темную, добавьте на нее HTML-блок подобного типа:

<style>
.page-wrapper, .page-footer, .page-header, .page-main, .menu, .blog.-masonry .inner, .menu-list .submenu .submenu-list {
   background: #1e1e1e;
   color: #fff;
}
h1, h2, h3,
.wysiwyg a,
.menu-list .menu-item > .link,
.blog .caption > .title,
.blog .caption > time,
.blog .caption > .description {
   color: #fff;
}
.labeled-divider-section .label,
.labeled-divider > .label {
   background: #2f2f2f;
   color: #8b8b8b;
}
.labeled-divider-section,
.page-header {
   border-bottom: 1px solid #2f2f2f;
}
.share-button:hover, .share-button:active,
.social-links > .item > .link:hover, .social-links > .item > .link:active,
.menu-list .menu-item:hover > .link, .menu-list .menu-item.-active > .link {
   color: #fff;
   opacity:1;
}
.share-button, 
.social-links > .item > .link,
.menu-list .menu-item > .link, .menu-list .menu-item > .link {
   color: #fff;
   opacity:0.5;
}
.menu-button span,
.menu-button span:before,
.menu-button span:after,
.menu-list > .menu-item:before {
   background:#fff !important;
}
</style>

При этом вы можете заменить цвета в этом примере на свои (воспользовавшись поиск/замена):

  • #1e1e1e — цвет фона
  • #fff — цвет текста
  • #2f2f2f — цвет линий, отсекающих меню и подложки на лейбле как на этой странице «Моды для Wfolio.ru»
  • #8b8b8b — цвет текста на лейбле «Моды для Wfolio.ru»

Возможно какие-то особые элементы, используемые на вашей странице не перекрасятся. Напишите мне — я добавлю и для них новые стили.

Проблема логотипа

Возможно ваш логотип не адаптировал для инвертированной цветовой схемы. Тогда вам надо его переделать, добавить на страницу блок «Изображение» (самый первый — одиночное во всю ширину) и загрузить туда инвентированный логотип.

Меняем светлую тему на темную (или любую другую). Фотограф Константин Шамин

Теперь вам надо узнать уникальный ID строки, где размещен новый логотип. В моем случае это #section-1635564

После этого необходимо дописать в стили, заменив #section-1635564 на свой ID строки:

#section-1635563 {
  visibility: hidden;
  max-height: 1px !important;
  margin: 0 !important;
}
.logo-image {
   display: none;
}

И добавить javascript код:

<script>
$( document ).ready(function() {
   $('#section-1635564 img').on('load',function(){
      var new_logo = $("#section-1635564 img").prop('src');
      $(".logo-image").attr("src",new_logo);
      $(".logo-image").attr("data-src",new_logo);
      $(".logo-image").attr("data-srcset",new_logo);
      $(".logo-image").attr("srcset",new_logo);
      $(".logo-image").css("display","block");
   });
});
</script>


Итого весь HTML-блок должен выглядеть следующим образом (вариант с заменой логотипа):

<style>
.page-wrapper, .page-footer, .page-header, .page-main, .menu, .blog.-masonry .inner, .menu-list .submenu .submenu-list {
   background: #1e1e1e;
   color: #fff;
}
h1, h2, h3,
.wysiwyg a,
.menu-list .menu-item > .link,
.blog .caption > .title,
.blog .caption > time,
.blog .caption > .description {
   color: #fff;
}
.labeled-divider-section .label,
.labeled-divider > .label {
   background: #2f2f2f;
   color: #8b8b8b;
}
.labeled-divider-section,
.page-header {
   border-bottom: 1px solid #2f2f2f;
}
.share-button:hover, .share-button:active,
.social-links > .item > .link:hover, .social-links > .item > .link:active,
.menu-list .menu-item:hover > .link, .menu-list .menu-item.-active > .link {
   color: #fff;
   opacity:1;
}
.share-button, 
.social-links > .item > .link,
.menu-list .menu-item > .link, .menu-list .menu-item > .link {
   color: #fff;
   opacity:0.5;
}
.menu-button span,
.menu-button span:before,
.menu-button span:after,
.menu-list > .menu-item:before {
   background:#fff !important;
}
#section-1635563 {
  visibility: hidden;
  max-height: 1px !important;
  margin: 0 !important;
}
.logo-image {
   display: none;
}
</style>

<script>
$( document ).ready(function() {
   $('#section-1635564 img').on('load',function(){
      var new_logo = $("#section-1635564 img").prop('src');
      $(".logo-image").attr("src",new_logo);
      $(".logo-image").attr("data-src",new_logo);
      $(".logo-image").attr("data-srcset",new_logo);
      $(".logo-image").attr("srcset",new_logo);
      $(".logo-image").css("display","block");
   });
});
</script>
Меняем светлую тему на темную (или любую другую). Фотограф Константин Шамин

Моды для Wfolio.ru

Меняем светлую тему на темную (или любую другую). Фотограф Константин Шамин

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

Меняем светлую тему на темную (или любую другую). Фотограф Константин Шамин

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

Меняем светлую тему на темную (или любую другую). Фотограф Константин Шамин

Генератор случайных цифр

Виджет генератора случайных чисел. — задается диопазон «от» и «до»; — старт в один клик; — перебор других значений...
Меняем светлую тему на темную (или любую другую). Фотограф Константин Шамин

Виджет. Кнопка сохранения контактов

Данный виджет генерирует vCard — электронную визитку и её QR-код. Визитка поддерживает: — ФИО, — род...
Меняем светлую тему на темную (или любую другую). Фотограф Константин Шамин

Модицикация: выделение заголовка другим цветом

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

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

Модификация блока с ценами на пакеты услуг с помощью CSS/JS: — выравнивание высоты блоков с пакетами услуг в версии...
Меняем светлую тему на темную (или любую другую). Фотограф Константин Шамин

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

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

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

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

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

Меняем светлую тему на темную (или любую другую). Фотограф Константин Шамин

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

Меняем светлую тему на темную (или любую другую). Фотограф Константин Шамин

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

Меняем светлую тему на темную (или любую другую). Фотограф Константин Шамин

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