July 18th, 2015

Прозрачная панель навигации 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;
}


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

Приемная комиссия. Первая неделя.

На дворе 18 июля и подошла к концу первая неделя приема документов. Приведу особые достижения и недочеты этой недели.

Не получилось. ЕДБО таки зависла.

Если первый день прошел без сучка и задоринки, то вплоть до четверга-пятницы все было плохо. И это без набора студентов-ускоренников (младшие специалисты поступают на бакалавра на сокращенный курс) и абитуриентов 5 курса, получивших бакалавра. Об этом попозжа - как так затык получился.
Но даже при этом можно увидеть неоценимый сдвиг. Уезжать по ночи на служебной развозке мне пришлось всего раз, да и то - приехал я до полуночи. База в дни лагов стояла обычно с 9 утра и до 3-4 часов дня, и дела вносили уже после окончания рабочего дня, не задерживая абитуриентов. В пятницу проблемы не наблюдались целый день. Вообще можно спрогнозировать, что на следующей неделе, подача документов не составит серьезных проблем и задержек.

Collapse )