Как изменить цвет блока в SquareSpace - PullRequest
Новая
       19

Как изменить цвет блока в SquareSpace

1 голос
/ 15 мая 2019

Я пытаюсь изменить цвета трех блоков на главной странице моего сайта SquareSpace: самый верхний черный блок и два оранжевых блока дальше по странице. Режим разработчика включен. (Ignite.lifepacific.edu)

Я унаследовал этот сайт от кого-то, кто намного лучше разбирается в CSS и в веб-разработке. Я даже не могу найти код, который мне нужно отредактировать, чтобы изменить эти свойства, я попытался проверить сайт и просмотреть файлы шаблонов, но безуспешно.

Я пытался редактировать пользовательский 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;
}

1 Ответ

1 голос
/ 16 мая 2019

Следующий 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, но в файлах шаблонов , в папке styles. Для доступа к этим файлам вам нужно использовать SFTP или Git.

Однако, чтобы просто получить стили, которые вы ищете, вы сможете добавить их через редактор CSS.

Обратите внимание, что при нацеливании блоков по идентификатору, как я уже делал в коде выше, важно НЕ ориентироваться на блоки, начинающиеся с "yui". Такие идентификаторы генерируются динамически, поэтому ваш CSS не будет работать должным образом.

При написании CSS выше, я использовал веб-инспектор по умолчанию, находил идентификаторы блоков и искал, где были существующие правила CSS, определяющие цвета в «quickNav». Я надеюсь, что это даст вам некоторое представление о процессе.

...