Итак продолжим с оформлением на 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;}
Задаём цвет шапки с помощью 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;}
Комментариев нет:
Отправить комментарий