Как стать автором
Обновить

Тостер. Userstyle. Update

Время на прочтение 3 мин
Количество просмотров 4.1K
Несколько часов назад администрация объявила о возрождении ресурса «Тостер». Но не в том виде каким он был, а отделив раздел 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;
}


Под спойлером сравнение


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

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

UPD:
Администрация сделала отображение сайта в центре, поэтому мой стиль уже не актуален. Но если вы хотите, чтобы панель была прижата к левому краю — все-же придется использовать userstyle. Здесь я просто прижал панель к левой стороне экрана. Ну еще убрал тень у футера и закомментировал код, отвечающий за фиксированное расположение шапки.
Скрытый текст
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;
}

.question_interest_link_float_container {
	top: 78px !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 > .content .left_column { 
	width: 758px !important;
}
body > .content .right_column { 
	width: 250px !important;
}
body > .footer a { 
	color: #626B75 !important;
}
.sidebar {
	left: 0 !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}
Теги:
Хабы:
+24
Комментарии 17
Комментарии Комментарии 17

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн