Опубликовано: 10 мая 2015 г., 04:49 Обновлено: 10 января 2016 г., 00:40
2K
Неофициальный скин для дизайна 2014
Дизайн обновлен 09.01.2016
Как говорится, это любительский (не дизайнерский, хех) вариант дизайна 2014. Ранее этот скин был для 2015b4 (и огрызки от него остались), но после последних, внушающих трепет дизайнерских решений в 2015-м дизайне, ну нафиг.
Для основных браузеров (Mozilla, Chrome, Opera, а может, и для других) есть возможность привести сайт к такому виду (кликабельно):
Ахтунг! Скин корректно работает на дизайне сайта 2014! Думаю, 2010-й тоже в деле. 2015 - нет.
Как это работает.
С помощью дополнительного плагина к браузеру можно поверх существующих таблиц стилей записать свои, частично или полностью меняя внешний вид элементов. Функционал добавить нельзя, а внешний вид изменить - можно. Так что этот _неофициальный_ скин - дополнительная таблица стилей, с помощью которой мы "просим" браузер нарисовать какой-нибудь блок сайта другим цветом.
Что меняется в этом скине.
- фон пустого пространства заменен на звездное небо из раздела "Фантастика";
- фон контента немного приглушен (раньше был просто белый цвет);
- фон сайдбаров (боковых полос) затемнен, они теперь отделяются от основного контента;
- разные мелкие передвижки блоков.
Что не меняется.
- логотипы, копирайты - все на месте, даже внешний вид не менялся;
- реклама не тронута, в том числе рекламные фоны на главной странице;
- функционал не менялся;
Так что претензий со стороны администрации быть вроде не должно?
Как это сделать.
Я использовал плагин Stylish. Мало того, что он довольно удобен, так еще и установка стилей производится через интерфейс с их сайта двумя кликами мышкой - не нужно заморачиваться с файлами. Установка предельно проста:
1. Ставите дополнение браузера Stylish:
Mozilla: http://addons.mozilla.org/ru/firefox/addon/stylish/
Chrome: http://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=ru
Opera (даже 12.17!): http://addons.opera.com/ru/extensions/details/stylish/
2. Перезапускаете браузер.
3. Загружаете этот "скин" (достаточно нажать кнопку Install with Stylish):
Все браузеры: https://userstyles.org/styles/113552/livelib-ru-2014-restyle
Лишний раз напомню, что корректно работать данный скин будет с 2014-м дизайном. В 2010-м есть небольшие косяки.
Дополнительно.
Если у вас какой-то экзотический браузер, для которого нет плагина Stylish, или вы желаете использовать другой альтернативный плагин для подмены таблиц стилей, или вы желаете сделать это как-то особенно (как?), или же вы просто хотите сделать свой подобный скин, то по ссылке из пункта 3 выше можно получить исходный код внесенных мной изменений в таблицы стилей, нажав на "Show CSS" - вам дадут чистый CSS со всеми внесенными мной изменениями.
Так что если кто заинтересуется - пробуйте. Если возникнут вопросы, если будут замечены косяки, какие-нибудь предложения - пишите. Косяки наверняка будут, т.к. не все можно исправить таким вот вмешательством "сверху", да и просто я мог просмотреть что-нибудь - сайт ведь не маленький.
Комментарии 43
Показать все
Скажите, а фоны поменять там можно, или это не предусмотрено? Расположение всего мне в принципе, нравится, да и цвета в целом намного удачнее (от оригинального глаза резало конкретно), но вот серый цвет в рецензиях и главный фон (космический, самый нижний) хотелось бы иметь возможность поменять.
Спасибо в любом случае - когда истечёт срок действия старых скинов, перейду на ваш однозначно.
Doe_Jane, Фоны и цвет элементов менять легко. Для этого нужно сначала открыть таблицу стилей.
Дла Firefox. Нажимаете на кнопку Stylish на панели инструментов, потом на "Управление стилями", напротив стиля "LiveLib.ru 2015b4 restyle" нажимаете "правка" - и получаете исходный код всех изменений. Для фона просто поменяйте ссылку на изображение в строке 24. Цвет фона рецензий задается на 518-й строке.
Для Chrome. Нажимаете на кнопку Stylish на панели инструментов, потом на "изменить" напротив "LiveLib.ru 2015b4 restyle" - опять же откроется таблица стилей. И тут та же строка со ссылкой на фон уже будет под номером 14 (Chrome зачем-то бьет файл стиля на две части), а цвет фона рецензий задается на 508-й строке.
Фоны заливать можно прямо в свой профиль в "Мои картинки".
Fallcom, У меня две загадки:
1. У меня в браузере фон рецензий не серый, а голубой, как в оригинале. Оно лучше, так что в целом вопрос отпал.
2. Фоновая картинка не ставится, пишет, что ошибка. Попробовала две ссылки с разных мест - отображается всё равно ваша. Видимо, там еще где-то она "застряла".
Doe_Jane, Это я проглядел и не полностью все расписал. Если указать картинку только на 24-й строке, то фон применится на главной странице и, возможно, еще где-то. А чтобы фон изменить на остальных страницах, то нужно указать ссылку еще и на строке 692. Вставьте ссылку в два этих места.
То, что пишет ошибку - странно. Возможно, вы где-то ошиблись. Полностью строка должна выглядеть так:
background: #202020 url(http://u.livelib.ru/reader/Doe_Jane/o/87d10234/vetton_ru_buster43412560x1600-o.jpeg) center top repeat-y;
Если вставите две одинаковых ссылки - получите одинаковые фоны. А если вставите разные ссылки, то, соответственно, для определенных страниц будет другой фон (на строках 681-689 указаны разделы, где будет фон применен). При желании можно на каждый раздел сделать разный фон (могу рассказать, как сделать и это).
Fallcom, О, спасибо большое!
Перебрала кучу разных фонов, поняла, что, во-первых, у вас очень удачная картинка на фоне, а во-вторых, что здесь нужны именно бесшовные фоны, иначе некрасиво (было бы ок, если бы можно было сделать скролл, а не повтор).
Для тех, кто сюда ещё заглянет (и для вас тоже, с поклоном) делюсь тремя ссылками, которые лично для меня оказались наиболее полезными:
1) фоны:
http://fonerus.ru/ (сверху - главная категория, справа - подразделы. Можно и по цвету сразу, но туда не все подходящие входят). На любой вкус и цвет.
http://weblabfon.com/load/dark_blue/11-2
2) Ссылка на уроки "ЖЖ диз за 10 дней" - коды очень совпадают, поэтому, если нужно понять, что как и зачем вставляется-пишется - удобнее не найти.
Doe_Jane, Сделайте вот так:
background: #202020 url(http://u.livelib.ru/reader/Doe_Jane/o/87d10234/vetton_ru_buster43412560x1600-o.jpeg) center top repeat-y fixed !important;
...т.е. добавьте свойство "fixed" - и у вас будет постоянный несдвигаемый фон на всю страницу. Я проверил, на ваших картинках, предложенных выше, работает отлично. Думаю, это то, что вам нужно. :)
За ссылку с фонами спасибо, надо будет покопаться, может, будет что-нибудь в качестве альтернативы этому космосу (кстати, он ведь здешний, из раздела "фантастика"). А по второй ссылке я тоже когда-то себе дизайн ЖЖ менял. :)
Fallcom, Серые фоны-таки нашла (извините, что так много комментов, редактировать просто уже не могу - время вышло) - они не в ленте, а в профиле книги, оказывается.
Строчки нашла, только там надо еще цвет нижней части тоже поменять (517,523).
Скажите, а где взять номер цвета для рецензий в ленте?
Doe_Jane, Лента сделана еще в старом дизайне, поэтому ее изменения почти не коснулись. Так что да, там как был голубой фон, так и остался.
Чтобы поменять серый цвет рецензии на тот, который в ленте (я вас правильно понял?), нужно заменить цвет фона в строках 518 и 524 с #C0C0C0 на #D0E0F0.
P.S. Количество комментов меня ничуть не смущает - пишите, если надо. :)
Doe_Jane, P.P.S. И еще. Сохраняйте весь свой файл после внесенных изменений, т.к. если я что-нибудь изменю в стиле (дизайнеры поправили кое-что, в результате местами у меня повылазили белые фоны), браузер может (или не может?) автоматически подтянуть изменения и затереть ваши правки. На всякий случай, в общем.
Потрясающая вещь) единственное, соглашусь с комментарием выше, что серый цвет в рецензиях не особо огонь, но все ж лучше, чем в оригинале) спасибо))
anastasia_dv, Ну вот в комментарии выше я как раз и ответил, как можно поменять цвет в рецензиях. Собственно, настроить можно все, я прокомментировал все свои изменения и разбил их на разделы для удобства.
Наверняка видели. Но 15 человек, установивших данное изменение, вряд ли кому-то покажутся весомым аргументом. :) Впрочем, когда уберут старые стили (а их уберут, я в этом теперь уверен), тогда будет больше движений. Но к тому времени наверняка местные дизайнеры выпустят какой-нибудь официальный скин.
Обновил тему до версии 0.2.1. Изменения:
- учтено добавление панели соцсетей (ломавшее местами внешний вид низа страницы);
- внешний вид "лучшей цитаты", оформленной сейчас в виде некой книжки, теперь отображается корректно при ширине контента в 1200;
- привычную стрелку "наверх страницы", расположенную снизу, зачем-то переделали в дурацкий (без обид) палец - я вернул назад стрелку (признаться, до сегодняшнего дня я был уверен, что стиль с "пальцами" умер еще в 2000-х вместе с домашними страничками всяких там Василиев Пупкиных);
- убрал "граблю" с "пальцем вверх" на панели соцсетей (сплошные распальцовки какие-то);
- прочие мелкие правки мелких неудобств и косяков.
Для обновления нужно просто перейти по ссылке на всё ту же страницу темы на официальном сайте плагина Stylish и нажать "Update with Stylish": http://userstyles.org/styles/113552/livelib-ru-2015b4-restyle
P.S. Номера строк, обсуждаемые в комментариях выше, естественно "поплывут", но в общем-то все то же самое.
Venena, Если браузер просто закрыть/открыть, такого не происходит? Только после перезагрузки? У вас с диском случайно проблем нет? При загрузке проверки какие-нибудь не выполняются?
Если есть желание покопаться, то можно проверить, что происходит с файлами на диске после перезагрузки. Для хрома это расширение устанавливается в каталог вроде такого:
c:/Users/User/AppData/Local/Google/Chrome/User Data/Default/Extensions/fjnbnpbmkenffdnngjfgmeleoegfcffe/1.3.1_0/
где "User" - имя вашего пользователя на компьютере, а "fjnbnpbmkenffdnngjfgmeleoegfcffe" - некий хэш-код, который у вас будет другим. Но там не так много каталогов внутри Extensions, нужный каталог можно будет легко найти по вложенному каталогу "1.3.1_0". Так что ставите расширение, находите нужный каталог, смотрите, какие файлы там есть. Перезагружаетесь, видите проблему - смотрите в тот же каталог и проверяете, есть ли там те же файлы. А там дальше видно будет.
Спасибо, у меня на Firefox работает.) Мне кажется, что значки уведомлений, сообщений и прочитанных книг слишком темные, но может это от того, что долго за новым дизайном сидела и привыкла к этому контрасту уже.
yukari, И за подробные комментарии в коде плагина отдельное спасибо.) Я в этом не разбираюсь, но понять, куда тыкать, чтобы поменять конкретный цвет, будет вполне реально.
yukari, Не за что. Я и сам без них бы рехнулся (интересно, как здешний дизайнер в этом разбирается?)
yukari, Они даже чуть ярче, чем шрифты в шапке, но засчет того, что верх шапки светлее, они смотрятся менее контрастно. Там большой контраст и не нужен (кроме случая, если будут новые сообщения, но тогда там появится яркая цифра) - меньше отвлекать будет. Плюс делалось в тон логотипа. В общем, как-то так.