3 мин.

Делаем редизайн Sports.ru сами

246

Испытав некие неудобства при новом дизайне спортс.ру, да и прочитав комментарии многих пользователей, которые тоже не были в полном восторге от нового дизайна, я решил заняться этим вопросом и немного подогнать дизайн сайта под себя. Для этого написал стиль CSS для сайта и применил его с помощью плагина. Приведу фотографии того, что у меня вышло и как это сделать.

Замечу сразу – это сработает только в браузерах Файрфокс и Хром. Пользователи других браузеров – сорри, я не смог найти решения. Поэтому могу просто порекомендовать сменить браузер на ФФ или Хром. :)

Какие изменения я внес в дизайн:

Фон изменен на привычный серый; белый в центральной части изменен на менее яркий; шрифт всего сайта на привычный; шапка, навигация и многие другие детали стали более стилизованные, с округлыми краями; кнопка под полем комментариев вернулась в привычное место, справа под полем; изменены цвета шапки и футера.

Итак, как у меня сейчас выглядит сайт:

Шапка сайта, со всплывающими меню навигации и поиска (можно кликнуть):

Блок Трибуны:

Дайджест слухов и Фотогалерея:

Лучшие материалы и футер:

Блок прогнозов и внутренняя навигация:

Кнопка «Отправить» под текстовым полем комментариев:

 

Как это сделать?

Для тех у кого Файрфокс: устанавливаем плагин Stylish

Для тех у кого Хром: устанавливаем плагин Stylish

Если ссылки не сработали, то просто поищите эти плагины на сайтах Мозиллы и Хром App-store.

После того как плагины установлены, идете вот сюда: http://userstyles.org/styles/64138/sports-ru-style?r=1334448006 и нажимаете большую зеленую кнопку чтобы установить этот стиль у себя. Наслаждаетесь новым Спортс.ру :)

 

Бонус для пользователей Файрфокса (сорри, Хромовцы, я не смог применить этот трюк в Хроме, если кто найдет решение – пишите):

К сожалению кнопка Отправить в комментариях в блогах (только в блогах) не сдвинулась до конца вправо. В ФФ это можно решить, отредактировав установленный стиль и добавив в самом конце, после последнего знака } следующую запись:

@-moz-document url-prefix(‘http://www.sports.ru/tribuna/blogs’) {    .comment-form input{        margin-left:528px !important;    }}

После копирования этого кода нужно изменить в адресе одинарную кавычку на апостроф (спасибо ramays за наблюдательность)