beautiful-jekyll主题：CSS如何修改页面标题颜色？

Question

我设置了一个“漂亮的 Jekyll”blog/GitHub 页面，我想更改页面标题和副标题的字体颜色。

我想更改文字颜色：

Beautiful Jekyll
Build a beautiful and simple website in minutes

我在 main.css 中找不到合适的位置。我查看了 index.html、config.yml 和 css 文件夹，但找不到更改颜色的位置。

我有 main.css 文件的第 24 行到第 35 行：

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;
}

在 index.html 文件的第 28 行，我有：

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

当前网站：https://deanattali.com/beautiful-jekyll/
GitHub 页面：https://github.com/daattali/beautiful-jekyll

Answer 1

在 header.html 中有一个 <h1> 对应 page.title。

问题： parent div 有一个 class <div class="{{ include.type }}-heading"> 但元素本身没有 class 或可以在 CSS.

中使用的 id

解决方法：你需要在HTML中再添加一个class，在CSS中定义新的样式，只得到彩色的page.title.

如果您只在 CSS 中定义现有 <h1> 的颜色，则每个文档的标题都将被着色，因为 CSS 为 [=11] 定义了相同的样式=] 到 <h6>.

在 how to use classes in HTML/CSS 上查看本教程。

测试 HTML 和 CSS 更改

使用浏览器中的检查器（开发工具）（按 F12）查看页面元素。您甚至可以测试添加或更改特定 CSS 属性时会发生什么。了解我的意思 how to do it on your own.

为了测试，我已将 color: red 添加到 <h1> 标签中：

将 class 添加到您的 HTML 并更新您的 CSS

转到 header.html 中的第 28 行并将更改 <h1> 添加到 <h1 class="your-test-class">
转到 main.css 并在 <h1,...> 定义下方添加以下内容：

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

注意：此 h1 标签示例也适用于 sub-title。

beautiful-jekyll主题：CSS如何修改页面标题颜色？

beautiful-jekyll theme: How to modify the page title color in CSS?

html

css

jekyll

jekyll-theme

测试 HTML 和 CSS 更改

将 class 添加到您的 HTML 并更新您的 CSS