Создаем свой стиль на основе встроенного phphbbEx 2.0 (phpbb 3.1.*)

Список разделов phpBBex 2.x (заброшен) Мастерская 2.x

Описание: Только готовые решения! Статьи, заметки, моды и другие полезности для phpBBex 2.x и phpBB 3.1.x.
Модератор: Поддержка

Сообщение #41 Glenerg » 25.02.2017, 20:17

это где такая база64, не нашел?
Glenerg M
Репутация: 37
С нами: 9 лет 3 месяца

Сообщение #42 HD321kbps » 26.02.2017, 03:43

Glenerg:это где такая база64, не нашел?
тут
HD321kbps M
Аватара
Откуда: Армянск
Репутация: 376
С нами: 11 лет 8 месяцев

Сообщение #43 Glenerg » 26.02.2017, 12:21

где каринку кнопки найти?
Я так понимаю если сильно не парится и заменить картинку на картинку с точно таким же названием то будет работать
Glenerg M
Репутация: 37
С нами: 9 лет 3 месяца

Сообщение #44 Sumanai » 26.02.2017, 14:20

Никакого названия у этого изображения нет, оно закодировано и располагается в файле buttons.css вашего стиля, в селекторе #back-to-top, свойство background.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 9 месяцев

Сообщение #45 Glenerg » 26.02.2017, 15:23

Спасибо
Glenerg M
Репутация: 37
С нами: 9 лет 3 месяца

Сообщение #46 Artem » 19.03.2017, 19:00

у меня при смене картинки почему-то ничего не происходит...
.headerbar {
color: #FFF;
background-color: #0A3D87;
background-image: url("./images/head.jpg");
background-image: -webkit-linear-gradient(#0A3E89 0%,#092146 2px,#0A3D87 92px); /* Chrome10+,Safari5.1+,Mobile browsers */
background-image: linear-gradient(#0A3E89 0%,#092146 2px,#0A3D87 92px);
background-repeat: repeat-x;
Artem
Репутация: 1
С нами: 9 лет

Сообщение #47 Sumanai » 19.03.2017, 19:16

Потому что градиент задан через linear-gradient, картинка для старых браузеров. Если у вас что-то сложнее градиента, то удаляйте строки с linear-gradient, если у вас просто градиент, пропишите нужные цвета в ключевые точки.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 9 месяцев

Сообщение #48 Glenerg » 21.03.2017, 13:04

Давайте вернемся к нашим баранам, а точнее к кнопке- Вдруг кому пригодится.
1.Создаем рисунок, который хотите использовать в кнопке (На верх).
2.Рисунку делаем прозрачный фон, я делал в онлайн фотошопе. Я делал на сайте http://www.pixlr.com/. Как сделать: снимаем на заднем фоне замочек, волшебной палочкой выделяем фон который должен стать прозрачным, нажимаем Delete и сохраняем файл к себе в формате png - Обязательно.
3.Заходим на сайт http://toolser.ru/ Онлайн кодирование и декодирование картинок в формат Base64, или туда и обратно.
4.Копируем код и вставляем его у себя на сайте в файловом менеджере styles/ваш стиль/theme/buttons.css
Находим там типа такой штуки
Спойлер
#back-to-top {
display: none;
z-index: 10;
position: fixed;
top: 0;
left: 0;
margin: 15px;
width: 24px; -размер картинки
height: 24px; -размер картинки
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAZlBMVEUAAACEiY2SmJ2epKmjqq+lrLGor7SosLWpsbaqsbaqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbersrettLm6wMTDyc3O09bZ3d/q6+3x8vP5+fr8/f1nT312AAAAF3RSTlMAGiEnNEFPYGpxeoeUnqm1vdLk7vP4+0kZka8AAACySURBVHgBddDxboYgDATwAx36qVPBQZ3TMd7/JbcQSpDM359ccyVFIl+rJqeXXqLUvBOzUxEpS4VNIXnRnevSPNXcW1zLPYVNAMh7SyPQOGLXRcxKDMSOEL6I9Vgp2X0I/pOSGSYXhT+5TMPmoujgf3Gwf4fI7xQZrjpDcnLVQpHn4IeXD/SvvroI+xDA9HASyO3hiFCOKrZF1FWJVUjUrc20yMRk8/goUBLdrI3Rs+LnX+9DKZ4DVjilAAAAAElFTkSuQmCC") no-repeat;
cursor: pointer;
opacity: 0.6;
и меняем код на свой, у меня получилось так
Спойлер
#back-to-top {
display: none;
z-index: 10;
position: fixed;
top: 0;
left: 0;
margin: 15px;
width: 36px;
height: 36px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAD5klEQVR42u2Xe0xOcRjH38ammyiVk4zMJZFiWRktl2bIbZmwpnS/S5nXdE+TXNtSW4vMbSKpxMKmWirptnKvFOVWqqUlNOvV4/mdE4pze1+vyx/9tu/e7T3n/M7nPL/v8/yen0QyPIbHPxjlTTVw8GYSOKb6gc1he7Dcb0fL+tB6cEjxAunlGMh9mA9/HCS58Ay+eBWM9DEEiZMmSgMkzvjrPPqHyH/kmts4mBZqBdKMGHjW/kK5cFnV18E0ajFIto1hXuqhBxIvA355jgeJy1gaUC/IBKKuHlYOVEh2HIzwpBBGC19Ccbyc4odz1aE/ZPUxR2hsb1YcbEOyB7Mk7gIRweWReOgLRIyiozU1xBIet9TLD7X9QhizPCT0fC9y16WNrBEwVfheIpzTYt9yeN3V6iIaJrHg5MASjReMzMwoG3jf2wP+aaGMx4SAaChNWJvkLC5Kr9693TNBas4sA+/EFH3P+fIs6O/vh5edb8Bw9zw6YsKGZ57NqLomDBWUHslER2hSzKBl8Q7QJ+ujgYgS8lPxf5FRQqOb7l3KD9TS3b5Sf5eZsIlxKUd6GUJxQ/l3GKJPn3vBInYFk1UioTKrc7mhzpdlipsMveJyKmgIzDflPsgb+CBKRJS1YfNxb24gx1R/+ib+rNID3eBZ0NDWxApEtDHFU5zB0W9GWAY4gWzRE4IRQu/sv3GME4boSctTGBs4Q7g24XWdYBOoa21khzKLseXPLrxmHGkNXR+7eYGIwnMOCUcJs22Ez0SoeF7DDkS73k2XN83TyrMFYYg6ejphevgi/g8UArKKs+OegKT5UQeQyWSigIjO3s3gtwACqQVMgZqXj9iB1iQ5sU9A0tybpHmZaBiivi8yrFUbuRMFuwYD6Vxo7nhVxAq0Iz2C/WGEDLwYLhfMrwZn2YbQHnP4imNebfHAg9SQsKr7G8Hp0nQowggV1peK1u36u3CnsRKjtIndm2j6nZei+av17Ogl+PDQZVPxnsCksKu2AtJhnmczNP4SYF6glKJzHD6imN1fIbFUbdzz7JPdxO34liTbxLYSigirvarvJLjHlV0/j0Jce3U/I3GthLwi0cISEnXtiHxdY3plDtPMC/ZF8sDg8m1VB69zUsX6atI5qpIjjzKWj2QZ9llbTvj+3umDlALj8IX0lykULZKd2NyroWfib6Uo5yjU9qHNPPhiBOgEGQ8cDrUG9TzU0P2OiECQM9lWDVBBz6xLdIKShgrln2TrWhsg4spBmB+7Ekb5TR50YtUcdILVpIvrtLAF4H46GOhi+zdGVfN9IMY/cCMJIrHVIIrNTQDSdRbUlvwdiOHxP4yvNsOV8FTkw+gAAAAASUVORK5CYII=") no-repeat;
cursor: pointer;
opacity: 0.6;
5.Сохраняем и наслаждаемся проделанной работой
Glenerg M
Репутация: 37
С нами: 9 лет 3 месяца

Сообщение #49 sag-sag » 22.03.2017, 17:13

Glenerg, а что вышло, покажи)
sag-sag M
Аватара
Репутация: 411
С нами: 11 лет 3 месяца

Сообщение #50 Glenerg » 22.03.2017, 19:36

Цвет и размер поменял, сильно не грузился
Для меня основное было понять, как это работает
с прозрачностью (без наведения на Картинку на верх еще пока не разбирался, но и до этого дело дойдет)
до работы дойду(завтра) и покажу разницу на двух форумах

Добавлено спустя 18 минут 44 секунды:
Интересно, а переделать на кнопочку вниз
есть возможность
Glenerg M
Репутация: 37
С нами: 9 лет 3 месяца

Сообщение #51 vbnm » 23.03.2017, 08:03

видел, как чувак переделывал на кнопочку от яд-го чемоданчика,и ни че таг... ток пока еще не нажимали )))
vbnm
Репутация: 108
С нами: 11 лет 8 месяцев

Сообщение #52 Glenerg » 23.03.2017, 17:16

как и писал изменил только цвет и немного размер. Размеры картинок приблизительно одинаковый +- 1-2 пикселя
Вложения
Новый точечный рисунок.jpg
Новый точечный рисунок.jpg (5.98 КБ) Просмотров: 12828
Новый точечный рисунок2.jpg
Новый точечный рисунок2.jpg (2.98 КБ) Просмотров: 12828
Glenerg M
Репутация: 37
С нами: 9 лет 3 месяца

Сообщение #53 vbnm » 30.03.2017, 01:59

Glenerg:Интересно, а переделать на кнопочку вниз
есть возможность

https://www.phpbb.com/customise/db/extension/scroll_page/
vbnm
Репутация: 108
С нами: 11 лет 8 месяцев

Сообщение #54 Glenerg » 30.03.2017, 07:33

Расширением я знаю как
Glenerg M
Репутация: 37
С нами: 9 лет 3 месяца

Сообщение #55 Sumanai » 30.03.2017, 15:44

Glenerg, расширения ставятся элементарно.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 9 месяцев

Сообщение #56 Glenerg » 30.03.2017, 17:17

Да Я вроде знаю как ставится расширение :biggrin:
Хочу понять как это смонтировать на движке

Добавлено спустя 28 минут 45 секунд:
конечно было бы прикольно еслиб в админке
Сейчас есть - лево-право, было бы еще по расположению (вверху и внизу)
А еще круче: указал допустим
стрелки -
вверх -да,нет
вниз -да,нет
вверх-вниз-да-нет
с какой стороны
с лева-нет
справа-да
А верхом совершенства было бы
использовать стандартную- нет
загрузить код картинки в база64 - да
И вставляю код с базы
Ладно, нет предела мечтаниям, ручками, ручками :biggrin:

Добавлено спустя 3 минуты 48 секунд:
Сильно не прошу :biggrin:
Вот и думаю как часть расширения запихать в движок форума
Glenerg M
Репутация: 37
С нами: 9 лет 3 месяца

Сообщение #57 Sumanai » 30.03.2017, 18:25

Glenerg:Вот и думаю как часть расширения запихать в движок форума
Для чего? Ставьте расширение и не парьтесь, а стандартную стрелку отключите.
Всё, что я планирую по ней- это возврат обратно, как защита от случайного клика. Стрелка вниз лично для меня смысла не имеет.
Glenerg:использовать стандартную- нет
загрузить код картинки в база64 - да
В следующей версии там иконочный шрифт, можно легко перекрасить изменением одной строчки.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 9 месяцев

Сообщение #58 Месье Дарт » 17.04.2017, 12:36

Где и как можно убрать это свечение?
Изображение
Месье Дарт
Репутация: 0
С нами: 8 лет 2 месяца

Сообщение #59 Лекс » 17.04.2017, 13:29

Месье Дарт, посмотрите в /styles/Ваш стиль/theme в файле colours.css , там должен быть

Код: Выделить всё
#wrap {
   background-color: #FFF;
   box-shadow: 0 0 15px #CCC;
}


Вам нужно убрать box-shadow: 0 0 15px #CCC; :think:
Лекс
Аватара
Репутация: 27
С нами: 9 лет 9 месяцев

Сообщение #60 sag-sag » 17.04.2017, 13:31

Месье Дарт, это не свечение, а тень
Находите в colours.css вашего стиля:
Код: Выделить всё
#wrap {
   background-color: #FFF;
   box-shadow: 0 0 15px #CCC;
}
и удаляете
Код: Выделить всё
box-shadow: 0 0 15px #CCC;
sag-sag M
Аватара
Репутация: 411
С нами: 11 лет 3 месяца

Пред.След.

Вернуться в Мастерская 2.x



cron