Вы здесь

Как добавить css стили к заголовку блока?

0

Например блок имеет такое название :

" Добро пожаловать в dru.io! "

А я хочу выделить как то название сайта . Допустим хочу чтобы она была красным цветом а все остальное по умолчанию.Подскажите пожалуйста если можно.

Версия Drupal: 
7.x
Категория: 
HTML/CSS
Вопрос задан 19.07.2015 - 21:44

Ответы

5

Я обычно добавляю классы для всех блоков в template.php. Один из них связан с дельтой блока.
Дельта блока - уникальный идентификатор блока внутри модуля.

<?php
function YOURTHEME_preprocess_block(&$variables) {
    $variables['classes_array'][] = drupal_html_class('block-' . $block->module . '-' . $block->delta);
}

Вы сможете обратиться к заголовку вашего блока через css таким образом:

.block-block-6 > h2 {
    color: red;
}

Можно обойтись без добавления класса и обращаться по ID, ведь он есть у каждого блока:

#block-block-6 > h2 {
    color: red;
}

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

UPD: Надо выделить только dru.io.
Тогда оставьте поле заголовок блока пустым, а в содержимом блока напишите ваш заголовок:

<h1>Добро пожаловать в <span class="your-class">dru.io</span>!</h1>

И для your-class пропишите стили ЦСС.

Ответ дан 19.07.2015 - 22:16

спасибо, очень познавательно

Комментарий оставлен 19.07.2015 - 22:29

id - уникальный селектор, так что для разных блоков придется добавлять так:

#block-block-6 h2, #block-block-7 h2, #block-block-12 h2 {color:red;}

я обычно этим обхожусь, хотя конечно можно добавлять 1 общий класс этим блокам и в css писать для одного класса нужные стили

Комментарий оставлен 19.07.2015 - 22:31

Вы не поняли . Мне надо не весь текст выделить красным в заголовке блока а только dru.io.

"Добро пожаловать в dru.io !" (Заголовок)

А внизу уже содержимое блока идет...

А может не надо мне это??Может лучше сделать через фото-редактор картинку ??

Просто картинка будет грузится . А возможно и не загрузится....а содержимое блока никуда не денется я думаю..

Комментарий оставлен 19.07.2015 - 22:38

обратите внимание на дизайн сайта дру.ио тут нету такой пестроты.
и вы не делайте, даже если это не о дру ио

Комментарий оставлен 19.07.2015 - 23:42

Тогда оставьте поле заголовок блока пустым, а в содержимом блока напишите ваш заголовок:

<h1>Добро пожаловать в <span class="your-class">dru.io</span>!</h1>

И для your-class пропишите стили ЦСС.

Комментарий оставлен 20.07.2015 - 07:20

Вы правы.Не буду заморачиватся. Дизаин чем проще чем лучше наверно.Всякие такие яркие цвета не всегда хорошо...

Спасибо.

Комментарий оставлен 20.07.2015 - 19:41

Тоже как вариант не плохо.Спасибо.Буду иметь ввиду.

Кстати вот вы сказали на счет "span" и я вспомнил. Вчера в содержимой блока одно слово выделил красным цветом. И указал встроенные стили. Т.е . так :

   .  <span class="color:  red" >

Но где то не помню читал что лучше через классы делать ..вот как вы сказали так.

Просто видите я совсем не давно стал изучать css и боюсь ненакосячить.

Комментарий оставлен 20.07.2015 - 19:49

Наверное, вы имели ввиду стиль (style="..."), а не класс:

<span style="color: red" >

Лучше html отделять от css, чтобы html отвечал только за информацию в блоках, а как они выглядят - это в css.
Почему:
п1. Для одного блока может применяться разные стили в разных случаях:

// Стандартный стиль
.your-class {
    color: red;
}

// Если браузер - Эксплорер 8
.ie8 .your-class {
    color: black;
}

// Если разрешение экрана меньше 650px (адаптив)
@media screen and (max-width: 650px) {
    .your-class {
        color: green;
    }
}

п2. Если блок, который выглядит одинаково, надо вывести несколько раз:

<!-- правильно, т.к чтобы изменить вид всех блоков
надо отредактировать класс .your-class -->
<div class="your-class"></div>
<div class="your-class"></div>
<div class="your-class"></div>

<!-- неправильно, т.к чтобы изменить вид всех блоков
надо редактировать стили в каждом блоке отдельно.
Также невозможно задать разные стили
в зависимотси от условий (пункт 1). -->
<div style="color: red; font-size: Arial;"></div>
<div style="color: red; font-size: Arial;"></div>
<div style="color: red; font-size: Arial;"></div>

п3. Т.к. 2 пункта выше встречаются в каждом сайте, стало стандартом, что стили отдельно, html отдельно.

Комментарий оставлен 20.07.2015 - 21:08

Есть сер!)Я понял . Спасибо вам за подробные разъяснения.
Отмечаю ваши ответы как решение на мой вопрос. Тема закрыта.

Комментарий оставлен 20.07.2015 - 23:07

Страницы