Как изменить цвет заголовка в теме Beautiful-Jekyll?

Question

Я настроил «красивый Jekyll» блог / страницу GitHub, и я хотел бы изменить цвет шрифта заголовка страницы и субтитров.Однако я не могу найти нужное место на main.css

Вот пример веб-сайта:

https://deanattali.com/beautiful-jekyll/

Вот страница GitHub:

https://github.com/daattali/beautiful-jekyll

Я заглянул в папку index.html, config.yml и css, но не могу найти, где изменить цвет.

Я хотел бы изменитьЦвет текста:

Beautiful Jekyll
Build a beautiful and simple website in minutes

РЕДАКТИРОВАТЬ: У меня есть следующее:

Вокруг строки 24 до строки 35ish файла main.css у меня есть:

h1,h2,h3,h4,h5,h6 {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800;
}

a {
  color: {{ site.link-col }};
}

.header_class {
  color: red;
}

В строке 28 файла index.html, который у меня есть:

<h1 class="header_class">{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1>

, который работает.

Answer 1

В заголовке header.html .

есть <h1> для заголовка страницы. Некоторые проблемы:

• у родительского div есть класс <div class="{{ include.type }}-heading">, но сам элемент не имеет класса или идентификатора, который можно было бы использовать в CSS.
• Вам необходимо добавить другой класс в html и определить новые стили в CSS, чтобы получитьтолько цветной page.title
• Если вы определяете только цвет для существующего <h1> в вашем CSS, каждый заголовок каждого документа будет окрашен, так как CSS определяет те же стили для <h1> для<h6>.

Проверка изменений html и css:

• Вы можете использовать инструменты разработчика / инспектора в своем браузере (нажмите F12), чтобыпосмотрите на элементы страницы.
• Вы даже можете проверить, что происходит при добавлении / изменении определенных атрибутов CSS.

Здесь вы можете проверить, что я имею в виду и как это сделать самостоятельно .

Примечания:

Пока я проверял это, оказалось, что подзаголовок на самом деле имеет разные классы, которые вы можете использовать.Для тестирования я дал <h1> атрибут color: red, который точно не является решением, как я обрисовал выше.

Как добавить класс в html и обновить css:

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

1. Перейдите к строке 28 в header.html и добавьте изменения <h1> в <h1 class="your-test-class">
2. Перейдите в main.css и добавьте следующее ниже определение h1, ...:

.your-test-class {
  color: red;
}

См. Здесь полное руководство по html & css и конкретное использование классов в html и css .