Готовые интернет-магазины – узнайте больше
Приглашаем дропшиппинг-поставщиков товаров Обратная связь
Магазины О проекте Академия

Изменение стилей сайта с помощью файла CSS

Опубликовано Мария Власова    05 июня 2016 19:39

Перед Вами первая часть файла CSS, в котором содержатся стили сайта. С этой частью Вы можете работать самостоятельно, не имея опыта работы с CSS или HTML. Чтобы открыть файл CSS откройте Визуальный редактор - Параметры - стили сайта style.css
Читайте также статью Изменение стилей сайта с помощью файла CSS. Часть 2.

Линия отреза :)

Все цвета в файле записаны в шестнадцатиричном формате #FF0000
Чтобы выбрать нужный Вам цвет воспользуйтесь сервисом подбора цветов. Например http://mainspy.ru/kod_cveta_html
Изменение стилей сайта с помощью файла CSS
Изменяя тон и яркость добейтесь нужного Вам оттенка. А затем скопируйте код получившегося цвета (поле Hex на скрине) и вставьте в Ваш файл CSS.
Допустим, Вы хотите изменить цвет фона шапки сайта.
Найдите соответствующую строку в файле CSS
Изменение стилей сайта с помощью файла CSS
Как Вы видите, в строке 31 написано Фон шапки. Написан исходный цвет фона на случай, если Вы захотите вернуть первоначальный цвет. Цвет фона задается параметром background. Вы подбираете нужный Вам цвет. Допустим, это будет цвет #552B8F. Значит в параметр background вместо #fafafa нужно вставить #552B8F.
Изменение стилей сайта с помощью файла CSS
И точно также, согласно инструкции, Вы можете изменять остальные параметры.

Файл CSS

/*
Файл стилей вашего интернет-магазина.
Используйте его для изменения цвета на сайте. Файл состоит из двух частей.
Первая часть для начинающих – рекомендуется менять только цвета.
Вторая часть только для профессионалов.
*/
/****************************************************************************************/
/*

Часть I: Цвета и фоны основных элементов интернет-магазина.
1. Вы можете прописать коды цветов для основных элементов интернет-магазина.
2. Можете задать цвет фона для шапки, цвет фона для страницы.
3. Можете задать фоновую картинку для шапки, фоновую картинку для страницы.

*/
/****************************************************************************************/

/*
Фон страницы – исходный #fafafa
1. Можно задать цвет фона страниц – параметр background
2. Можно поставить любую картинку фоном, скопируйте в параметр background: url()
3. Можно задать цвет текста – параметр color
*/
body {
background: #fafafa;
/* background: url(/design/img/retro.gif); */
color: #000;
}

/*
Фон шапки – исходный #fafafa
1. Можно задать цвет фона шапки – параметр background
2. Можно поставить любую картинку фоном, скопируйте в параметр background: url()
3. Можно задать минимальную высоту шапки height
4. Можно поменять цвет текста в шапке color – исходный #fff;
*/
.top_block {
background: #552B8F;
background: url(/design/img/trace.gif);
}
.top_block .wrapper_block table {
height: 65px;
}
.top_block .domain, .top_block {
color: #fff;
}

/*
Фон меню – исходный #fff
1. Можно задать цвет фона меню – параметр background
*/
.main_menu {
background: #fff;
}

/*
Цвет текста навигации – исходный #555
1. Можно задать цвет навигации – параметр color
*/
.all_products_link, .pagination .prev a, .pagination .next a, .table_block .popup-menu .pmenu-item .item, .basket_link a, .search .search_field, .help_link a, .consultant .contact_inf .name, .product_block .product_name, .catalog_menu ul.level_1 > li a, .catalog_menu ul.level_1 > li span, .main_menu li a, .main_menu li > span {
color: #555;
}

/*
Цвет текста навигации, текущий активный раздел – исходный #FC1B33
1. Можно задать цвет навигации – параметр color
*/
.bottom_block .active a, .main_menu li.active span {
color: #FC1B33;
}

/*
Цвет кнопок – исходный цвет текста #fff фон #71B13F
1. Можно задать цвет кнопок – параметр background
2. Можно задать цвет текста в кнопке – параметр color
*/
.product_reviews_block ul li:before, .content_seo_block ul li:before, .content_area .content_block_content ul li:before, .catalog_menu .level_2 ul li:before, .catalog_menu ul.level_1 > li.hover > a, .catalog_menu ul.level_1 > li.hover > span, .catalog_menu ul.level_1 > li.active > a, .catalog_menu ul.level_1 > li.active > span, .order_call_link, .style1.ui-niceButton, .main_menu li a:hover span {
background: #71B13F;
color: #fff;
}

/*
Цвет ссылок – исходный #00a0e2
1. Можно задать цвет ссылок – параметры color и border-color
*/
.bottom_block .help_link a:hover, .footer_menu_block a:hover, .breadcrumbs ul li a:hover, .pagination .prev.enable a:hover, .pagination .next.enable a:hover, .pagination ul li a:hover, .question_answer_wrapper > a, .product_reviews_block .add_review_link, .product_reviews_block a, .content_block_header .selected_filter a:after, .content_block_header .selected_filter a, .catalog_menu ul.level_1 a:hover, .all_products_link:hover, a {
color: #00a0e2;
border-color: #00a0e2;
}

/*
Цвет заголовков – исходный #619637
1. Можно задать цвет заголовков – параметры color
*/
.catalog-item .good-choise, .product_list_view .good-choise, .banner_text, .container h1, .container h2, .container h3 {
color: #619637;
}

/*
Цвет ярлыка цены – исходный цвет текста #000 фон #fbdd58
1. Можно задать цвет текста в ярлыке – параметры color
2. Можно задать цвет ярлыка цены – параметры background
*/
.content_block_content .price, .product_block .product_price, .banner_text span {
color: #000;
background: #fbdd58;
}

/*
Цвет ярлыка каталога – исходный цвет текста #000 фон #dadada
1. Можно задать цвет текста в ярлыке – параметры color
2. Можно задать цвет ярлыка – параметры background
*/
.product_block .product_items_count {
color: #000;
background: #dadada;
}

/*
Цвет рамки блоков – исходный #dadada
1. Можно задать цвет рамки основных блоков – параметры border-color
*/
.pagination .prev, .pagination .next, .pagination, .item_product_block, .help_link, .main_baners, .breadcrumbs, .content_block_header, .content_block {
border-color: #dadada;
}

/*
Цвет шапки блоков – исходный #f9f9f9
*/
.catalog_menu .content_block_content, .pagination .prev, .pagination .next, .content_block_header {
background: #f9f9f9;
}

/*
Цвет текста шапки блока – исходный #000
*/
.container .content_block_title h1, .container .content_block_title {
color: #000;
}

/*
Цвет фона блоков контента – исходный #fff
*/
.item_product_block, .content_block_table tr td.no-hover, .catalog_menu ul.level_1 > li:after, .content_block_content, .content_block_table tr td, .main_baners {
background: #fff;
}

/*
Цвет отбивки внутри блоков – исходный #dadada
*/
.question_answer .comment_text, .product_reviews_block .review, .product_filter .hover .select_block, .product_filter .hover .selected_filter, .product_list_view li, .basket_link a:active, .content_block_content .table td, .basket_link a:hover, .table_block .popup-menu .pmenu-item, .table_block .popup-menu .pmenu-item div, .catalog_menu ul.level_1 > li, .main_menu, .search .search_field, .copyright_text, .content_seo_block, .product_block .product_img, .content_block_table tr td, .left_banner {
border-color: #dadada;
}

Комментарии

для того, чтобы иметь возможность добавлять комментарии, необходимо .

Дмитрий Лычагин      23 июня 2016 13:44

Дмитрий,помогите!!! Изменил цвет в строке 38- теперь все однотонное и ничего не видно! Что делать? Исправить можно?

Мария Власова      23 июня 2016 13:55

Я могу вернуть Вам исходные цвета.
Перед тем как проводить изменения в файле, поэкспериментируйте. О том, как можно это сделать, не нанося сайту вред, написано в статье http://dropshopping.ru/docs/poleznie_soveti/soveti_po_rabote_s_faylom_css_chast_2/

Дмитрий Лычагин      23 июня 2016 13:58

Благодарю! Верните все как было пожалуйста!

Дмитрий Лычагин      23 июня 2016 14:04

Все отлично!

Алина Сагадеева      23 июня 2016 21:57

Помогите и мне, пожалуйста! Я тоже в 9 строке изменила цвет, и ничего не видно. Исправьте, если еще можно)

Мария Власова      23 июня 2016 22:25

Алина, здравствуйте. Исправил.
Если Вы видите в параметре background что-то, не связанное с цветом, прочитайте, что означает этот параметр. Сделать это можно, например, здесь.
В данном случае параметр background на 16 строке имел значение transparent, делающее фон прозрачным. Установив цвет фона, Вы всё "закрасили".

Алина Сагадеева      23 июня 2016 22:39

Спасибо Вам огромное! В след.раз буду внимательнее.

Бисембай      16 июля 2016 14:30

Здравствуйте. верните пожалуйста настройки цвета в исходные, так же как и предыдущие, я не могу восстановить свет

Мария Власова      16 июля 2016 17:30

Бисембай, здравствуйте. Цвет фона вернул к исходному.