Как настроить отображение сайтов под себя
Чтобы заставить браузер (речь пойдет о Firefox, которым я чаще всего пользуюсь) показывать страницы так, как вам хочется, нужно отредактировать файл userContent.css. Находится он (для Windows 7) тут:
C:\Users\[CURRENT_USER]\AppData\Roaming\Mozilla\Firefox\Profiles\[PROFILE_NAME]\chrome\userContent.css
Если его там нет или нет такой папки, просто создаем ее вместе с файлом.
Теперь с помощью Консоли находим нужный нам элемент на странице, кликнув по нему правой кнопкой -> Исследовать элемент. Откроется консоль с древом HTML-тегов и настройками отображения CSS для любого выбранного элемента. Сейчас принято делать верстку с использованием каскадных таблиц стилей, из-за чего практически каждый элемент на странице имеет свой уникальный атрибут id или class.
Например, если элемент в консоли выглядит так:
Это значит, что элемент растянут на 90% родительского элемента и имеет черный фон. Если нас это не устраивает, вставляем его в наш userContent.css, обзывая его по имени <тега>:
div {
// тут будут настройки элемента
}
или по id с использованием знака #:
#left_menu-item {
// тут будут настройки элемента
}
или его class, заменив все пробелы на точку:
.dialog.box-shadow.dialog-open.popup-width-large.dialog-content-ready
{
// тут будут настройки элемента
}
Можно и комбинировать эти указания, чтобы наиболее точно указать нужный элемент, например, так:
td .dialog.box-shadow {
// тут будут настройки элемента
}
Далее смотрим в консоли какие настройки CSS нам надо изменить, копируем их и вставляем в userContent.css, а затем выставляем необходимые значения атрибутов:
.dialog.box-shadow.dialog-open.popup-width-large.dialog-content-ready
{
width: 500px !important;
background: white !important;
}
Теперь наш невзрачный элемент станет симпатичнее, побелев и ужавшись до постоянных 500px. Ключ !important нужен для того, чтобы браузер воспринимал наши настройки, как самые главные и игнорировал те, что указаны в файле стилей самого сайта.
Чтобы ограничить правило отображения для конкретного сайта, надо после имени элемента указать domain("imya-domena.com"). Например, так:
@-moz-document domain("ya.ru") {
body {
width:600px !important;
}
}
Теперь перезагружаем браузер и радуемся новым настройкам. Справку по языку CSS и HTML можно получить на множестве сайтов, например, тут.