CSS полей

Главные вкладки

Аватар пользователя Reisor Reisor 31 января 2019 в 1:57

Доброй ночи. Нужна помощь. Не пойму как поправить поля стилями:

<div class="kartrig">
                        <div class="type"> {{ content.field_type }} </div>
                        <div class="brend">{{ content.field_brend }}</div>
                        <div class="nomer">{{ content.field_nomer }}</div>

Выводятся таким образом:
Тип
Лазерный
Бред
HP
Номер
85А
и так далее.
А нужно:
Тип: Лазерный
Бред: HP
Номер: 85А
и далее по характеристикам.
При просмотре в режиме разработчика получается див в диве, потом еще раз див, и задать стили не могу(((
Вот так:

Тип
Лазерный

Комментарии

Аватар пользователя gun_dose gun_dose 31 января 2019 в 9:40

Чтобы лэйбл и значение отображались в одну строку:

.type, .brend, .nomer {
  display: flex;
}

Для двоеточий после лэйбла:

.селектор-лэйбла-поля:after {
  content: ':';
}
Аватар пользователя Reisor Reisor 1 февраля 2019 в 0:27

Кажется не совсем верно сказал. Как css подключить я знаю, проблема в том, что у этих полей есть значения, вот и их надо править в css.
Вот что я вижу:

<div class="type">
  <div>
    <div>Тип</div>
              <div>Лазерный</div>
          </div>
</div>

<div class="brend">
  <div>
    <div>Бренд</div>
              <div>HP</div>
          </div>
</div>

<div class="nomer">
  <div>
    <div>Номер</div>
              <div>85А</div>
          </div>
</div>

Стандартный шаблон field.html.twig
Сами стили к полям type, .brend, .nomer и так далее подключить нет проблем, а вот дивы со значениями я не знаю как их отредактировать(((( Номер и его значение (85А) иду не в одну строчку, стилями не пойму как.
Надо править стандартный шаблон field.html.twig?

Аватар пользователя marassa marassa 1 февраля 2019 в 12:46

Посмотрите в Управление отображением для вашего типа материала, какой там шаблон поля стоит для полей brend и nomer - похоже что "минимальный". Поставьте хотя бы "по умолчанию", и будут отдельные классы и для метки и для значения:

<div class="field field--name-field-year-built field--type-string field--label-inline">
  <div class="field__label">Built</div>
  <div class="field__item">1922</div>
</div>