html - 如何在 SquareSpace 中更改 block 的颜色

Question

我正在尝试更改 SquareSpace 网站主页上三个 block 的颜色:最上面的黑色 block 和页面下方的两个橙色 block 。开发者模式已启用。 (ignite.lifepacific.edu)

我从一个更擅长 CSS 和网络开发的人那里继承了这个网站。我什至无法找到我需要编辑以更改这些属性的代码，我已经尝试检查站点并浏览模板文件，但还没有成功。

我已尝试为网站编辑自定义 CSS。我通过编辑站点范围的 css 成功地更改了最顶部黑色 block 的背景颜色，但没有更改字体颜色。

这是站点范围的 CSS，但我什至不确定这就是问题所在:(对于代码量，我深表歉意，但我不知道发布哪些代码会有帮助!)

// Full-width content
.index-section.page .index-section-wrapper .content.page-content {
  padding-top: 0 !important;
}
.index-section.page:first-child .content.page-content {
  padding: 0 0 50px !important;
}
.index-section.page:nth-child(4) .content.page-content {
  padding: 0 !important;
}
.index-section.page:nth-child(2) .col .row.sqs-row {
  padding-left: 17px;
  padding-right: 17px;
}

//very top black block
#ign-quickNavWrapper > span{
  display: none;
}


//pictures at the bottom of main page
@media only screen and (max-width:640px) {
  #block-yui_3_17_2_3_1480364802859_23283 {
    display: none;
  }
  #page-583c7ead9f7456d4fb558775 .row.sqs-row .col.sqs-col-12.span-12 .row.sqs-row {
    margin-bottom: 3.2em !important;
  }
}

//block with colored text
#block-d65e6f0e47ed22f827df {
   background-color: #6d6d6d;
     padding: 20px;
}
#block-d65e6f0e47ed22f827df p{
  color: #ffffff;
}

// 6.22 update centering logo and navbar
.header-inner{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#header #logoWrapper, #header #logoImage{
  width: initial;
  margin-left: auto;
margin-right: auto;
}

我试过插入下面的内容，它成功地改变了顶部 block 的颜色，但没有改变字体。

#ign-quickNav {
  background-color: white;
  color: black;
  font-color: black;
}

Answer 1

以下 CSS，通过 CSS Editor 插入或者作为开发者模式模板中样式表的一部分将完成您所追求的:

#ign-quickNav {
  background-color: white;
}

#ign-quickNav a, #ign-quickNav a:hover {
  color: black;
}

#block-yui_3_17_2_1_1557948879558_24889 {
  background-color: #001a47;
}

#block-yui_3_17_2_2_1480363068238_30015 {
  background-color: #001a47;
}

可能是，通过查看上述 CSS，您可以在现有 CSS 中找到规则并进行编辑，而不是添加额外的规则。但是，根据预期目标(以及相关网站的预期生命周期)，添加更多规则可能没问题。

因为启用了开发者模式，您可能不会在 CSS 编辑器中找到 CSS，而是在 template files 中找到，在 styles 文件夹中。要访问这些文件，您需要使用 SFTP 或 Git。

但是，要简单地实现您正在寻找的样式，您应该能够通过 CSS 编辑器添加它们。

请注意，当我在上面的代码中通过 ID 定位 block 时，重要的是不要定位以“yui”开头的 block 。此类 ID 是动态生成的，因此您的 CSS 将无法按预期工作。

在编写上面的 CSS 时，我使用了默认的 Web 检查器，找到了 block ID，并查找了在“quickNav”中定义颜色的现有 CSS 规则所在的位置。我希望这能让您对这个过程有一些了解。