Тостер. Userstyle

в 12:12, , рубрики: usability, userstyle, вопросы и ответы, дизайн, Дизайн в IT, интерфейсы, хабрахабр, метки: , , , , ,

Несколько часов назад администрация объявила о возрождении ресурса «Тостер». Но не в том виде каким он был, а отделив раздел Q&A от хабра в отдельный сайт. Первое, что бросилось в глаза — это сайт уехавший влево. Может на ноутбуках будет смотреться хорошо, но на моем экране можно разместить 2 таких сайта.

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

  • Фиксированное расположение шапки сайта
  • Сайт выровнен по центру, левая панель осталась нетронутой
  • Основная часть сайта стала шире
  • Добавил прозрачности тегам, чтобы не бросались в глаза и изменил шрифт на Arial
  • Изменен цвет текста во всплывающем окошке у тега, сделал более контрастным
  • Еще пару незаметных мелочей

Скрытый текст

body > .content, body > .footer { 
	margin: 0px auto;
	padding: 0 !important;
	width: 1008px !important;
}
body > .content .header {
	position: fixed;
	z-index: 105;
}
body .main_content { 
	padding-top: 68px;
}
/*
body .main_content .notice, 
body .main_content,
body > .content .left_column,
body > .content .header .left_column  { 
	margin-left: -68px;
}
*/
body > .content .left_column .inner { 
	width: 726px !important;
}
body .main_content .tags .tag {
	background: rgba(180, 188, 204, 0.25) !important;
	font-family: arial;
	font-size: 12px;
}
body .main_content .tags .tag.subscribed { 
	background: rgba(74, 191, 180, 0.25) !important;
}
.questions_list .questions_list_item:hover .tags .tag.subscribed,
.question_show .info .tags .tag.subscribed { 
	background: rgba(74, 191, 180, 0.8) !important;
}
.questions_list .questions_list_item:hover .tags .tag,
.question_show .info .tags .tag { 
	background: rgba(180, 188, 204, 0.8) !important;
}
body .main_content .tags .tag .tag_popup .popup_inner .item .label { 
	color: #BDD5EE !important;
}
.tags_list .tags_list_item:hover, 
.users_list .users_list_item:hover, 
.tracker_questions_list_item:hover { 
	background: #fdfdfd !important;
}
.question_show > .info,
.answers_block .answers_list .answers_list_item > .info, 
.questions_list .questions_list_item .info,
.answer_form .fields { 
	width: 657px !important;
}
/*
body .main_content .tags .tag {
	opacity: 0.5;
}
.questions_list .questions_list_item:hover .tags .tag {
	opacity: 1;
}
*/
body > .content .left_column { 
	width: 758px !important;
}
body > .content .right_column { 
	width: 250px !important;
}
body > .footer {
	box-shadow: 0px 0px 5px #BBBBBB;
}
body > .footer a { 
	color: #626B75 !important;
}
.field-custom-checkbox-group .field-custom-checkbox-group-label { 
	width: 513px !important;
}

Лишнее можно убрать, оставив только центрирование.

ВАЖНО!
Администрация еще может вносить правки как в стили, так и в верстку, из-за чего юзерстиль может сломаться. Я буду отслеживать и вносить правки.

Автор: artishok

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js