Изменение фона одной страницы в Squarespace - PullRequest
Новая
       14

Изменение фона одной страницы в Squarespace

0 голосов
/ 29 июня 2019

Я пытаюсь изменить фон на странице блога моего сайта.На текущем веб-сайте черный фон, но я бы хотел, чтобы страница блога была белой с черным текстом.Мне нужно иметь свой собственный CSS, так как Squarespace не поддерживает это как пользовательский параметр.

Я уже пробовал коды, предоставленные для подобных вещей, но ничего не помогло.Например: https://answers.squarespace.com/questions/14800/how-can-i-change-the-content-background-color-on-only-one-page-using-css.html

# main {background-color: #ffffff;}

Я бы хотел, чтобы цвет фона изменился.

1 Ответ

0 голосов
/ 01 июля 2019

Вы можете настроить таргетинг на блог, в частности, по его идентификатору коллекции, который Squarespace добавляет в качестве класса для вас в элементе body. Оттуда мы должны нацелиться на div, который является его непосредственным потомком, .overflow-wrapper.

Вставьте следующий CSS через редактор CSS: 

.collection-5d0a3c81de1f2b00012ccccc .overflow-wrapper {
  background-color: white;
}

Поскольку текст белый, он будет невидимым. Вы должны иметь возможность корректировать заголовки и другую метаинформацию (автор, дата, теги, категории и т. Д.) С помощью редактора стилей.

Однако я не верю, что редактор стилей даст вам возможность изменять основной текст (элементы p) в блоге отдельно от остальной части сайта. Поэтому вам также может пригодиться следующий CSS-код для изменения основного текста на страницах блога на черный: 

.collection-5d0a3c81de1f2b00012ccccc p {
  color: black;
}

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

.collection-5d0a3c81de1f2b00012ccccc.site-spacing-small .site-header, .site-spacing-small .site-page, .site-spacing-small .site-footer {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 3vw;
  padding-bottom: 3vw;
}

.collection-5d0a3c81de1f2b00012ccccc #header {
  background-color: black;
}

И, наконец, заголовок страницы также должен быть черным: 

.collection-5d0a3c81de1f2b00012ccccc .page-text-wrapper .page-title {
  color: black;
}
...