Темизация блока с цитатой в стиле Skype (Quote)

Возможно, вы уже знакомы с модулем “Quote” и знаете, что этот модуль предоставляет фильтр для вставки и отображения цитат, нажатием ссылки под материалом или комментарием. И все бы хорошо, если бы меня не расстраивал скучный внешний вид цитат. Я, как-то привыкла, что подпись идет под цитатой, и она отображается более изящно. И решила это исправить.

Как вы уже понимаете, сегодня я не буду рассказывать вам про сам модуль друпала “Quote” … да и рассказывать там особо не чего — установили, настроили, включили в фильтрах. Как видите, все просто. Лучше я поведаю вам про преображение этого "кошмара".

И так цель

Цель вы видите на картинке ниже.

Прежде чем начать

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

Вот примерно так (в любое место в файле, лучше в конец):

/**

 * Theme a quote with its content and author.

 *

 * @return $output_quote

 *   Themed quote.

 */

function phptemplate_quote($quote_content, $quote_author) {

  $quote_output = '<blockquote class="quote-msg">';

  $quote_output .= $quote_content;

  if ($quote_author != '') {

    $quote_output .= '<span class="quote-author">&mdash; '. t('%name', array('%name' => $quote_author)) .'</span>';

  }

  else {

    $quote_output .= '<span class="quote-author">&mdash; '. t('author is not mentioned') .'</span>';

  }

  $quote_output .= '</blockquote>';

  return $quote_output;

}

ВНИМАНИЕ: У вас должен быть установлен модуль “Quote”.

Примечания

Замените phptemplate на название вашей темы, если нужно.
Я решила что лучше всего заменить <div> на <blockquote>, что вы и видите в коде выше.
Так как это цитата, значит, ее кто-то «сказал», но иногда бывает, что автор не указывается, так что так и напишем -→ ‘author is not mentioned’. И не забудьте потом перевести это как ‘автор не указан’.

Темизация цитаты под стиль Skype

В Skype цитаты выглядят очень мило и, по-моему, очень даже гармонично. Поэтому приступим к плагиату. Но опять же для начала, во избежание ненужного увеличения файлов CSS, нужно скопировать файл стилей из папки модуля “Quote” в папку стилей вашей темы или просто в папку вашей темы. Т.е. берем тут:

/sites/all/modules/quote/quote.css

… кладем сюда:

/sites/all/themes/название_вашей_темы/quote.css

Хотя, вам-то ещё проще, вы просто возьмете файл quote.css из приложенного к статье архива.

Затем опять же открываем файл template.php и прописываем вывод quote.css через нашу тему. Подробнее об этом читайте в материале — Переопределение CSS стилей модулей через тему оформления

Теперь рассмотрим что у меня получилось в файле quote.css:

blockquote, .quote-msg {

  margin:1em 2em 1em 2.5em;

  padding:0 1em;

  border-left:3px solid #ddd; /* граница слева от цитаты */

}

.quote-author {

  display:block;

  font-weight:bold;

  color:#aaa;

  margin:0.5em 1em;

}

blockquote:before {

  color:#CCCCCC;              /* цвет кавычки */

  content:"“";                /* кавычка */

  display:block;

  float:left;

  font-family:Georgia,Times New Roman,sans-serif;

  font-size:500%;             /* размер кавычки */

  left:-43px;                 /* положение по горизонтали */

  line-height:1px;      /* Opera fix */

  margin:0;

  padding:0;

  position:relative;

  top:25px;                   /* положение по вертикали */

  width:0;              /* Safari fix */

  height:0;             /* Safari fix */