• Замена кнопок - картинок на "прорисованные" в CSS • 
Картинки для интерфейса давно уже канули в историю
При создании темы о вопросах для двигателя форумов phpBB ветки до версии 3.0.14 название темы должно начинаться с короткого названия вопроса на русском языке с Большой буквы. Создание тем в данном подфоруме только не о модах. Темы о модах для ветки до версии 3.0.14 в соседнем подфоруме. И помните - Вам тут никто ничего не должен. При малейшем "приказном" тоне в сообщениях - бан на вечно.

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

Сообщение Разместил Александр Лешванов 10 фев 2017, 10:14

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

Аватар пользователя
Александр Лешванов
(можно Николаич)
(можно Николаич) 
*
Google Chrome 31.0.165 Google Chrome 31.0.165
Windows XP Windows XP

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

Сообщение Разместил Александр Лешванов 05 янв 2018, 13:10

Заменить можно многое в стиле, но не все. Рассмотрим самое простое использование "прорисовки картинок" вместо использования "физических" картинок. Самое простое - кнопки. Начнем с больших, а потом по мере надобности рассмотрим замену на "прорисованные" маленьких.
Первое что встретилось - самый простой вариант от 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      { }

Аватар пользователя
Александр Лешванов
(можно Николаич)
(можно Николаич) 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

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

Сообщение Разместил Александр Лешванов 05 янв 2018, 13:12

Но мы ведь не ищем легких путей? Значит "едем " дальше. Инструкция с чисткой всего "мусора" от бывшей кнопки - картинки. Что меняем? Меняем кнопку ОТВЕТИТЬ в ЛС.. Ее название 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;
}

Аватар пользователя
Александр Лешванов
(можно Николаич)
(можно Николаич) 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

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

Сообщение Разместил Александр Лешванов 05 янв 2018, 13:14

Не забываем проверять истинные размеры удаляемой кнопки - картинки и вбить их в эти строки -
Код: выделить все
  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> . Они там для нашей прорисованной кнопки уже не нужны. И вообще - СПАНЫ ЗЛО!!! :P Все? Неееее. :P Для порядка - еще далеко не все...

Аватар пользователя
Александр Лешванов
(можно Николаич)
(можно Николаич) 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

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

Сообщение Разместил Александр Лешванов 05 янв 2018, 13:15

Теперь начинается самое интересное - удаление мусора от бывшей кнопки - картинки и самой кнопки. И так - поехали.
Мы помним, что все кнопки можно назначать из настройки изображений в админке на вкладке СТИЛИ - НАБОРЫ ИЗОБРАЖЕНИЙ. Зачем нам там нужна теперь ТА настройка? Удаляем все на фиг. И забудем об этой картинке на всегда. Она нам теперь будет только сниться....
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;

Аватар пользователя
Александр Лешванов
(можно Николаич)
(можно Николаич) 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

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

Сообщение Разместил Александр Лешванов 05 янв 2018, 13:17

В итоге имели это (картинку) -

Аватар пользователя
Александр Лешванов
(можно Николаич)
(можно Николаич) 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

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

Сообщение Разместил Александр Лешванов 05 янв 2018, 13:18

А станет это (Прорисовка) -

Аватар пользователя
Александр Лешванов
(можно Николаич)
(можно Николаич) 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

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

Сообщение Разместил Александр Лешванов 05 янв 2018, 13:19

Но и это еще не все. Еще можно убрать в самом php коде любые упоминания о бывшей кнопке - картинке.
А ведь код для них есть еще и там!!! Но это уже потом. Как нибудь... Возможно... :pri_vet:-:

Аватар пользователя
Александр Лешванов
(можно Николаич)
(можно Николаич) 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

Вернуться в Вопросы и проблемы движка phpBB до версии 3.0.14



 • Блок вывода аналогичных по названию других тем нашего форума • 

HTML5 Validated Счетчик ИКС Яндекс.Метрика
cron