[FAQ] Замена кнопок - картинок на "прорисованные" в CSS

[Пчелкин]

А действительно, как избавиться от миллионного количества картинок в интерфейсе форума? Картинки для интерфейса давно уже канули в историю. Веб китовые технологии рулят и использование CSS все более прогрессивно. При этом прорисовка в CSS вместо использования картинок дает экономию в загрузке страниц, Заменить можно многое в стиле, но не все. Рассмотрим самое простое использование "прорисовки картинок" вместо использования "физических" картинок. Самое простое - кнопки. Начнем с больших, а потом по мере надобности рассмотрим замену на "прорисованные" маленьких.

Первое что встретилось - самый простой вариант от Sheer
Открыть styles/prosilver/theme/buttons.css
Найти;

Код: Выделить всё

.buttons div.post-icon      { width: {IMG_BUTTON_TOPIC_NEW_WIDTH}px; height: {IMG_BUTTON_TOPIC_NEW_HEIGHT}px; }

заменить на

Код: Выделить всё

.buttons div.post-icon
{
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 10px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

Открыть styles/prosilver/theme/colours.css
Найти:

Код: Выделить всё

.post-icon span      { background-image: url("{IMG_BUTTON_TOPIC_NEW_SRC}"); }

Заменить на

Код: Выделить всё

.post-icon span      { }

Но мы ведь не ищем легких путей? Значит "едем " дальше. Инструкция с чисткой всего "мусора" от бывшей кнопки - картинки. Что меняем? Меняем кнопку ОТВЕТИТЬ в ЛС.. Ее название button_pm_reply.gif
Открыть styles/prosilver/theme/buttons.css. Берем название картинки и вбиваем в поиск по файлу: button_pm_reply
Находим строку:

Код: Выделить всё

.buttons div.pmreply-icon                      { width: {IMG_BUTTON_PM_REPLY_WIDTH}px; height: {IMG_BUTTON_PM_REPLY_HEIGHT}px; }

Значит класс этой кнопки обзывается pmreply-icon ... запоминаем... полный код класса стиля кнопки .buttons div.pmreply-icon. Что бы при наведении на кнопку не было подчеркивания ее названия, добавляем в строку символ a... Получаем - .buttons div.pmreply-icon a
Теперь вместо строки

Код: Выделить всё

.buttons div.pmreply-icon                      { width: {IMG_BUTTON_PM_REPLY_WIDTH}px; height: {IMG_BUTTON_PM_REPLY_HEIGHT}px; }

в файл styles/prosilver/theme/buttons.css вставляем новый код "прорисованной" кнопки:

Код: Выделить всё

.pmreply-icon span { }
.buttons div.pmreply-icon a
{
  border: 2px solid #CCCCCC;
  height: 25px;
  width: 90px;
  overflow: hidden;
  display: block;
  text-align: center;
  line-height: 27px;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;  
  /*закругленные углы*/
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
 
  /*градиент*/
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
 
  /*Transition*/
  -webkit-transition: All 0.5s ease;
  -moz-transition: All 0.5s ease;
  -o-transition: All 0.5s ease;
  -ms-transition: All 0.5s ease;
  transition: All 0.5s ease;
}
.buttons div.pmreply-icon a:hover {
  border: 2px solid #000066;
  text-decoration: none;
}

Не забываем проверять истинные размеры удаляемой кнопки - картинки и вбить их в эти строки -

Код: Выделить всё

  height: 25px;
  width: 90px;

При этом высота height - ровно половина от высоты бывшей кнопки картинки, если она состояла из двух половинок.
Теперь лезем в styles/prosilver/theme/colours.css
Находим в нем строку с названием класса кнопки - картинки pmreply-icon
Находим:

Код: Выделить всё

.pmreply-icon span { background-image: url("{IMG_BUTTON_PM_REPLY_SRC}") ;}

в блоке /* Big button images */ и удаляем ее на фиг. В файле colours.css она более не нужна...
Это еще не все. Что бы новая кнопка была похожа на прежнюю кнопку - картинку, надо найти ее языковую переменную и изменить перевод на соответствующий бывшей надписи на кнопке - картинке, то есть, в нашем случае - на заглавные буквы. Заодно добавим для новой кнопки свой титл -всплывающую подлсказку (title)- Переменная названия этой кнопки - POST_REPLY_PM
Эту переменную мы находим в языковом файле ucp.php и заменяем в нем строку:

Код: Выделить всё

   'POST_REPLY_PM'               => 'Ответить',

на

Код: Выделить всё

   'POST_REPLY_PM'               => 'ОТВЕТИТЬ',
   'POST_REPLY_PM_EXPLAIN'         => 'Ответить на это личное сообщение',

С названием кнопки и подсказкой для нее у нас теперь порядок
Ну, наконец-то.. Теперь лезем в HTML... Там необходимо сделать изменение вызова подсказки и исправить вывод переменной названия новой кнопки.... Находим код кнопки в HTML файлах, опять же, по ее классу pmreply. Думаю что учить как в БЛОКНОТЕ+ пользоваться поиском кусков кода не надо? Главное что б папка с файлами HTML стиля была на локалке... Так проще.
Данная кнопка находится в файле ucp_pm_message_header.html
Открываем его... Находим строку кнопки -

Код: Выделить всё

<!-- IF U_POST_REPLY_PM --><div class="pmreply-icon"><a title="{L_POST_REPLY_PM}" href="{U_POST_REPLY_PM}"><span></span>{L_POST_REPLY_PM}</a></div>

В этой строке надо немного сделать небольшие измнения.. Заменить часть -

Код: Выделить всё

title="{L_POST_REPLY_PM}"

на

Код: Выделить всё

title="{L_POST_REPLY_PM_EXPLAIN}"

И у нас появится подробненькая подсказка при наведении на прорисованную кнопку. Перевод подсказки (новая языковая переменная POST_REPLY_PM_EXPLAIN - от фантазии. Вуаля? Да нет. Еще не вуаля... Необходимо в этой строке удалить еще и <span></span> . Они там для нашей прорисованной кнопки уже не нужны. И вообще - СПАНЫ ЗЛО!!! Все? Неееее. Для порядка - еще далеко не все...

Теперь начинается самое интересное - удаление мусора от бывшей кнопки - картинки и самой кнопки. И так - поехали.

Мы помним, что все кнопки можно назначать из настройки изображений в админке на вкладке СТИЛИ - НАБОРЫ ИЗОБРАЖЕНИЙ. Зачем нам там нужна теперь ТА настройка? Удалаем все на фиг. И забудем об этой картинке на всегда. Она нам теперь будет только сниться....
1. Идем сначала в includes/acp/acp_language.php и удаляем в строке 'icon_back_top', 'icon_contact_aim', 'icon_contact_email', ..... (и далее там есть еще) код 'button_pm_reply',.
2. Затем в файле includes/acp/acp_language.php удаляем аналогичную часть кода 'button_pm_reply',.
3. Затем идем в styles/prosilver/imageset/ru/imageset.cfg и удаляем строку img_button_pm_reply = button_pm_reply.gif*25*94. Она там более не нужна.
4. И наконец удаляем из папки styles/prosilver/imageset/ru/ сам файл ненужной более картинки button_pm_reply.gif.
Все. От картинки мы избавились окончательно. Избавились и от ее следов в файлах стиля и темы. При наличии других стилей, проделать подобные правки и в файлах других стилей. Главное - не запутаться....

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

/*толщина бордюра по кругу и его цвет*/

Код: Выделить всё

  border: 2px solid #CCCCCC;

/*высота кнопки*/

Код: Выделить всё

  height: 25px;

/*ширина кнопки*/

Код: Выделить всё

  width: 90px;

/*текст названия кнопки по центру*/

Код: Выделить всё

  text-align: center;

/*положение названия кнопки по высоте от нижнего края блока кнопок (!!!!)*/

Код: Выделить всё

  line-height: 27px;

/*тип шрифта названия*/

Код: Выделить всё

  font-family: sans-serif;

/*высота шрифта*/

Код: Выделить всё

  font-size: 14px;

/*шрифт жирным*/

Код: Выделить всё

  font-weight: bold;  

/*закругленные углы - радиусы*/

Код: Выделить всё

  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;

/*градиент для разных браузеров*/

Код: Выделить всё

  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

/*задержка изменения вида при наведении на кнопку для разных браузеров*/

Код: Выделить всё

  -webkit-transition: All 0.5s ease;
  -moz-transition: All 0.5s ease;
  -o-transition: All 0.5s ease;
  -ms-transition: All 0.5s ease;
  transition: All 0.5s ease;

/*цвет бордюра при наведении*/

Код: Выделить всё

  border: 2px solid #000066;

/*отключение подчеркивания при наведении*/

Код: Выделить всё

  text-decoration: none;

В итоге имели (для примера и по аналогии) -

1783.jpg

В итоге имеем (для примера и по аналогии) -

1784.jpg

Удачи. Но и это еще не все. Потом рассмотрим то, как убрать в самом php коде любые упоминания о бывшей кнопке - картинке. А ведь код для них есть еще и там!!! Но это уже потом.