Картинки для интерфейса давно уже канули в историю. Веб китовые технологии рулят и использование CSS все более прогрессивно.
При этом прорисовка в CSS вместо использования картинок дает экономию в загрузке страниц,
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' => 'Ответить на это личное сообщение',
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>
. Они там для нашей прорисованной кнопки уже не нужны. И вообще - СПАНЫ ЗЛО!!! Все? Неееее. Для порядка - еще далеко не все...includes/acp/acp_language.php
и удаляем в строке 'icon_back_top', 'icon_contact_aim', 'icon_contact_email',
..... (и далее там есть еще) код 'button_pm_reply',
. includes/acp/acp_language.php
удаляем аналогичную часть кода 'button_pm_reply',
. styles/prosilver/imageset/ru/imageset.cfg
и удаляем строку img_button_pm_reply = button_pm_reply.gif*25*94
. Она там более не нужна.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;
php
коде любые упоминания о бывшей кнопке - картинке. Вернуться в Вопросы и проблемы движка phpBB до версии 3.0.14