Обложки для журналов
от Yoksel

Дизайны для ЖЖ

Настраиваем вид комментариев

Мне нравится функционал новых комментариев, но не совсем устраивает как они выглядят. Берём в руки большой топор немного Css и делаем комменты такими, какими хотим их видеть : )



Я убрала градиент с плашек, уменьшила расстояния между блоками и уменьшила юзерпики комментаторов.
Теперь там где в обычном стиле видно только 4 комментария, у меня влезает 6!

Как это сделать?

Обратите внимание:

1. Способ работает только для браузеров, в которых можно подключать свои стили! Я покажу как настроить FireFox.
2. Красивые комменты будут видны только на том компе, где вы их настроили. Если вы захотите видеть их такими везде - повторите процедуру для всех компов, которыми пользуетесь.

Ещё раз напомню, это пошаговое описание только для Firefox. Если вы знаете как настроить стили в других браузерах - расскажите, общественность будет вам признательна. Я на 99% уверена, что это можно сделать во всех современных браузерах.

Приступим.
Для начала нам потребуется Stylish - это аддон для FF.

Как установить?

1. В меню браузера Инструменты → Дополнения.
2. Вверху справа в поиске введите Stylish, из найденых выберите аддон с такой иконкой: . Установите его.
3. После установки иконка должна появиться на нижней панели браузера. Если панели нет - проверьте что у вас включена панель дополнений (Вид → Панель инструментов → Панель дополнений)
4. Кликаем на иконку и создаём новый стиль:



Далее вставляем коды:



Разные варианты настроек:

Код к каждому из них вы найдёте ниже




1. Убираем градиент, меняем шрифт

.b-tree-twig{
margin-top: 0px !important;
margin-bottom: 0px !important;
}

.b-leaf{
margin-top: 0px !important;
margin-bottom: 10px !important;
}

.b-leaf-collapsed{
margin-bottom: 5px !important;
}

.b-leaf-shorttime{
padding-left: 10px;
}

/* --- фон плашки, можно менять
оригинальный цвет плашки - #C5DFF9 --- */
.b-leaf:not(.b-leaf-collapsed) .b-leaf-header{
background: #A7D9F2 !important;
}

/* --- кнопки на плашке, всплывающие при наведении --- */
.b-leaf-controls {
left: 450px;
position: absolute;
top: 7px !important;
}

.b-leaf-header .b-leaf-actions {
margin: 0px !important;
}

p.b-leaf-meta{
font-size: 12px !important;
margin-bottom: 0px !important;
}

/* --- размер и шрифт комментария --- */
.b-leaf-article{
font-size: 13px !important;
line-height: 1.3em !important;
font-family: Verdana;
}

.b-singlepost .b-leaf-actions-item A:link,
.b-singlepost .b-leaf-actions-item A:visited {
line-height: 1em;
}


2. Компактный режим

Устанавливается дополнительно к первому

/* --- уменьшаем юзерпик до 70px, значение можно менять --- */

.b-leaf-userpic,
.b-leaf-userpic-inner {
height: 70px !important;
width: 70px !important;
}

.b-leaf-userpic IMG {
max-height: 70px;
max-width: 70px;
}


3. Суперкомпактный режим

Также устанавливается дополнительно к первому

/* --- уменьшаем юзерпик до 50px, значение можно менять --- */

.b-leaf-userpic,
.b-leaf-userpic-inner {
height: 50px !important;
width: 50px !important;
}

.b-leaf-userpic IMG {
max-height: 50px;
max-width: 50px;
}

.b-leaf-username {
margin: 0 0 3px !important;
}

.b-leaf-details {
padding: 5px 0 0 12px !important;
}


Чтобы посмотреть что получается, жмите Предварительный просмотр. Если всё как надо - жмите Сохранить

После этого коды будут работать для всех страниц комментариев, отображающихся в стандартном стиле.

Я сейчас использую последний (суперкомпактный), так на страницу влезает гораздо больше комментариев.

Полезное дополнение: Шрифт поста

.b-singlepost-title,
.b-singlepost-body{
line-height: 1.3em;
}

/* --- Заголовок --- */
.b-singlepost-title{
font-style: italic !important;
font-family: Arial !important;
font-size: 18px !important;
}

/* --- Текст поста --- */
.b-singlepost-body{
font-family: Verdana !important;
font-size: 13px !important;
}


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

Upd: поправила код для отступов между комментами. Возьмите ещё раз код первой части из поста

Upd от читателей: настраиваем вид формы добавления комментов



Если вы хоть немного знакомы с Css, аналогичным образом вы сможете настроить отображение любого другого места сайта.
Можно скруглить уголки плашек комментов, добавить им фон, перекрасить все ссылки, убрать ненужные и так далее - всё что придёт вам в голову : )

Манипуляции с пользовательскими стилями простой и интересный способ настроить вид ЖЖ (да и любого другого сайта) по своему вкусу.

Пробуйте : )

Вступите в сообщество, чтобы увидеть все дизайны
Для Opera
Создаем файл (например) - livejournal.css, копируем в него код понравившегося вида сайта из поста и кладем этот файл в папку Styles каталога Opera. (Обычно C:\Program Files\Opera\styles).
Заходим в ЖЖ на главную или на свою страницу. Щелкаем на пустом месте страницы правой кнопкой, выбираем "Настройки для сайта...". Дажее во вкладке "Вид" узказываем путь к "Моей таблице стилей" (к тому самому файлу livejournal.css). [Не уверен, но может получиться, что такое придется сделать для всех поддоменов ЖЖ, т.е. для френдленты, главной, своей страницы и т.п.]
F5 и вуаля! ;)
у меня настроен свой стиль и «нововведения» к каментам меня не коснулись. Ну, никаких «вставить картинку к каменту» у меня нет.
так у всех,у кого дизайн жж свои?
Спасибо. До последнего не хотел ставить Stylish, но придётся, ибо не верится мне, что в СУПе услышат глас народа и хоть как-то доведут дизайн от Самого к приемлемому виду. Заголовки постов вообще мракъ. >;(
?

Log in

No account? Create an account