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

Оживите заголовок своей карты-истории яркими красками или вообще не красьте.

Итак, вы хотите изменить цвет заголовка Cascade. Звучит достаточно просто, верно? Что ж, если вы точно знаете, что нужно изменить и где это сделать, то процессочень прост.

Но в том-то и беда: поскольку цвет заголовка меняется в зависимости от положения прокрутки (точнее, изменяется его непрозрачность), его цвет определяется с помощью JavaScript. А изменить стили на основе JavaScript немного сложнее, чем просто добавить переопределения CSS в index.html. Чтобы изменить цвет заголовка, вам придется изменить разрабатываемую (то есть неминифицированную) версию исходного кода приложения, а затем перекомпилировать приложение перед его развертыванием на ваших серверах.

Если это звучит пугающе, не бойтесь. Опять же, пока вы знаете, что/где настроить — а сама цель этого урока — показать вам эти вещи — у вас не должно возникнуть проблем с изменением цвета заголовка Cascade. В этом уроке мы по существу инвертируем внешний вид заголовка, чтобы цвет фона был белым, а текст темно-серым. Конечно, вы можете использовать любые другие цветовые сочетания в своей истории. Читайте дальше, чтобы начать.

Требования:

• Каскад общедоступных карт-историй
• Редактор кода (Sublime Text, Atom и Notepad++ — хорошие варианты)
• Базовое понимание JavaScript и CSS
• Веб-сервер для размещения вашей настроенной карты-истории

Начиная:

Далее следует краткое руководство по загрузке исходного кода и настройке локальной среды разработки:

1. Клонируйте или скачайте исходный код приложения с Github. (Помните, что вы хотите получить неминифицированный код, а неготовый код, доступный на странице Релизы.)
2. Откройте окно командной строки и перейдите в свой рабочий каталог. Запустите npm install, а затем npm install -g grunt-cli, чтобы установить необходимые зависимости. (Примечание: если вы получаете сообщение об ошибке после ввода любой из этих команд, попробуйте sudo npm install или sudo npm install -g grunt-cli и введите пароль своей учетной записи при появлении запроса.)
3. После завершения установки запустите grunt dev, чтобы запустить тестовую среду. Эта команда соберет приложение один раз, а затем «просмотрит» исходный код; если вы внесете какие-либо изменения, он автоматически перестроит только затронутую часть и, при необходимости, обновит страницу в браузере.
4. Откройте второе окно командной строки, указав на тот же каталог, и запустите grunt server (или другую команду, запускающую локальный сервер).
5. Откройте окно браузера и перейдите к localhost:8080/src/?appid=APP ID HERE. Обязательно вставьте идентификатор общедоступной истории Cascade вместо текста-заполнителя. Ваша история должна загрузиться, как и ожидалось.

Если вы новичок в хостинге или раньше не работали с разрабатываемой версией кода, статья ниже содержит немного больше информации о процессе:

Теперь, когда вы настроили локальную среду разработки, пришло время погрузиться в настройку!

Изменение цвета заголовка

Откройте папку src в редакторе кода. Вам потребуется внести изменения в следующие файлы: Cover.jsx; Header.jsx; Header.less; и Bookmarks.less. Самый быстрый способ найти эти файлы — нажать CMD/CTRL+P, что позволит вам выполнить поиск в текущем каталоге проекта (который должен быть src) для этих конкретных файлов.

Обратите внимание, что на самом деле в проекте есть два файла с именами Cover.jsx; вам нужен тот, который находится в каталоге app/storymaps/tpl/view/section/Cover, а не тот, который находится в каталоге app/storymaps/tpl/print/section.

Зачем столько разных файлов, спросите вы? Их имена должны давать подсказку: мы меняем не только цвет фона элемента заголовка, но также цвет названия истории, закладок и значков общего доступа. Мы будем работать с этими четырьмя файлами один за другим.

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

Cover.jsx

Титульная страница — это первое, что увидят ваши читатели, когда увидят вашу карту-историю, поэтому имеет смысл начать переделку шапки здесь. Кстати, фон заголовка даже не виден при первой загрузке обложки; только после того, как читатель прокрутит страницу примерно до половины, она начинает медленно исчезать. Но то, что фон заголовка изначально невидим, не означает, что ему не назначен цвет. По умолчанию этот цвет черный.

Перейдите к строке 132 Cover.jsx. Метод updateContent влияет на непрозрачность цвета фона заголовка. Вы заметите, что альфа-значение в строке 135 динамически определяется положением прокрутки — довольно умно, не так ли? Замените значения RGB в строке 135 нужными значениями. В этом примере мы меняем цвет заголовка на белый, поэтому я заменю значения RGB по умолчанию (0,0,0) на мои (255,255,255).

Затем обновите значения RGB в строке 138: в моем случае это 255,255,255. Оставьте альфа-значение 0 (невидимый) нетронутым. Вот как должен выглядеть весь метод после внесения этих изменений:

Один файл закончился, осталось три.

Заголовок.jsx

Перейдите к строке 198. Эта строка просто гарантирует, что цвет фона заголовка сбрасывается на белый, как только читатель переместится за титульную страницу. Замените значения RGB в этой строке (0,0,0) значениями RGB желаемого цвета фона. Снова оставьте альфа-значение (1) как есть. Вот как эта строка должна выглядеть, когда вы закончите (при условии, что вы также меняете цвет заголовка на белый).

this._node.css(‘background-color’, ‘rgba(255,255,255,1)’);

Коротко и мило. Давайте двигаться дальше.

Header.less

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

Большинство этих настроек стиля говорят сами за себя, но в двух словах, вот что они делают.

• Измените цвет фона заголовка на белый (#FFF; запасной вариант)
• Уменьшите непрозрачность тени заголовка, так как непрозрачность по умолчанию визуально подавляет белый заголовок.
• Измените цвет свечения логотипа на обложке на белый (#FFF).
• Измените цвет текста заголовка с белого на темно-серый (#4C4C4C).
• Измените цвет при наведении ссылки заголовка на черный (#000).
• Измените цвет при наведении ссылки заголовка обложки на белый (#FFF)

Класс .compact определяет, как заголовок будет отображаться на титульной странице. Я рекомендую использовать CMD/CTRL+F для поиска в файле соответствующих селекторов CSS. Обратите внимание: если вы меняете цвет фона заголовка на какой-либо другой, кроме белого, или если у вас особенно красочное (или ненасыщенное!) фоновое изображение или видео обложки, вам может потребоваться выбрать другие дополнительные цвета (тени/свечение, ссылка цвета при наведении и т. д.).

.story-header {
  background-color: rgba(255,255,255,1);
  -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
}
.story-header.compact {
  background-color: rgba(255,255,255,0);
  color: #4C4C4C;
}
.story-header.compact .logoImg {
  -webkit-filter: drop-shadow(0px 0px 3px #FFF);
  filter: drop-shadow(0px 0px 3px #FFF);
}
.story-header .title {
  color: #4C4C4C;
}
.story-header .share {
  color: #4C4C4C;
}
.story-header .share:hover {
  color: #000;
}
.story-header .link:hover {
  color: #000;
}
.story-header.compact .link:hover {
  color: #FFF;
}

Обратите внимание, что все эти правила CSS уже должны существовать в файле; вы просто обновляете значения цвета, кромепоследнего (цвет при наведении ссылки на обложку), который вам придется добавить вручную, чтобы перезаписать значения по умолчанию.

Остался еще один файл!

Без закладок

Наконец, вы должны обновить цвет своих закладок, чтобы он соответствовал обновленному стилю вашего заголовка.

.bookmark {
  color: #4C4C4C;
  &.active {
    color: #000;
  }
}

В зависимости от цвета заголовка вам также может понадобиться изменить цвет границы кнопки закладки. Вы также можете обновить свойство границы в этом файле… но я оставлю вас, чтобы разобраться с этим.

Как только вы будете удовлетворены внешним видом своего заголовка, добавьте идентификатор своего приложения в раздел конфигурации приложения index.html. Сейчас самое время заполнить эти теги Open Graph, чтобы ваша история выглядела великолепно при публикации в социальных сетях.