Question

我正在尝试更改SquareSpace网站主页上三个块的颜色：页面顶部最上方的黑色块和两个橙色的块。开发人员模式已启用。（ignite.lifepacific.edu）

我从一个精通CSS和Web开发方面的人继承了这个网站。我什至似乎都找不到要更改这些属性而需要编辑的代码，我尝试检查站点并顺利通过模板文件。

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

这是站点范围内的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;
}

我尝试插入以下内容，该操作成功更改了顶部块的颜色，但没有更改字体。

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

Answer 1

通过CSS Editor插入的以下CSS，或作为开发人员模式模板中样式表的一部分插入的CSS，将完成您想要做的事情：

from time import *
# starting point
start = time()

while True:
    # 10 second timer
    if time() - start < 10:
        # input is the main problem
        a = input()
        print(round(time() - start, 2), "secs")
    else:
        print("finished")
        exit()

通过查看上述CSS，您可能可以在现有CSS中找到规则并对其进行编辑，而不是添加其他规则。但是，根据预期目标（和相关网站的预期寿命），添加更多规则可能没问题。

由于启用了开发人员模式，可能是您没有在CSS编辑器中找到CSS，而是在#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; }文件夹中的template files中找到了CSS。要访问这些文件，您需要使用SFTP或Git。

但是，要简单地实现所需的样式，您应该可以通过CSS编辑器添加样式。

请注意，当像我上面的代码中那样通过ID定位块时，重要的是不要以“ yui”开头的块为目标。这样的ID是动态生成的，因此您的CSS将无法正常工作。

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

如何在SquareSpace中更改块的颜色

1 个答案: