如何在 SquareSpace 中更改块的颜色

Question

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

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

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

这是整个站点 CSS，但我什至不确定这就是问题所在：（对于代码量，我深表歉意，但我不知道哪些代码会有帮助到 post!)

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

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

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

Answer 1

以下 CSS 通过 CSS Editor 插入或作为 developer-mode 模板中样式表的一部分将实现您的目标：

#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 定位块时，重要的是不要定位以 "yui" 开头的块。此类 ID 是动态生成的，因此您的 CSS 将无法正常工作。

在编写上面的 CSS 时，我使用了默认的 Web 检查器，找到了块 ID，并查找了现有的 CSS 规则在哪里定义了 "quickNav" 中的颜色.我希望这能让你对这个过程有所了解。

如何在 SquareSpace 中更改块的颜色

How to change color of block in SquareSpace

html

css

templates

colors

squarespace