Часовой пояс: UTC + 3 часа




Куратор(ы):   spmbt0   



Начать новую тему Новая тема / Ответить на тему Ответить  Сообщений: 14 
  Пред. тема | След. тема 
В случае проблем с отображением форума, отключите блокировщик рекламы
Автор Сообщение
 

Куратор темы
Статус: Не в сети
Регистрация: 05.03.2011
Дизайнеры сайта и форума всем вкусам удовлетворить не могут. Появляются периодические просьбы что-то улучшить или добавить, но до исполнения желаемого - долгий путь. Другое дело - пользовательские стили (user styles), которые могут работать во всех основных браузерах, включая IE8.

Достаточно установить пользовательский стиль (для Firefox и Chrome используется расширение Stylish) или скрипт (для Firefox - с помощью плагинов GreaseMonkey, Scriptish, Safari - NinjaKit, Для Хрома - плагинов не нужно (но нужно скачать скрипт как файл, а затем - установить как распакованное расширение в окне chrome://extensions/ , иначе не установится, хотя есть способы - нововведение Хрома с 35-й версии), для Оперы тоже не нужно, есть встроенный механизм) и вид сайта или форума преобразится. Даже если что-то не понравится, можно изменить самому или попросить разработчика добавить улучшение.

Файл манифеста для установки в Хром:
скачать из http://spmbt.github.io/haPages/userscri ... ifest.json

Скрипты и стили совместимы с аналогичными скриптами от CoolCmd. В тех и других - свои достоинства, и пересекаются их функции незначительно (только на самом важном)..

Стиль для просмотра форума и сайта Over-Compact 2014 - кроссбраузерный (включая IE), основная цель которого - устранить ошибки вёрстки и дизайна сайта и форума, приводящие к неудобствам пользования и чтения. Подробности и скриншоты (было-стало, чтобы оценить разницу ДО установки) - на страницах установки стилей и скриптов. Страницы сообщений несколько преобразились, а служебные соообщения стали лучше узнаваемы.

Скрипт для форума и сайта OverCompact - повторяет всё, что делают стили, плюс некоторые действия (10%), которые стили сделать не могут. Самое полезное из таких действий - наверное, невыкидывание на главную страницу при логине-логауте.

Установить (со страницы установки) пользовательский стиль Over-compact 2013.
Установить пользовательский скрипт OverCompact (на страницах имеются описания расширений).
(обновлены 7 ноября 2014).

Авторизации и аккаунта скрипт и стиль не требуют.


Последний раз редактировалось spmbt0 07.11.2014 5:04, всего редактировалось 4 раз(а).
обновление юзер-стилей



Партнер
 

Куратор темы
Статус: Не в сети
Регистрация: 05.03.2011
Из истории компактных стилей форума на оверклокерах.ру.

Стиль форума оверклокеров (движок PHPBB), который мы наблюдаем, унаследован от довольно давних времён и имеет интересную историю. Только старожилы могут сказать, как давно он появился, но упоминания в форуме говорят о том, что существовал он очень давно и его существование тесно ассоциируется с сайтом оверклокеров. Когда происходили события со сменой дизайна форума, в связи с переходом на новую версию 3.0Х форумного движка, обнаружилось, что этот "старый дизайн" имеет очень много "плюсов" по сравнению с предложенными двумя новыми. В отдельной ветке конференции было много негодований и "стонов" о неудобствах и некроссбраузерности новых дизайнов, были очень многочисленные просьбы вернуть старый дизайн. Но дело было не таким простым, потому что "скины" конференций версий 2 и 3 технически различаются, поэтому администрации понадобилось переделать старые "скины" на новую версию, чтобы пользователи наконец-то смогли увидеть форум в старом виде. Что забавно, успела сформироваться прослойка пользователей, привыкших к новому виду, и начала звучать некоторая критика возврата к "устаревшему" дизайну.

В теме об улучшении "старого" дизайна хотелось бы показать, каковы достоинства этого ("старого") дизайна и что, всё-таки, нашлось для улучшений. У него есть ряд определённых пользовательских достоинств, которые кратко можно описать как довольно компактный вид сообщений. Поскольку сообщений в форуме много, читать трудно, компактность и мелкие удобства по сбалансированности цветов ценятся.

Не будем сейчас останавливаться на достоинствах имеющегося, а опишем, какие же среди достоинств нашлись недостатки и что сделано, чтобы их влияние уменьшить. Заодно, в сравнении увидим и достоинства.

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

Стиль отдельного сообщения в теме (топике)

Как упоминалось, классический оверклокерский стиль форума отличается достаточной компактностью по сравнению с известными свободно распространяемыми стилями (поставляются к форумам в формате "скинов" и подключаютсмя к форумному движку на сервере). Это непосредственно видно в стилях сообщений, которые составляют примерно 90% просматриваемой типичным пользователем информации. Рассмотрим их с иллюстрациями в сравнении с тем, что сделано в стилях OverCompact.

#77

1) В ОверКомпакте на цитаты отводится минимально необходимое пространство. Они заметны, но не выпирают, как в исходном дизайне (рисунки под цифрой "1");
2) Аватары уменьшены до размера 1 строки текста. Они не мешают, но по наведению мыши на левую колонку они видны в полном размере (рисунок "2);
3) Служебные сообщения, такие как к цитатам, подписи и "Добавлено спустя..." - все имеют отступы и курсив. Легко отличаются от основного текста (рисунки "1, 2, 3").
4) смайлики спрессованы до ширины 4 пикселя и высоты в 1 строку. Они почти не мешают чтению; при любопытстве на них можно навести мышь и увидеть в полном разммере (рисунки "4").
5) левая колонка избавилась от многобуквия. Эффект очевиден (наблюдается только со скриптом);
6) "Цитировать" тоже убрано вправо, что ещё больше облегчает левую колонку и тоже возможно со скриптом.
7) Расцветка сообщений лесенкой заменена на одноцветные, но с более тёмными заголовками. Все содержательные тексты - на одном фоне. Сняты границы! Теперь форум - не настолько выглядит решёткой, как раньше. Подобраны ставшие ненужными отступы у тестов.
8) пустые пробельные строки - обратите внимание - их нет (рисунки "1").

Рассмотрели только ячейку сообщения. Видно, что улучшать было что, и подобное сделано в ряде других мест и страниц.


 

Куратор темы
Статус: Не в сети
Регистрация: 05.03.2011
Список тем подфорума.
Не спеша, вразвалочку, расскажем про организацию компактных списков тем (подраздела) конференции в стилизаторе OverCompact 2011. Всё уже давно работает, остаются популяризаторские иллюстрации на очереди.

Общее достижение здесь можно выразить такими словами: страница списка тем теперь видна на одном экране монитора (если его высота - не менее 1200 пикс). Конечно, хорошо, что на сайте число тем на страницу взято предельно много (60), но в обычном стиле страница растягивалась на 2 экрана. Сейчас, если ничего не усугублено подфорумами, они помещаются в большой экран.

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

Чтобы не тратить место на заголовки, из них убраны вертикальные пустоты и отступы. Заголовок стал занимать 150 пикселей высоты (при стандартном размере шрифтов, в Firefox). Это не предел, но разумный компромисс между полной переделкой чужого форума и изменениями в сторону практичности. Не меняем радикально расположение блоков, только уплотняем их. Взамен, не требуется полностью перелопачивать скриптами структуру страницы, обходимся правкой стилей. Ради работы со стилями, не переносим даже ненужные поля типа часового пояса и времени на другие места.

На сравнительных скриншотах видно, как обычный стиль щедро разбрасывает пустоты, и в одно и то же окно помещается значительно меньше полезной информации, примерно половина (при том же размере шрифта).

. . . .#77
Скриншоты сделаны в Firefox 3.6. В остальных браузерах (без IE) - примерно такая же картина.

Если собрать все пользовательские доработки вместе, запустить стили OverCompact, скрипты OverCompact и альтернативные скрипты (CoolCmd) одновременно, это не вызовет конфликтов (для этого сделана работа). Таким образом, мы получаем доработки от тех и других скриптов (например, изменённые картинки последнего непрочитанного сообщения в теме и уменьшение их до высоты строчки).

. . . .#77

К сожалению, только Оперные вариаторы стилей (авторы, которые написали юзерстили только под Оперу) не могут участвовать в общей работе для других браузеров - у них стили не кроссбраузерные (впрочем, в большинстве своём будут работать в других браузерах, если настроить, но уровень перекраски незначительный в данных стилях, о компактности речи нет).


 

Куратор темы
Статус: Не в сети
Регистрация: 05.03.2011
Наконец, заглянем на страницу третьей существенной компоненты стилей OverCompact - преобразования стилей сайта. Откроем сайт как обычно, и затем сравним с результатом после включения OverCompact. Разница, как и полагается - разительная. В подаче материалов в стиле OverCompact - ничего лишнего. Взгляд падает только на существенные элементы страницы.

#77 #77 #77

Сжатие окна по горизонтали ограничивается только размерами больших рисунков на странице и верхней шапкой (элементы пришлось подсократить). Мы можем нормально смотреть сайт от ширины 640 пикселей; ширину ограничивают только верхние табы. Наверное, об этом не могли мечтать даже создатели этих страниц. Но в эпоху смартфонов, умеющих смотреть через полноценные браузеры (Firefox Mobile, Opera Mobile) свойство сужения окна будет полезно. Последний пример в ряду скриншотов показывает, как выглядит страница новости при ширине, задуманной для однострочной синей шапки (получилось 1070px, не влезет в нетбуки).

#77 #77 #77

Если ширину окна увеличивать ещё, то, как и для конференции, появится предельная шиирина страницы (1200), а страница будет центрирована. Таким образом, страницы адаптированы и под широкие экраны.

Интересно, что встроенные обсуждения новостей упрощённой вёрстки тоже нормально подхватываются стилями и скриптами Overcompact - показываются цитаты, отступы служебных сообщений и экономия высот примерно так же, как и на обычных страницах конференции.

Очевидно, в таком обработанном виде читать статьи и новости приятнее, чем в необработанном. Раньше для этого требовалась долгая вёрстка и санкция руководства, теперь - желание установить юзерскрипт. Кстати, со скриптом от CoolCmd стили и скрипты OverCompact продолжают быть совместимыми.

Из группы достоинств осталось рассмотреть суперфичи, основная из которых - невыкидывание на главную при авторизации. (Что само по себе забавно - не было бы этого недостатка сайта, не было бы и достоинства скрипта (костыля).)


 

Куратор темы
Статус: Не в сети
Регистрация: 05.03.2011
За 4 месяца без присмотра здесь понаставили распорок на более 1000 пикс. по горизонтали, пришлось почистить стилями, потому что без них (распорок) сайт сохраняет великолепные гибкостные свойства - минимальная ширина на главной со стилями 550, в статьях - 570 или около.
Скрипт тоже немного поправлен для непоявления ошибок (с сайта убрали поиск в том же разделе). Принимайте обновлённые скрипты и стили.


 

Куратор темы
Статус: Не в сети
Регистрация: 05.03.2011
Дополнение: обновить на сайте юзерстилей не удалось из-за проблем с гугловской авторизацией, поэтому стиль размещён ПО НОВОМУ АДРЕСУ.

Установить пользовательский стиль Over-compact 2012.
(Скрипт остался по тому же адресу - скрипт OverCompact, который записан в первом сообщении.)
-----
Стили восстановлены на прежнем аккаунте (25.01.2012).


 

Куратор темы
Статус: Не в сети
Регистрация: 05.03.2011
Исправлена ещё пара распорок, появившаяся за прошедшее время на основном сайте (не на форуме), которые делали сайт шириной от 980 пикс., и обновлены стили OverCompact до версии 1.11.

Не сделана коррекция очень больших изображений в статьях на основном сайте. Если их нет, сайт можно смотреть в окне шириной от 670 пикселей со стилями OverCompact. Но с ними, которые имеют размет обычно 730-750 px, ширина сайта укладывается в не менее 900. Исправить можно только скриптами (из-за атрибутов IMG width="..."). Наверное, это не очень принципиально, поэтому скриптами большие изображенния не правятся. Если кому-то будет нужно (для нетбуков, смартфонов), пишите просьбу, допишу скрипт так, чтобы изображения масштабировались для узких окон.

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


Последний раз редактировалось spmbt0 10.02.2012 23:30, всего редактировалось 1 раз.
дополнение


 

Куратор темы
Статус: Не в сети
Регистрация: 05.03.2011
Сделано дежурное обновление стилей и скриптов (до версии 1.21) сайта и конференции. Изменений за последние месяцы было немного, кое-где вылезали нестыковки и баннеры, простыни ссылок; всё замеченное поправлено, а на боковые колонки в статьях наведён улучшенный стиль (неброские метки UL-LI-пунктов и уменьшенные отступы). Конфликтов со скриптом CoolCmd не наблюдалось. Проверено в Firefox, Опере и Хроме последних версий.

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


 

Member
Статус: Не в сети
Регистрация: 09.03.2012
Как хорошо , что я натолкнулся на эту тему! Давно искал нечто подобное . Приглянулась Over-Compact 2011 .Спасибо!


 

Куратор темы
Статус: Не в сети
Регистрация: 05.03.2011
Добавлена пара стилей. Оказывается, на названиях новостей (основной сайт) стояло несворачивание заголовков. И если заголовок длинный, то весь сайт распирало от его ширины.

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

Добавлено спустя 37 минут 17 секунд:
Иллюстрации: как выглядит форум (список тем этого подфорума) и главная в Опере (12.10) сейчас (70 КБ):
#77


 

Куратор темы
Статус: Не в сети
Регистрация: 05.03.2011
Обновлены стили:
* убран оранжевый баннер, напоминающий о правилах конфернции - выпадает из стиля и не может быть показан только на странице подготовки нового сообщения;
* мелкие доработки нижних баннеров-кнопок (яндекс-метрика), скачивания мобильной версии в шапке;
* убрана распорка, которая делала сайт более 1000px в ширину - ещё в июле она была. Оказалось - это блоки для публикации на Фейсбуке и ВК. Теперь вся макс. ширина страницы определяется ширинами картинок на ней (в атрибутах).


 

Moderator
Статус: Не в сети
Регистрация: 03.05.2005
Откуда: Московская обл.
Фото: 546
spmbt0 писал(а):
убран оранжевый баннер, напоминающий о правилах конфернции - выпадает из стиля

А вот это - верните назад.

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

_________________
Статьи overclockers.ru/tag/show/4417 и club.dns-shop.ru/authors/c7bdeb28312efbed-i-n/
Не пишите мне в ЛС "помоги выбрать SSD" и т.д.


 

Куратор темы
Статус: Не в сети
Регистрация: 05.03.2011
Цитата:
верните назад

Вы пропустили слово "пожалуйста".
Иначе это не звучит как просьба. Собственно, он только в "Барахолке", оказывается.
Предлагаю такой вариант
Вложение:
Комментарий к файлу: Баннер для Барахолки
overCompactBannerRules.png
overCompactBannerRules.png [ 18.14 КБ | Просмотров: 2620 ]

Здесь палитра тоже намеренно выпадает, не заметить невозможно, но остаётся со вкусом.

Буду не против, если вы тоже разместите код этого баннера у себя на форуме.
Код:
.forumrules{
   width: 90%;
   margin: 0 auto;
   text-align: center;
   box-shadow: 4px 2px 4px #c59792;
   border-radius: 8px;
   background-image:linear-gradient(#c1c5e9 20%, #9789cb 90%)}
.forumrules span{font-size: 110%!important}
.forumrules h3{color: #e33}.forumrules a,.forumrules a:link{color: #a32414!important}
.forumrules h3 +br{display: none}

Ещё правильнее было бы показывать баннер внизу, над полем ввода. А то и вообще после начала набора текста. Так делают во всём мире, когда хотят предостеречь от неправильного ввода. Сейчас - мало того, что его видят все, кто писать не хочет - пишущий в ответ может не видеть его, т.к. он будет за пределами окна, на верху страницы.


 

Moderator
Статус: Не в сети
Регистрация: 03.05.2005
Откуда: Московская обл.
Фото: 546
spmbt0 писал(а):
Вы пропустили слово "пожалуйста".
Иначе это не звучит как просьба.

А это не просьба: я не рядовой участник Конференции, я - сотрудник сайта.
Решение о включении данного функционала было принято администрацией и подобное "улучшение" надо сначала согласовывать. А то его только что включили (несколько дней как) чтобы специально привлечь внимание, а Вы его тут же отключаете стилем. Причём подавляющее большинство пользователей, установивших этот стиль, просто даже не узнает, что что-то там скрылось. А потом будут недопонимания и недовольства на модераторов, что они выдают ЖК и КК за "несуществующее" - это лишние конфликтные ситуации.

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

_________________
Статьи overclockers.ru/tag/show/4417 и club.dns-shop.ru/authors/c7bdeb28312efbed-i-n/
Не пишите мне в ЛС "помоги выбрать SSD" и т.д.


Показать сообщения за:  Поле сортировки  
Начать новую тему Новая тема / Ответить на тему Ответить  Сообщений: 14 
-

Часовой пояс: UTC + 3 часа


Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 14


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

Перейти:  
Создано на основе phpBB® Forum Software © phpBB Group
Русская поддержка phpBB | Kolobok smiles © Aiwan