Вчера я написал про то, как поднять и закрепить кнопки редактора - настройка редактора
Сегодня идем дальше, в пару кликов делаем превью постов больше.
Фото постов иногда содержат мелкие детали, которые хотелось бы рассмотреть не заходя в пост. Фото в ленте не сложно увеличить.
Суть в том, что бы применить пользовательский CSS стиль, это можно сделать множеством способов, самый удобный для рядовго юзера - поставить плагин stylish
Установка для: Chrome | firefox | opera
Устанавливаем плагин, создаем новый стиль, добавляем CSS
img.PostSummary__image {
width: 100%;
max-width: 400px;
height: auto;
margin-right: 10px;
margin-bottom: 30px;
}
Важно применить к "URL в домене" - "golos.io"
В коде можете изменить значения.
Например указать максимальную ширину в пикселях или процентах в значении:
max-width: 400px;
А в значениях
margin-right: 10px; margin-bottom: 30px;
Вы можете регулировать отступ текста от картинки и отступ снизу от картинки.
Такой же метод применим ко всем элементам дизайна голоса. Да и любого другого сайта. Вы можете менять практически все, фон, шрифты, цвета и размер элементов и т.д. Можно сделать хаки и поинтересней, например прописать в :after значение title и добавить в ленте отображение количества голосов за пост. И т.д.
Если у вас есть пожелания к оформлению голоса - опишите, что именно нужно. CSS очень простая штука :)
А вот и пожелания:
Было бы круто если бы просто наведя мышку на картинку она бы увеличивалась на 400% или 900%.
Решение:
Картинка увеличивается только при наведении :)
Просто замените код стиля приведенный выше на этот:
img.PostSummary__image:hover { width: 100%; max-width: 600px; height: auto; margin-right: 10px; margin-bottom: 30px; transition: .2s all ease; z-index: 9999; position: absolute; }
P.S. Если кого-то из дизайнеров голоса раздражает такое - ни в коем разе не хочу обидеть front-end разработчиков :)
видимо, таки придется учить еще джаву
ПОЖАЛУЙСТА!!! Выравняйте ленты статей ПО ЦЕНТРУ СТРАНИЦЫ! Очень неудобно влево все время коситься.
Чуть-чуть подробней опишите) А лучше скриншот покажите проблемы
Чуть позже все таки добавлю пост с JS кодом, там возможности будут практически неограниченные. Но сначала поищу инфу про отношение голоса к такому, так как в теории, если кто-то вам навяжет свой js - он может получить некоторый контроль над вами.
Что-то я не вижу как тут скриншот вставить. В общем, у вас лента представляет собой слева список заголовков, а справа - тэги. При прокрутке тэги пропадают. Да и даже с ними все-равно построение страницы неудобно для чтения. Предлагаю или убрать колоку "тэги" или создать колонку слева что-бы заголовки шли по центру страницы.
Было бы круто если бы просто наведя мышку на картинку она бы увеличивалась на 400% или 900%.
То есть в два или в три раза.
Просто из-за такой кастомизации объем сообщений из взора пропадает. И лента кажется еще более бесконечной, хотя конечно тоже хорошо!
Можно сделать так, что бы картинка увеличивалась только при наведении :)
Просто замените код стиля приведенный выше на этот:
img.PostSummary__image:hover {
width: 100%;
max-width: 600px;
height: auto;
margin-right: 10px;
margin-bottom: 30px;
transition: .2s all ease;
z-index: 9999;
position: absolute;
}
Мне кажется, что это было бы интересно многим. Было бы круто сделать свод таких фишек, и провести пост с опросом о их целесообразности, а по результатам внедрить их в проект.
Наоборот, это здорово - кастомизация на клиенте в этом случае, где основной код следует за стимом, - это может быть очень удобно. Жалко, что нельзя таким образом (чисто стилями) сделать ленту, где идут не заголовки постов, а прямо контент - с автоподгрузкой следующих постов, и со схлопыванием излишне длинных до пары абзацев. Чтобы был такой жж-стиль чтения, но посовременнее. Или можно?
Можно js + ajax запросы. Но js в отличии от css полноценный язык, с его помощью можно делать нехорошие вещи :) Потому вставлять js, даже на клиенте, не рекомендуется.
Но скоро для голоса появится много сервисов, в т.ч. моб приложения. В них будет все так, как привыкли видеть обыватели
Полезная инфа. Подпишусь, пожалуй.
а чего ты сам в репозиторий не напросишься и напрямую в годе селекторов не сделаешь для такого дела???
В этом случае стиль будет применен у всех пользователей. А я знаю, как юзеры не любят перемены в дизайне) начинается паника и массовая истерия а-ля "верните стенку" :)
А так - кто захотел - применил. :)
Хотя, было бы удобней сделать у каждого в акке блок custom css
В ЖЖ каждый редизайн провоцирует драки)))
проблема решается наличием переключалки)