Добро пожаловать, снова!
New Fresh Powerful
Modern Flexible Dynamic

суббота, 17 марта 2012 г.

Создаём тему для Socialzet.com (часть 2)

Итак продолжим с оформлением на Socialzet.com. В прошлый раз мы создали фон, теперь как и обещал разберёмся с шапкой.

Задаём цвет шапки с помощью background
 div.top_wrapper{background: #000;}




Задаём цвет фона при наведении по пунктам меню шапки и закругляем углы с помощью border-radius. Здесь мы использовали !important, который повысил приоритет нашего  цвета #3f3e3e и он применился.  За наведение отвечает псевдо класс :hover, после которого мы и записываем все  нужные атрибуты в фигурных скобках{}.
.menunew a:hover{background: #3f3e3e !important; border-radius: 5px;}


Задаём цвет рамок border-color в меню поиска(поиск по категориям)
.searchMenu{border-color: #000 !important;}


Задаём цвет текста(ссылок)
.searchMenu a{color: #000 !important;}

Цвет фона и текста при наведении на пункты в поиске
.searchMenu a.hover:hover{background: #000 !important; color: #fff !important;}


Цвет рамки в блоке выдачи результатов поиска
#searchLoadCont{border-color: #000;}


Цвет текста(ссылок) на всей странице
a{color: #898989 !important;}

Убираем рамки у каждого результата поиска
.s_ajax_user{border: none;}

Цвет фона при наведении на результаты выдачи
.s_ajax_user:hover{background: #000;}


Цвет фона при наведении на кнопку "Показать больше результатов"
.search_history:hover{background: #000;}


Цвет фона выбранной категории
.selected{background: #bbb !important;}

Убираем рамку у всех остальных результатов(в других категориях поиска)
.videoTab_search{border: none !important;}

Цвет фона при наведении у всех остальных результатов(в других категориях поиска)
.videoTab_search:hover{background: #000;}

А вот весь код целиком:

div.top_wrapper{background: #000;}
.menunew a:hover{background: #3f3e3e !important; border-radius: 5px;}
.searchMenu{border-color: #000 !important;}
.searchMenu a{color: #000 !important;}
.searchMenu a.hover:hover{background: #000 !important; color: #fff !important;}
#searchLoadCont{border-color: #000;}
a{color: #898989 !important;}
.s_ajax_user{border: none;}
.s_ajax_user:hover{background: #000;}
.search_history:hover{background: #000;}
.selected{background: #bbb !important;}
.videoTab_search{border: none !important;}
.videoTab_search:hover{background: #000;}