Новый Хабр по-новому

    Вот посидел я с утра в новом Хабре и понял, что я скорее подправлю немножко user-стили, чем привыкну к новой шапке.

    Было:
    image

    Стало:
    image

    Меня лично задело перемещение личных линков на левую сторону. Мы же привыкли тянуться курсором в правый угол. Как так можно?

    Новый Хабр по-новому:
    – очень компактная шапка
    – логотип в уголку
    – личные пункты вернул на правую сторону
    – мелкие шрифты на сайдбаре
    – линк «ответить» сделан менее броским
    – цвет линков посещённых топиков немного темнее
    – кнопки голосования за устаревшие комментарии сделаны еле видимыми, чтобы лучше воспринимались новые бледный активные кнопки голосования
    – уменьшены отступы и поля для более полного заполнения контентом
    – убрал футер
    и много мелких изменений, которые каждый может подправить себе по вкусу



    Данный стиль для Firefox+Stylish находится здесь. Там же можно взять User script для Greasemonkey или Opera. Инструкция для Хрома ниже в комментариях.
    До этого я пользовался стилем Habrahabr — Prettifier от almalexa, за что ему огромное спасибо.

    UPD 29.07.09
    Banners friendly версияInversion compact skin (banners ok)
    Отличия:
    – дружит с баннерами
    – присутствует футер
    – оставлена оригинальная кнопка ответа на комментарии
    Before | After


    Любой элемент, который вам в стиле не понравится, вы можете подправить сами. Для этого нужно лишь знание CSS.

    Пожелания/замечания/критика в комментариях приветствуются :)


    UPD 27.08.09
    Ре-редизайн Хабра продолжается (user style «Inversion compact skin v1.1»)

    UPD 27.10.09
    Обновление по случаю внедрения точек в комментариях — Patch v1.2 for Inversion compact skin

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 86

      –16
      Не вижу баннеров, чисто потребительское у вас к сайту отношение, батенька :)
        +18
        Да, я против монетизации через великие ужасные баннеры. Я за другие методы монетизации.
          +20
          Спросите счет у Шуха и перечислите ему деньги, и он эксклюзивно для вашего пользователя отключит рекламу.
            +14
            серьезно?
        +12
        Очень неплохо выглядит. Все очень удобно и компактно сгруппировано.
          0
          Если не стоит баннерорезалка, то получается так:
            0
            Да, с баннерами оно не дружит. Попробуйте сами подправить, есть желание ;)
              +1
              UPD 29.07.09
              Banners friendly версия Inversion compact skin (banners ok)
              Отличия:
              – дружит с баннерами
              – присутствует футер
              – оставлена оригинальная кнопка ответа на комментарии
              Before | After
              –1
              — оно
                0
                Что-то у меня все сегодня пропадает…
                  0
                  Не переживайте, те, у кого видно баннеры, всё сами увидят.
                    0
                    Обладателям отрицательной кармы запрещено внедрение в комментарии картинок и вообще язык HTML запрещён. Даже URLы, начинающиеся не на «www», перестают быть гиперссылками (несмотря на заботливо предпосланные им «http» и «://», которые аккуратно выкусываются и жёстко игнорируются в таких случаях движком Хабрахабра).
                +2
                Хотел поднять человеку карму, а в ответ получил: «Ой-ой-ой с колбасой! У вас недостаточно кармы чтобы голосовать» и это при том, что «У вас осталось 5 голосов за карму и топики и 6 за комментарии». Непонятно. =(

                Чтож, придется ограничиться большим «Спасибо!»

                  0
                  Оно так отродясь работает.
                  Пишет одно, а на деле — мимо.

                  Теперь же, ещё сделали бесполезную зелёную кнопку, которая выводится, не учитывая возможности пользователя поднимать карму.
                  • UFO just landed and posted this here
                      0
                      > «n голосов за карму» — это голоса не за карму хабраюзеров, а за карму хабратопиков

                      Правильно, пусть пользователи развивают фантазию и догадливость о предназничении элементов интерфейса.

                      А вот с кнопкой, с кнопкой как, даже если не работает нужна для красоты?..
                        –1
                        а у меня пишет: «У вас осталось 1 голос за карму и топики
                        и 2 за комментарии» и при этом я не могу даже за коментарий проголосовать(
                  0
                  А кнопка обновления комментов только у меня сползла в верхний правый угол с введением последнего дизайна?
                    +1
                    В Opera9.6 есть такой баг, в FF3.5 Все ок
                      0
                      Действительно, в 9.6 какой-то косяк, в 10 все нормально.
                      +1
                      Да
                        +5
                        А я принял это за фичу ><
                        +1
                        Спасибо огромное.
                        Вот бы еще убрать кнопку-попрашайку кармы. Когда нужно, мне не лень в профиль зайти.
                          +2
                          userstyles.org/styles/6610
                            0
                            Спасибо! Но отцентрованный вариант как-то сильно непривычно выглядит.
                            +1
                            .entry-info div.vote-for-user a {
                            display: none !important;
                            }
                              0
                              Большое! Человеческое! Спасибо!
                              +6
                              хм… а чем она вам не нравицца? я вот терь вместе с голосованием за топик поднимаю и карму человеку… мне хороший пост, а ему приятно=)
                              –8
                              Сетка отстой
                                +2
                                Если Вам не трудно, поправьте пожалуйста :)
                                –5
                                как же люди боятся перемен что аж не лень скрипты писать
                                  +7
                                  На перемены мне пофиг, если это перемены к лучшему. Но лично для меня лучшим кажется предложенный автором вариант, чем то, что предложил нам сам Хабр.
                                  За что я однозначно выражаю автору своё хабраспасибо.
                                    –5
                                    всем не угодиш…
                                    +1
                                    Меня лично сильно задело перемещение личных линков на левую сторону. Мы же привыкли смотреть на правую сторону. Как так можно?
                                    +1
                                    Спасибо огромное! Я пользуюсь.
                                      –5
                                      Ох уж эти хабраверстания… У меня уже который месяц глюки возникают: img.leprosorium.com/630812
                                        0
                                        Могу Вам только посочувствовать…
                                        0
                                        Похоже, из-за .msg-meta {background:#f5f5f5} ломается скрипт Highlight Topic Author Comment — новые комментарии не подсвечиваются. Но все равно спасибо =)
                                          0
                                          Я использую Highlight Topic Author Comment, и у меня работает. Должно быть проблема в чём-то ещё, или в комбинации чего-то.
                                            0
                                            А у меня наоборот — прочитанные все равно подсвечиваются синим
                                              0
                                              Ну да, у меня тоже все комментарии бледно-синие, вне зависимости прочитаны они или нет.
                                                +1
                                                Нашел. Кому эта подсветка мешает — закомментируйте строчку:
                                                .comment_holder .msg-meta {background:#f5f5f5}
                                                  +1
                                                  Или же пройдите снова по линку и нажмите Update script.
                                                    0
                                                    Я что-то пропустил? Речь идёт о моём скрипте? Если да, то я не понял — он поломался или всё-таки работает? :)
                                                      0
                                                      Всё ок, он работает. Это в нашем стиле была проблема.
                                            0
                                            спасибо огромное!!! это и вправду намного лучше чем «вариант, предложенный Хабром».
                                            всё очень компактно, и удобно.

                                            если б ещё кегль в верху и с права страницы был на самую малость побольше…
                                            всё равно — огромное спасибо!
                                              0
                                              Это же очень легко: левой по іконке Stylish, правой по стилю, Edit, и правим 1-2 циферки. Готово. Попробуйте :)
                                              Всем же невозможно угодить…
                                                0
                                                ну конечно я так и сделал (правда я через greasemonkey установил)
                                                просто не смог эти две циферки найти =(
                                                  0
                                                  Firebug —> inspect
                                              0
                                              данная верстка просто шикарна, подскажите как это дело привинтить к Chrome…
                                                +6
                                                Создайте где-нибудь папку для Userscript. например, E:\userscripts. Сохраните туда userscript js файл (название должно заканчиаться обязательно на .user.js). Скачайте последнию бетку хрома.
                                                Посмотрите «Свойства» ярлыка хрома и в поле «объект» в конце припишите " --enable-user-scripts --user-scripts-dir=E:\userscripts" (без кавычек). Нажмите ок, перезапустите браузер.

                                                Я так делал.
                                                –2
                                                Вау! Большое спасибо. Так стало гораздо приятнее и компактнее. Думаю руководству хабра стоит пригласить вас на работу ;))
                                                  –11
                                                  Меня всегда поражали люди, правяющие user-стили. Так и вижу некоего бородатого гуру с горой пива под боком и прокуренной квартирой. Но зато у него под свои нужды заточены никс и даже любимые сайты выглядят так, как он того хочет. ^_^
                                                    +1
                                                    Все не так страшно, как вы себе представили :-)
                                                    • UFO just landed and posted this here
                                                        0
                                                        Так и знал, что кто-нибудь будет оправдываться за всех гуру. =)

                                                        Я ничего страшного не имел в виду. В какой-то степени, это даже такая особая романтика.
                                                      +3
                                                      Я бы еще убрал прямой эфир и топ блогов, бесполезная СЕОшная лабуда.
                                                        0
                                                        #sidebar .blogs{display:none}

                                                        прячем топ блогов :)
                                                          0
                                                          Вот:
                                                          .live, .rating {display:none !important;}
                                                            0
                                                            Так уберётся много чего другого… Посмотрите в разных разделах сайта. Например на странице «люди» пропадут рейтинги и т.д.
                                                          0
                                                          Теперь дело только за хабра-демиургами — сделать так, что бы можно было выбрать понравившуюся тему оформления — и радоваться. Между прочим, данная вещь давно уже реализуема самыми древними CMS-ками, а сейчас уже и самыми продвинутыми сайтами. Хабр, не отставай :)
                                                            –1
                                                            А я на Хабр захожу только текст под хабракатом читать, а все остальное в RSS листаю. Может тогда все исчезнуть, а только хабракат и оставить?
                                                              0
                                                              По просьбам зрителей вырезаем банеры:
                                                              [style*='margin-top:-7px'] {display: none !important;} [href*='madbanner.ru'] {display: none !important;}
                                                                0
                                                                UPD 29.07.09
                                                                Banners friendly версия Inversion compact skin (banners ok)
                                                                Отличия:
                                                                – дружит с баннерами
                                                                – присутствует футер
                                                                – оставлена оригинальная кнопка ответа на комментарии
                                                                Before | After
                                                                +6
                                                                И почему дизайнеры хабра не могли все сделать так как автор?
                                                                • UFO just landed and posted this here
                                                                    0
                                                                    Единственное что — я бы отдал дань логотипу Хабра, и оставил бы не только его тотем, но и сам текст «Habrahabr» рядышком поместил. (к примеру)
                                                                    Но это так — мысли вслух. Не обращайте внимание. Всё отлично.
                                                                      0
                                                                      Спасибо, стало гораздо лучше :)
                                                                        0
                                                                        Великолепно. Так много приятней :)
                                                                          0
                                                                          Да оптимальный вариант, лаконично, четко, и логично предлагаю дизанйерам хабра присмотреться к такому улучшению ;)
                                                                            +2
                                                                            у меня одного возникает ощущение, что за комментарии голосовать нельзя (как будто топик уже устарел), из-за того что кнопки голоса сделали более блеклыми?
                                                                              +1
                                                                              Нет, нас много.
                                                                                +1
                                                                                Есть такое в новом дизайне Хабра. Я это исправить не смог, так как изменились сами картинки, а не прозрачность какая-то. Поэтому я сделал более прозрачными кнопки голосования для действительно устаревших комментов, чтобы легче было отличать и воспринимать.
                                                                                +1
                                                                                За меня всё сделали и даже не предупредили… :)
                                                                                  +1
                                                                                  Это я к тому, что следующая версия претифера будет с человеческой шапкой :)
                                                                                    +1
                                                                                    Да я видел, что Ваш скрипт обновился, а шапка не изменилась, и тогда взялся править… Но идея то Ваша, это да. Ждём обновления Претифера :)
                                                                                      0
                                                                                      Ну я экспериментирую, будет две версии.
                                                                                • UFO just landed and posted this here
                                                                                    +2
                                                                                    Вернул у себя футер и первозданную ссылку «ответить», остальное все нравится, спасибо.
                                                                                      0
                                                                                      Как это сделать не подскажешь?
                                                                                      • UFO just landed and posted this here
                                                                                      0
                                                                                      Я вообще не сразу врубился — вроде залогинен, так как справа есть ссылка на профайл, но в то же время как ника не увидел. Хабрахабр против шаблонного мышления.
                                                                                        0
                                                                                        UPD 29.07.09
                                                                                        Banners friendly версия Inversion compact skin (banners ok)
                                                                                        Отличия:
                                                                                        – дружит с баннерами
                                                                                        – присутствует футер
                                                                                        – оставлена оригинальная кнопка ответа на комментарии
                                                                                        Before | After
                                                                                          0
                                                                                          Спасибо, огромное! Отличная работа!
                                                                                            +1
                                                                                            Спасибо! Новая шапка, имхо, великовата была.
                                                                                            Я еще вот такое когда-то вписал для удобства:

                                                                                            /* hvote */
                                                                                            ul.hentry .vote .buttons {
                                                                                            	display: none !important;
                                                                                            }
                                                                                            
                                                                                            ul.hentry .bookmark,
                                                                                            ul.hentry .to-favs,
                                                                                            ul.hentry .fav_added,
                                                                                            ul.hentry .up-to-parent,
                                                                                            ul.hentry .down-to-child {
                                                                                            	padding-left: 10px;
                                                                                            }
                                                                                            
                                                                                            div.entry-content > div.hidden {
                                                                                            	display: inline !important;
                                                                                            	background-color: #FFF9F9;
                                                                                            }
                                                                                            
                                                                                            
                                                                                            /* */
                                                                                            .can-vote,
                                                                                            .cannot-vote,
                                                                                            .vote_plus,
                                                                                            .vote_minus {
                                                                                            	display: none !important;
                                                                                            }

                                                                                            Результат.

                                                                                            Убраны ненужные (мне) кнопки, чуть увеличено расстояние между ссылками (#, ↑) и раскрываются заминусованные комменты.
                                                                                              0
                                                                                              Ну, и заодно минус новая стрелочка:
                                                                                              /*.banner,*/
                                                                                              .can-vote,
                                                                                              .cannot-vote,
                                                                                              .vote-for-user,
                                                                                              .vote_plus,
                                                                                              .vote_minus {
                                                                                              	display: none !important;
                                                                                              }

                                                                                            Only users with full accounts can post comments. Log in, please.