How to change color of block in SquareSpace

Question

I am trying to change the colors of three blocks on the main page of my SquareSpace site: the very top black block and the two orange blocks farther down the page. Developer mode is enabled. (ignite.lifepacific.edu)

I inherited this site from someone who is much better at CSS and web dev stuff. I can't even seem to FIND the code that I need to edit to change these properties, I have tried inspecting the site and going through the template files with no luck yet.

I have tried editing the custom CSS for the site. I was successful in changing the background color of the very top black block by editing the site-wide css, but not the font color.

Here is the site wide CSS, but I am not even sure that this is where the problem is: (I apologize for the amount of code, but I can't tell what code would be helpful to 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;
}

I have tried inserting the below, which successfully changes the top block color, but does not change the font.

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

Answer 1

The following CSS, inserted via the CSS Editor or as part of the stylesheets in your developer-mode template will accomplish what you're after:

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

It may be that, by reviewing the above CSS, you can instead find the rules in the existing CSS and edit them, rather than adding additional rules. However, depending on the intended goals (and expected life of the website in question), adding more rules may be fine.

Because developer mode is enabled, it could be that you will not find the CSS within the CSS editor, but within the template files, within the styles folder. To access these files, you need to use SFTP or Git.

However, to simply achieve the styles you're looking for, you should be able to add them via the CSS Editor.

Note that, when targeting blocks via ID as I have in the code above, it is important NOT to target blocks starting with "yui". Such IDs are dynamically generated, so your CSS will not work as desired.

In writing the CSS above, I used the default web inspector, located block IDs, and looked for where existing CSS rules were that were defining the colors in the "quickNav". I hope that gives you a bit of insight on the process.