Фиксированный заголовок для ЛОРа - 2

вот это прикольно, для Xfce бы так

Хорошо!

Доработанный стиль для LOR (кроме Firefox нигде больше не проверял) с заполнением по ширине окна, плавающим боковым блоком на главной, нормализованным размером шрифтов, убранными тегами из трекера.
Ничего не перекрывается как в прошлый раз (ответы, навигация в шапках тем).

Хреновенько же он доработан, если судить по скрину. Отступы в заголовке кривые, глаз отказывается воспринимать это как меню. На, сравни.

В остальном — конского размера заголовки окон. Цветовая схема неплоха, но красный слишком яркий в твоем случае. Серьезно, сделай его менее интенсивным, глаза же потекут рано или поздно.

PS: и это, нет нужды использовать [br][br], используй пустую строку между абзацами, это куда читабельнее (=

для Xfce бы так

так там есть для всех гтк-шных окружений

где кривые заголовки? отступы в шапке по бокам?

По мне, так отлично.

Спасибо, все руки не доходили запилить такое
Кстати, с цветами намутил слегка, надо бы пофиксить :-)

Мало того, что разные, так еще и сверху/снизу разные.

выровнять не проблема, если и надо в абсолютных единицах, у меня там относительно всё, ну и то, что на скрине быстрая переделка из собственно сабжа который на юзерстайлс

//цвета тоже ещё не везде устраивают меня

Супер! Я бы попользовался таким окружением!

относительно всё

Но зачем?

вопрос ко всем:
можно ли сделать (в css) так, чтобы при нахождении курсора мыши над левым блоком на главной (с голосованиями, скриншотами и прочим), то при прокрутке над ним этот блок прокручивался, а не только как у меня сделано, у меня он прокручиваться начинает только когда основной текст главной доходит до определённого положения

Но зачем?

мне не нравится когда на разных сайтах разные шрифты и их размеры

А вот скрипт для тени при скролле:

(function() {
  let el = document.querySelector('#hd');
  window.addEventListener('scroll', function() {
    let shadow = (window.scrollY == 0) ? 'none' : '0 0 40px #272c2d';
    el.style.boxShadow = shadow;
  });
})();

Ужас. Самый убогий тренд последнего времени.

Скрин ничё так. Разве что ШГ на лоре слишком блёклые. Сливаются с фоном.

наверное, специально в принципе их так делал неяркими, ночью в темноте, надо поотчётливей видимо

ну а про убогость тренда... удобно когда шапка на месте всегда перед глазами, в прошлой теме говорили уже

Убрал стиль aside, все стало прокручиваться одновременно.

И большое спасибо, так красиво и удобно! Только тень еще добавил.

Убрал стиль aside

не, убрать зачем? я специально добавил, но как бы не совсем то что надо, а как хотел выше же и сказал

добавил, не понял, где какая тень?

лучше ник справа выровнять http://storage1.static.itmages.ru/i/16/0807/h_1470591641_1716400_f5a2a60a97.png

(function() {
  let el = document.querySelector('#hd');
  window.addEventListener('scroll', function() {
    let shadow = (window.scrollY == 0) ? 'none' : '0 0 10px #272c2d';
    console.log(shadow);
    el.style.boxShadow = shadow;
  });
})()

Опять накосячил, вот нормальная версия
тень под шапкой при скроле
UPD: лол, голова совсем не работает, вот нормальная версия

нет никакой тени

или ты про конкретно танговский стиль? на нумиксе не видно тени после добавления твоего кода

куда и как добавил? покажи

да, нормально, хотел границу сначала сделать цветом, про тень не подумал как-то

и шапку ты по высоте подравнял, справа ник бы ещё влево подвинуть

исправленный для numix, пока так:

/************************************************************************************************
Для Firefox скопировать этот файл в следующий каталог (если каталога
chrome нет, то создать):
Linux — /home/USERNAME/.mozilla/firefox/YOUR_PROFILE.default/chrome
Windows — C:\Users\USERNAME\AppData\Roaming\Mozilla\Firefox\Profiles\YOUR_PROFILE.default\chrome
OS X — Users/USERNAME/Library/Application Support/Firefox/Profiles/YOUR_PROFILE.default/chrome
************************************************************************************************/

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.linux.org.ru") {

div#hd {
	position: fixed;
	top: 0;
	z-index: 1;
	width: 100%;
	background: #333 !important;
	box-shadow: 0px 5px 5px black;
        padding-bottom: .5em !important;
	font-size: .8em;
}

/*********************************
aside {
	position:sticky; top: 5em;
}
*********************************/

:target {
	padding-top: 3.5em !important;
}

header {
	padding-top: 1em;
}

body {
	padding-top: 4.5em;
}

html, body, .code, code {
	background: #3a3a3a !important;
	color: #b9b9b9 !important;
	font-size: 1em;
	max-width: none !important;
}

#sitetitle {
	color: #b9b9b9 !important;
	background: #333 !important;
}

h2 a {
	color: #b9b9b9 !important;
}

.menu a {
	color: #b9b9b9 !important;
	text-decoration: none;
}

#loginGreating a {
	color: #aaa !important;
	text-decoration: none;
}

.messages .msg:target {
	border: 1px solid #f0544c !important;
}

.menu, .infoblock, .boxlet,.messages .msg, .message-table .tag {
	background: #333 !important;
	border-radius: 0 !important;
}

#bd .forum table th, .btn-default, .message-table tr:hover {
	background: #333 !important;
	border-radius: 0 !important;
}

#bd .btn-selected {
	background: #f0544c !important;
	border-radius: 0 !important;
}

#bd .btn-primary {
	background: #3da640 !important;
	border-radius: 0 !important;
}

a {
	color: #b9b9b9 !important;
}

#bd .forum table tbody td {
	border: 1px solid #626262 !important;
}

#bd .forum table th {
	border: 1px solid #626262 !important;
}

/*#bd .forum table tbody td a {
	text-decoration: none !important;
	color: #b9b9b9 !important;
}

#bd a.tag, .message-table .tag {
	color: #b9b9b9 !important;
}*/

span.tag {
	display: none !important;
}

blockquote {
	border-left-color: #3a3a3a !important;
}

#bd .sign a, .stars {
	color: #f0544c !important;
}

#whois_userpic, .boxlet {
	background: #333 !important;
	border-radius: 0 !important;
}

}

div#hd .menu {
	margin: 0px !important;
	padding-right: 2rem !important;
	padding-left: 2rem !important;
}
#loginGreating {
	margin-right: 0px !important;
}
#sitetitle {
	padding-left: 2rem !important;
}

Обнулил дефолтные отступы, запилил свои и еще удивился em / rem, это как?

upd: нашел статью на хабре, сейчас буду читать...

слишком плоско

не знаю что такое rem (может опечатка?), вообще не знаю ни джаву ни прочее, ни css, просто методом проб и ошибок смотрел что к чему и как (методом научного тыка)

уже так:
http://storage1.static.itmages.ru/i/16/0807/h_1470597847_5713660_13a78d0e01.png

просто так сделал сейчас:

/************************************************************************************************
Для Firefox скопировать этот файл в следующий каталог (если каталога chrome нет, то создать):
Linux — /home/USERNAME/.mozilla/firefox/YOUR_PROFILE.default/chrome
Windows — C:\Users\USERNAME\AppData\Roaming\Mozilla\Firefox\Profiles\YOUR_PROFILE.default\chrome
OS X — Users/USERNAME/Library/Application Support/Firefox/Profiles/YOUR_PROFILE.default/chrome
************************************************************************************************/

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.linux.org.ru") {

div#hd {
	position: fixed;
	top: 0;
	z-index: 1;
	width: 100%;
	background: #333 !important;
	box-shadow: 0px 5px 5px black;
        padding-bottom: .5em !important;
	font-size: .8em;
}

/*********************************
aside {
	position:sticky; top: 5em;
}
*********************************/

:target {
	padding-top: 3.5em !important;
}

header {
	padding-top: 1em;
}

body {
	padding-top: 4.5em;
}

html, body, .code, code {
	background: #3a3a3a !important;
	color: #b9b9b9 !important;
	font-size: 1em;
	max-width: none !important;
}

#sitetitle {
	color: #b9b9b9 !important;
	background: #333 !important;
}

h2 a {
	color: #b9b9b9 !important;
}

.menu a {
	color: #b9b9b9 !important;
	text-decoration: none;
}

#loginGreating a {
	color: #aaa !important;
	text-decoration: none;
	margin-right: 1.2em;
}

.messages .msg:target {
	border: 1px solid #f0544c !important;
}

.menu, .infoblock, .boxlet,.messages .msg, .message-table .tag {
	background: #333 !important;
	border-radius: 0 !important;
}

#bd .forum table th, .btn-default, .message-table tr:hover {
	background: #333 !important;
	border-radius: 0 !important;
}

#bd .btn-selected {
	background: #f0544c !important;
	border-radius: 0 !important;
}

#bd .btn-primary {
	background: #3da640 !important;
	border-radius: 0 !important;
}

a {
	color: #b9b9b9 !important;
}

#bd .forum table tbody td {
	border: 1px solid #626262 !important;
}

#bd .forum table th {
	border: 1px solid #626262 !important;
}

/*#bd .forum table tbody td a {
	text-decoration: none !important;
	color: #b9b9b9 !important;
}

#bd a.tag, .message-table .tag {
	color: #b9b9b9 !important;
}*/

span.tag {
	display: none !important;
}

blockquote {
	border-left-color: #3a3a3a !important;
}

#bd .sign a, .stars {
	color: #f0544c !important;
}

#whois_userpic, .boxlet {
	background: #333 !important;
	border-radius: 0 !important;
}

}

ещё вопрос:
как теги в трекере (а они всё же нелишние) сделать после названия темы, а то так и не нашёл как и совсем их убрал

А, понял
Ну цвета подкрути
Просто когда фиксированный при скролле очень ущербно смотрится
Когда тень, то видно, что это шапка и глазам приятнее

Погугли про CSS-селекторы через тильду, типа .class ~ .someclass
Или +

да есть уже, в несколько простых строк, а утебя там непонятно что, типа перегон какой-то css в js для greasemonkey

rem — единица размера для web, у меня странно отработали значения в em для #sitetitle, в rem же все стало нормально. Я сам о ней ничего не знаю.

Спешу поделится ужасами.

Заполз сейчас в LMint ( там с утра 48-й прилетел ), и что же вижу?
Половина пунктов в контекстном меню сайтов не работает, в частности «открыть в новой вкладке». При попытке чего-нибудь поискать не только ничего не ищет ( исчез поиск в автокомплите ), так еще на простые запросы в несколько случайных букв браузер выдал мне с потолка три китайских сайта ( довольно красивых, кстати ).
Сижу, офигеваю.

Да, засунул в конфиг это, поплыла верстка. Плохой код )

так а причём тут какой-то сай кроме лора? вот же (начало смотри):
Фиксированный заголовок для ЛОРа - 2 (комментарий)

@-moz-document domain("www.linux.org.ru") {

Я и имею ввиду ЛОР, #loginGreating уплыл вправо, а разделы при маленьком окне — влево.
Но лисичка в mint-е сегодня болеет. =(

хз, ничего не плывёт, фокс тоже 48, д и неважно какая версия
там в минте есть дополнение своё для лисы, может от него? хотя странно, с чего бы?

да какой перегон, стандартные методы DOM
Выбрал элемент, метод style - DOM-представление стилей, выбрал нужный property и изменил значение
У меня пару строк, просто обернул их в замыкание

загрузил лайв минта (синнамон), проверил сразу на 47 и после обновления на 48 лисе, как и танговский css, так и нумиксовский, всё нормально:
-47 танго (норм окно) - http://storage7.static.itmages.ru/i/16/0807/h_1470610432_1032748_eb9cfcbd43.png
-47 танго (мален окно) - http://storage9.static.itmages.ru/i/16/0807/h_1470610501_7523729_eec18f0551.png
-47 нумикс (норм окно) - http://storage1.static.itmages.ru/i/16/0807/h_1470610530_7900813_35e72a1948.png
-47 нумикс (мален окно) - http://storage2.static.itmages.ru/i/16/0807/h_1470610553_9381220_6368da3d3c.png
-48 танго (норм окно) - http://storage3.static.itmages.ru/i/16/0807/h_1470610585_2395281_b1ab5ab9aa.png
-48 танго (мален окно) - http://storage4.static.itmages.ru/i/16/0807/h_1470610607_4855793_bd02d69cdd.png
-48 нумикс (норм окно) - http://storage6.static.itmages.ru/i/16/0807/h_1470610628_1059899_2666d0b901.png
-48 нумикс (мален окно) - http://storage7.static.itmages.ru/i/16/0807/h_1470610648_5638992_35c59f2d1c.png

да неважно уже, я просто как-то конвертировал для qupzilla стиль css в js для greasemonkey и там похожая каша была

02:21

Все ;)

bw Opera 39 http://storage4.static.itmages.ru/i/16/0807/h_1470611827_6525519_064d903628.png
lw Opera 39 http://storage7.static.itmages.ru/i/16/0807/h_1470611855_5176327_a920a27f91.png
bw Firefox 48 http://storage1.static.itmages.ru/i/16/0807/h_1470611647_1026828_c24a48dcfd.png
lw Firefox 48 http://storage3.static.itmages.ru/i/16/0807/h_1470611795_1665008_7f8a569fca.png

В Antergos f48 отрабатывает так же, как Opera.

Ничего не перекрывается, как в прошлый раз

Может я что не понял, но «iiоследние сооощения» не впечатляют.

это подкручено для наглядности, ну что шапка статична

http://storage5.static.itmages.ru/i/16/0808/h_1470634887_5602114_8277ae669a.png

http://storage7.static.itmages.ru/i/16/0808/h_1470634975_2118011_6903c7fd1d.png

https://userstyles.org/styles/131178/lor-tango-numix-fixed-top

Может, стоит убрать тень от шапки, когда текущая позиция на самом верху?

а как? можно бы

Да, и меню («новости, галерея форум и т. д.») неплохо бы по центру сделать, по центру всей шапки, только хз, надо видимо это меню заключить ещё во что-то или оно изначально в исходнике сайта по центру?

Если знаешь с лёту как, то можно показать, а то надоело на каждый чих талмуд листать.

Привет!
Включил многопроцессность, снова включил многопроцессность, уже force, и внезапно лиса пришла в себя, только стили отвалились. Решил поставить Stylish. Наконец-то я понял всю мощь и прелесть этого расширения!

По коду успехов ноль, нашел только крошечный фикс

#bd .btn-danger {
	border-radius: 0 !important;
}

и еще

.messages .msg:target {
	padding-top: 0.5rem !important;
}