Локальный редизайн форума

[CSH]

Лично для себя, на досуге, иногда калякаю различный редизайн для тех сайтов, которыми пользуюсь.

Для бандитского форума тоже сделал оформление, минималистичное

.

Делал под темы IP.Board и Light.

На IBR выглядит не так хорошо.

Подумал, вдруг кто этим тоже заинтересуется? Потому делюсь)

 

Для редизайна я использовал расширение браузера Stylish, который можно установить почти во все популярные браузеры.

 

Итак, что в этом стиле:

- Убраны подписи

- Убраны медальки и много другой информации у автора сообщения

- Убрано много отступов

- Уменьшен размер некоторых элементов

 

 

 

Скриншоты:

 

 

http://a.icepic.ru/d820f42.png

 

 

 

Как видно, в один монитор стало влезать куда больше полезного текста сообщений, чем раньше.

 

 

Код оформления:

 

 

 

 

@-moz-document url-prefix("http://forum.bandits-clan.ru/") {
.avatar a img{
    max-height: 50px;
    max-width: 50px;
}

.basic_info div, .member_title, p.rep_highlight, .signature, .user_details .reputation, .group_title, .custom_fields, .post_count, .basic_info li:nth-last-child(1),
.basic_info li span.ft, .basic_info li span.fc{
    display: none;
}

.rep_bar{
    position: absolute;
    opacity: 0.1;
    animation: rating_animation_r 0.5s ease 1;
    -webkit-animation: rating_animation_r 0.5s ease 1;
}

.rep_bar:hover{
    opacity: 1;
    animation: rating_animation 1s ease infinite;
    -webkit-animation: rating_animation 1s ease infinite;
}

@keyframes rating_animation {
     from { opacity: 0.1; }   
     to { opacity: 1; }
}
@-webkit-keyframes rating_animation {
     from { opacity: 0.1; }   
     to { opacity: 1; }
}

@keyframes rating_animation_r {
     from { opacity: 1; }   
     to { opacity: 0.1; }
}
@-webkit-keyframes rating_animation_r {
     from { opacity: 1; }   
     to { opacity: 0.1; }
}

div.post.entry-content{
    min-height: 0 !important;
}

.post_wrap h3.row2{
    background: linear-gradient(to bottom, #D8DDE8, #fff, #fff);
}

.author_info{
    padding: 0 10px;
}
.post_body{
    padding-top: 0;
}

.group_icon img{
    width: 100px;
}

.posted_info.desc.lighter.ipsType_small, .post_body .posted_info{
    font-size: 10px;
}

span.author.vcard{
    width: 155px;
}

span.author.vcard a{
    text-align: center;
    width: 155px;
    display: inline-block;
}

}

 

 

 

 

Если буду допиливать - буду вкидывать обновления сюда.

Изменено 4 декабря, 2017 пользователем CSH
Новый код добавлен

[Kubik]

Сделал бы лучше нормальную мобильную версию, было бы круто. Ну и мое имхо, старое оформление лучше, чем "минималистичное".

[CSH]

Я не пользуюсь мобильными версиями сайтов.

И уж тем более бессмысленно меня просить сделать мобильную версию сайта, поскольку делать ее нужно на сервере, а не клиенте.

[ZiZ]

Мобильные версии сайтов сдохли 4 года назад, ща везде же адаптивная вёрстка, которая скалируется под ширину дисплея.

[antiz]

уменьшил аву в 2 раза, отключил подпись (у меня много лет как) - и вытянул награды в строчку (а без них как узнать сколько кому ку делать?) - и вот тебе 2е уменьшение места, без всяких бубнов!

[tweestr]

Я тоже любитель минималистичного дизайна, но то, что у СЫРа, это хрень, а не дизайн)

[CSH]

@tweestr, ты попробовал?)

И если не нравится - говори что именно)

 

Просто я сейчас пользуюсь им и мне он норм)

 

Прямо сейчас это выглядит вот так (на теме IP.Board):

 

 

http://a.icepic.ru/3d5c8e4.png

 

 

[tweestr]

tweestr, ты попробовал?)

Не, мне хватило скрины посмотреть)

 

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

 

Как минимум:

Избавится от вытянутых аватарок, только квадрат.

Убрать медали (вывод всех медалей под профилем, оставить только количество)

Скорректировать статус. лучше оставить только текст.

 

Например (дату регистрации тоже убрать):

 

http://a.icepic.ru/67d20eb.png

 

PS. Было бы не плохо, кстати, если бы нам такой (с корректировками и светлый, естественно) стиль завезли на форум.

Изменено 4 декабря, 2017 пользователем tweestr

[ZiZ]

@tweestr, бодренько выглядит, минималистично, компактно и при этом нужная инфа есть. Вот только dark темы обычно вырви-глаз эффект создают и максимально уродуют <img> в постах.

[CSH]

@tweestr, темные темы, как уже сказано было, собьют все цветовые настройки которые были ранее - и картинки, и оформление в постах.

...Хотя у меня есть мысль сделать и темную тему, куда более минималистичную чем моя текущая.

 

И не обязательно менять код сервера чтобы сделать что-то такое, достаточно воспользоваться Greasemonkey, и все будет как того желаешь.

Просто это - следующий этап... И если честно, я остановился на css, поскольку уже добился того, что лично мне было нужно.

 

В общем, дарк тему сделать могу, по идее)

[tweestr]

 

 

В общем, дарк тему сделать могу, по идее)

Не нужно, я тоже против тёмного оформления)

Хотя тот форум из примера, замечу, смотрится неплохо для дарк-стайл.

[CSH]

@tweestr, т.е. ты хочешь как у этого дарка, только без даты регистрации, для нашего форума и в светлом дизайне?)

[tweestr]

@CSH, конечно он должен быть подогнан под наш форум, не просто перенести.
Например, при текущем количестве сообщений, рейтинга и медалей, такое расположение счетчиков не подойдет:

http://a.icepic.ru/ae448c4.png

 

Хотя вру, отлично подойдет, если тысячные показатели сократить до %к, типа, 5.5к. Либо счётчик сообщений и рейтинга вместе и отдельная кликабельная ссылка на награды.

Плюс у нас есть второй статус, личный. Его, наверное, тоже можно оставить, но не обязательно.

Т.е.
 

Личный статус

*Аватар*

Статус буквами, без картинок

Счетчики

 

Опять же, это не проканает, потому как нельзя делать квадратные аватарки только для одного стиля. А я не уверен, что меня поддержит в этом большая часть форумчан. А я бы поддержал даже переход на прямоугольный аватар, с меньшей боковой стороной. Индивидуальненько и минималистично, чё как все)  

Изменено 4 декабря, 2017 пользователем tweestr

[CSH]

@tweestr, сейчас у меня стоит просто ограничение по ширине и высоте аватара, т.е. даже длинные авки будут одной высоты, а широкие - одной ширины.