Адаптируемый стиль и меню

Есть любые вопросы, связанные со стилями/темами для phpBB 3.0.x? Задайте их здесь!
Правила форума
Местная Конституция | Шаблон запроса | Документация (phpBB3) | Переход на 3.0.6 и выше | FAQ-3 (phpbb3) | Как задавать вопросы | Как устанавливать моды

Ваш вопрос может быть удален без объяснения причин, если на него есть ответы по приведённым ссылкам (а вы рискуете получить предупреждение ;) ).
Аватара пользователя
Anvar
Former team member
Сообщения: 1962
Зарегистрирован: 26.03.2010 9:09
Благодарил (а): 67 раз
Поблагодарили: 784 раза

Адаптируемый стиль и меню

Сообщение Anvar » 03.03.2014 21:52

Адаптируемый стиль для prosilver, позволяет адаптироваться под планшеты, мобильные телефоны и другие девайсы с небольшим дисплеем.

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

Первый вариант - просто кидаем файл responsive.css в папку со стилями themes/ и подключаем его в stylesheet.css, очищаем кэш и заходим с любого девайса. [Отлично ведёт себя с phpBB Gallery, Buttons Menu]
Responsive_Prosilver_Lite-1.0.0.zip
Плавающий prosilver, всего один файл и одна правка
(33.82 КБ) 280 скачиваний
Второй вариант - аналогичен, но дополнительно имеем плавающее меню навигации вместо стандартного navbar, которое также адаптируется под любой дисплей, превращаясь при этом в гармошку. Нажимая на иконки справа можно раскрыть блоки с ссылками. При получении нового ЛС, меняется иконка "Домик" на конвертик с ссылкой в ЛС.
Responsive_prosilver_and_menu_accordion-1.0.0.zip
Плавающий стиль вместе с плавающим меню навигации
(75.4 КБ) 301 скачивание
Установка всего в два клика! Полезный минимализм!..
screen.jpg
Последний раз редактировалось Anvar 23.03.2014 13:15, всего редактировалось 5 раз.
Не пишите вопросы лично, если можете задать их на форуме!
Спецзаказы не интересуют!

поиск моих эксклюзивных решений

Аватара пользователя
Di_Mok
Former team member
Сообщения: 814
Зарегистрирован: 13.03.2010 0:36
Откуда: Родной Гондурас ;)
Благодарил (а): 146 раз
Поблагодарили: 120 раз

Re: Для стилей на базе prosilver(плавающие меню и стиль)

Сообщение Di_Mok » 03.03.2014 23:29

Демку бы показал.

Аватара пользователя
Anvar
Former team member
Сообщения: 1962
Зарегистрирован: 26.03.2010 9:09
Благодарил (а): 67 раз
Поблагодарили: 784 раза

Re: Для стилей на базе prosilver(плавающие меню и стиль)

Сообщение Anvar » 04.03.2014 0:36

Демо, штатный просильвер: http://vzaimoposting.ru/?style=1 и на изменённом стиле http://stepnyak.kz/

Если на компьютере, то можно испытать свернув окно браузера в пол экрана к примеру. Тестировалось на нескольких браузерах, Опера, Хром, IE и Опера Мини на мобильном телефоне.
Задействованы штатные стили и иконки prosilver.

Аватара пользователя
x00peR
phpBB 2.0.3
Сообщения: 368
Зарегистрирован: 21.02.2011 19:27
Благодарил (а): 75 раз
Поблагодарили: 15 раз

Re: Для стилей на базе prosilver(плавающие меню и стиль)

Сообщение x00peR » 04.03.2014 0:52

Anvar, немного критики :)
1.Иконки имеют проблески белой окантовки;
2.Слишком большая высота;
3.Для меня непонятно почему иконки исчезаю при наведении, на мой взгляд должно быть что то другое.
4.При сворачивании окна браузера - меню выстраивается вертикально, при этом справа появляются какие то 3 полоски напротив каждого пункта меню.

Аватара пользователя
Anvar
Former team member
Сообщения: 1962
Зарегистрирован: 26.03.2010 9:09
Благодарил (а): 67 раз
Поблагодарили: 784 раза

Re: Для стилей на базе prosilver(плавающие меню и стиль)

Сообщение Anvar » 04.03.2014 1:07

1. Иконки штатные в стиле prosilver, эта критика не сюда (хотя можно изменить в коде forabg на navbar и эти дефекты скроются).
2. Высота легко меняется в responsive.css
padding: 10px 20px;

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

[class*="avatar-main-menu"] > li {
	float: left;
	font-size: 14px;
	padding: 10px 20px;
+
line-height: 30px;

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

[class*="avatar-main-menu"] li a {
	color: #fff;
	display: block;
	line-height: 30px;
3. Иконки в принципе можно убрать совсем. На стиле Joomla откуда я и вырезал меню, их не было.
4. Последний пункт, гармошка, тоже убирается в два счёта, из шаблона удаляем все <span class="pull"></span>. В перспективе, при нажатии на неё, меню должно раскрываться.
На вкус и цвет, последний легко меняется..

Спасибо за критику )))

Аватара пользователя
x00peR
phpBB 2.0.3
Сообщения: 368
Зарегистрирован: 21.02.2011 19:27
Благодарил (а): 75 раз
Поблагодарили: 15 раз

Re: Для стилей на базе prosilver(плавающие меню и стиль)

Сообщение x00peR » 04.03.2014 19:18

Anvar писал(а):В перспективе, при нажатии на неё, меню должно раскрываться
Да, вот это было бы здорово :)

Аватара пользователя
Anvar
Former team member
Сообщения: 1962
Зарегистрирован: 26.03.2010 9:09
Благодарил (а): 67 раз
Поблагодарили: 784 раза

Re: Для стилей на базе prosilver(плавающие меню и стиль)

Сообщение Anvar » 06.03.2014 16:38

Теперь меню на небольших экранах работает гармошкой. Как и планировалось, кликнув на белые три полоски справа. Архив обновил))

Аватара пользователя
boroda-max
phpBB 1.4.4
Сообщения: 110
Зарегистрирован: 17.03.2012 19:16
Откуда: CCCР. Ленинград
Благодарил (а): 105 раз
Поблагодарили: 10 раз

Re: Для стилей на базе prosilver(плавающие меню и стиль)

Сообщение boroda-max » 08.03.2014 7:56

Прекрасно выполненная Работа! Спасибо огромное!

Аватара пользователя
angst66
phpBB 2.0.20
Сообщения: 1292
Зарегистрирован: 11.01.2012 20:44
Благодарил (а): 75 раз
Поблагодарили: 116 раз

Re: Для стилей на базе prosilver(плавающие меню и стиль)

Сообщение angst66 » 11.03.2014 19:43

Пару вопросов. Не пойму, noConflict это для чего? Для тех у кого стоит mootools, или у кого стоит jQuery? Обязательно их вместе женить? Второй вопрос. Как данный мод адаптировать под такое меню? http://phpbb3hacks.com//modifications.p ... ttons-menu

Аватара пользователя
Anvar
Former team member
Сообщения: 1962
Зарегистрирован: 26.03.2010 9:09
Благодарил (а): 67 раз
Поблагодарили: 784 раза

Re: Для стилей на базе prosilver(плавающие меню и стиль)

Сообщение Anvar » 11.03.2014 20:18

Тут используется mootools и jquery, для раскрытия меню сжатых в гармошку на небольших дисплеях. Можно было обойтись без mootools, есть способ проще, но так было предусмотрено в стиле из которого вырезана эта часть.

sasa85
phpBB 1.4.4
Сообщения: 157
Зарегистрирован: 14.12.2010 11:10
Благодарил (а): 18 раз
Поблагодарили: 1 раз

Re: Адаптируемый стиль и меню

Сообщение sasa85 » 01.03.2016 23:05

Никто не допиливал этот мод до победного конца?

Аватара пользователя
ra02ra02
phpBB 1.4.2
Сообщения: 55
Зарегистрирован: 09.07.2016 14:17
Благодарил (а): 13 раз
Поблагодарили: 1 раз

Re: Адаптируемый стиль и меню

Сообщение ra02ra02 » 13.07.2016 22:19

Anvar, пожалуйста подробнее опишите подключение

Вернуться в «Стили для phpBB 3.0.x»