akirich_pcroom (akirich_pcroom) wrote,
akirich_pcroom
akirich_pcroom

Прозрачная панель навигации Livejournal

Многие слышали, что начиная с обновления 128.8 ЖЖ начал менять панель навигации. Не без костылей, но то к чему многие привыкли - утеряно. В том числе и стили. Поначалу я сильно расстроился когда у меня к тегу header не прикрутился полупрозрачный фон и пока я использую opacity, что выглядит не всегда хорошо. В итоге вечернего css-поиска, я отгрохал свою таблицу стилей для полупрозрачного меню. Думаю мое начинание заинтересует многих, как и позволит найти ошибки и оптимизировать таблицу стилей.
Итак, я буду показывать блоками без комментариев, т.к. css в ЖЖ русский язык игнорирует.
.s-logo {
  width: 30px;
}

Уже не работает. Логотип ЖЖ обрезан до 30 пикселей, потому что текст на логотипе белый и смотреться на светлых тонах, еще и с прозрачностью он будет никак. Если кто-то подскажет где найти такой же логотип, но с черным текстом, буду благодарен.
.s-header, .s-logo, .s-header-in, .s-header-journal, .s-header-journal__user,
 .appwidget-stylealwaysmine, .w-cs-view-style, HTML BODY .s-header-journal-menu-item__link {
  background: rgb(255,255,255) !important;
}

Уже не работает. Присвоил белый фон. Не рекомендуется использовать rgba - блоки будут выглядеть неравномерно.
HTML BODY .s-header-item__link, HTML BODY .s-header-sub-list-item__link, 
HTML BODY .s-header-journal__user .i-ljuser-profile, HTML BODY .s-header-journal__user .i-ljuser-username,
 .s-header-journal__user .i-ljuser-username B, HTML BODY .s-header-journal-menu-item__link {
  background-color: inherit !important;
  color: #000 !important;
}

Уже не работает. Присвоил черный цвет текста.
.s-drop {
  background: rgba(255,255,255,1) !important;
  color: #000;
}
.s-drop-sub {
  position: absolute;
  background: rgba(255,255,255,1) !important;
  color: #000;
}

Уже не работает. В дроп-меню сделано два селектора, т.к. если сделать позиционирование абсолютным в s-drop, иконки вступления в сообщества\фильтра\календаря "вылетят" из блока.
.flaticon {
  fill: #000;
}

Заливка иконок черным цветом. Доступны дополнительные селекторы для каждой из иконок.
header {
opacity: 0.9;
}
Уже не работает.
.s-header{ border-bottom: none; z-index: 10000; position: fixed; top: 0; left: 0; }

Присвоили прозрачность всему блоку и зафиксировали его вверху экрана (т.е. со скролом он будет тоже двигаться). Код ниже, для аналогичного процесса, в старой панели навигации. Единственный минус, который мне не нравится - для header присвоен opacity, т.к. белый фон под ним я удалить не смог.
}
.w-cs  {
background: rgba(255,255,255,0.9) ;
  border-bottom: none;
  z-index: 101;
  position: fixed;
  top: 0;
  left: 0;
}
.w-cs-userinfo 
{
background: rgba(0,0,0,0) !important; 
}
.w-cs-summary {
background: rgba(255, 212, 0, 0.4) !important;
}


АПД Уже сломали. Подскажите, на тумблере есть хороший редактор?
Tags: ЖЖ
Subscribe

Posts from This Journal “ЖЖ” Tag

  • Пиши еще! Новый функционал ЖЖ.

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

  • Кирюхина Телега!

    Вроде оттестировал, обкатал и могу сказать что в Телеграме запущен паблик-чат с большинством ресурсов связанных со мной. Что в наличии: - ЖЖ с…

  • Иди домой

  • #77февраля

    Чрезвычайно насыщенный день у меня был сегодня. Ночь верстки. Неплохо измотала работа. Отлично подзарядил снежок. Да-да, снежок. 18 апреля. Рекорд…

  • Что это было.

    В ночь с понедельника на вторник ЖЖ выпустил патч с новыми правилами использования. При соглашении с TOS, подключался некий пакет профессиональный. И…

  • Обновление ЖЖ №144. Летело как ангел, падало как чёрт.

    Многие заметили, что при загрузке ресурса частенько вылетает 503 (реже 502 Bad Gateway) ошибка и ЖЖшка дальше не грузится. Проблема глобальная (т.е.…

  • Не нравится мне все это.

    ЖЖ решил закрутить гайки и послать всех тех, кто делает посты через Яндекс.Фотки. Дело в том, что новый хитрожелтый движок обрезает ссылки на…

  • Итоги года.

    2015 подходит к концу. В этом году было очень тяжело, но результативно. Первые дни - защита магистерской работы. Успешно и с отличием. С…

  • Итоговый Харьковский ЖЖ-Конкурс!

    Оригинал взят у akirich_pcroom в Итоговый Харьковский ЖЖ-Конкурс! До конца года осталось менее месяца, а это значит, что очень скоро мы…

promo akirich_pcroom september 1, 2013 01:18
Buy for 10 tokens
Размещайте рекламу в промо по уникально низким ставкам! Правила размещения промо в моем ЖЖ. Даже несмотря на непостоянство показов в данном журнале действуют ограничения по тематике промоутируемых материалов. Рекламируемый материал должен содержать материалы подходящие для группы 12+.…
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 0 comments