Изменения Главной Страницы
#1
Отправлено 10 Декабрь 2014 - 14:49
Есть несколько вопросов по изменению главной страницы.
1. Как поменять цвет поиска?
2. Как поменять цвет категорий товаров и выровнять эти категории по центру.
3. Выровнять по центру Верхнее меню
4. Максимально сузить
#2
Отправлено 10 Декабрь 2014 - 15:14
VID61 (10 Декабрь 2014 - 14:49) писал:
Есть несколько вопросов по изменению главной страницы.
1. Как поменять цвет поиска?
2. Как поменять цвет категорий товаров и выровнять эти категории по центру.
3. Выровнять по центру Верхнее меню
4. Максимально сузить
Все изменения производим в шаблоне main.css :
1. Найдите код:
input[type='search'] { position: relative; right: -36px; border: 1px solid #ebebeb; box-shadow: 0 2px 1px #f0f0f0; line-height: 16px; }И замените его этим кодом:
input[type='search'] { position: relative; right: -36px; border: 1px solid #ebebeb; box-shadow: 0 2px 1px #f0f0f0; line-height: 16px; background: #008FCD; }Ищем следующий код:
.searchBtn.btn { position: relative; z-index: 10; left: -2px; width: 32px; height: 26px; cursor: pointer; background: url('http://design.5pokupok.ru/sprites2.png?design=snow') no-repeat 4px -94px; background-color: white; border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }И заменяем его:
.searchBtn.btn { position: relative; z-index: 10; left: -2px; width: 32px; height: 26px; cursor: pointer; background: url('http://design.5pokupok.ru/sprites2.png?design=snow') no-repeat 4px -94px; /* background-color: white; */ border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }2. Ищем код:
.navSelect.nav { width: 100%; }И заменяем его вот этим:
.navSelect.nav { width: 100%; margin-left: 400px; }Находим такой код:
.menuResp a { color: #666; display: inline-block; font-size: 14px; line-height: 1.1em; padding: 10px 10px; text-align: left; text-decoration: none; white-space: nowrap; }И заменяем его:
.menuResp a { color: #0E509B; display: inline-block; font-size: 14px; line-height: 1.1em; padding: 10px 10px; text-align: left; text-decoration: none; white-space: nowrap; }3. Находим следующий код:
ul.head, nav.footer-menu ul { display: inline-block; float: left; margin: 0; padding: 0; list-style: none outside none; }И заменяем его этим кодом:
ul.head, nav.footer-menu ul { display: inline-block; float: left; margin: 0; padding: 0; list-style: none outside none; margin-left: 150px; }4. Ищем ещё код:
.body-content-top { left: 0; width: 100%; height: 98px; margin-top: -1px; border: 0; border-bottom: 1px solid #dbdbdb; background: #f7f7f7; margin-bottom: 15px; }И заменяем его:
.body-content-top { left: 0; width: 100%; height: 62px; margin-top: -1px; border: 0; border-bottom: 1px solid #dbdbdb; background: #f7f7f7; margin-bottom: 15px; }Найдите вот такой код:
.body-content-top-center { padding: 1.5em .6em 0 .6em; padding-top: 1.5em; }И замените его:
.body-content-top-center { padding: 1.5em .6em 0 .6em; padding-top: 0.5em; }
#3
Отправлено 10 Декабрь 2014 - 15:54
RayLi (10 Декабрь 2014 - 15:14) писал:
Все изменения производим в шаблоне main.css :
1. Найдите код:
input[type='search'] { position: relative; right: -36px; border: 1px solid #ebebeb; box-shadow: 0 2px 1px #f0f0f0; line-height: 16px; }И замените его этим кодом:
input[type='search'] { position: relative; right: -36px; border: 1px solid #ebebeb; box-shadow: 0 2px 1px #f0f0f0; line-height: 16px; background: #008FCD; }Ищем следующий код:
.searchBtn.btn { position: relative; z-index: 10; left: -2px; width: 32px; height: 26px; cursor: pointer; background: url('http://design.5pokupok.ru/sprites2.png?design=snow') no-repeat 4px -94px; background-color: white; border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }И заменяем его:
.searchBtn.btn { position: relative; z-index: 10; left: -2px; width: 32px; height: 26px; cursor: pointer; background: url('http://design.5pokupok.ru/sprites2.png?design=snow') no-repeat 4px -94px; /* background-color: white; */ border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }2. Ищем код:
.navSelect.nav { width: 100%; }И заменяем его вот этим:
.navSelect.nav { width: 100%; margin-left: 400px; }Находим такой код:
.menuResp a { color: #666; display: inline-block; font-size: 14px; line-height: 1.1em; padding: 10px 10px; text-align: left; text-decoration: none; white-space: nowrap; }И заменяем его:
.menuResp a { color: #0E509B; display: inline-block; font-size: 14px; line-height: 1.1em; padding: 10px 10px; text-align: left; text-decoration: none; white-space: nowrap; }3. Находим следующий код:
ul.head, nav.footer-menu ul { display: inline-block; float: left; margin: 0; padding: 0; list-style: none outside none; }И заменяем его этим кодом:
ul.head, nav.footer-menu ul { display: inline-block; float: left; margin: 0; padding: 0; list-style: none outside none; margin-left: 150px; }4. Ищем ещё код:
.body-content-top { left: 0; width: 100%; height: 98px; margin-top: -1px; border: 0; border-bottom: 1px solid #dbdbdb; background: #f7f7f7; margin-bottom: 15px; }И заменяем его:
.body-content-top { left: 0; width: 100%; height: 62px; margin-top: -1px; border: 0; border-bottom: 1px solid #dbdbdb; background: #f7f7f7; margin-bottom: 15px; }Найдите вот такой код:
.body-content-top-center { padding: 1.5em .6em 0 .6em; padding-top: 1.5em; }И замените его:
.body-content-top-center { padding: 1.5em .6em 0 .6em; padding-top: 0.5em; }
По второму и третьему вопросу, не правильное решение.
т.к. при добавлении категорий товара и пунктов в главное меню, все съезжает в право, а не выравнивается по центру.
#5
Отправлено 10 Декабрь 2014 - 16:25
В главном меню не стал производить изменения т,к. то что вы предложили не то что нужно.
Необходимо, чтоб при добавлении категорий в каталог и разделов меню, все центровалось.
#6
Отправлено 10 Декабрь 2014 - 16:33
VID61 (10 Декабрь 2014 - 16:25) писал:
В главном меню не стал производить изменения т,к. то что вы предложили не то что нужно.
Необходимо, чтоб при добавлении категорий в каталог и разделов меню, все центровалось.
Найдите в том же шаблоне, main.css , код:
ul.head, nav.footer-menu ul { display: inline-block; float: left; margin: 0; padding: 0; list-style: none outside none; }И замените его вот этим кодом:
ul.head, nav.footer-menu ul { display: inline-block; float: left; margin: 0; padding: 0; list-style: none outside none; margin-left: 14%; }Теперь найдите этот код:
.navSelect.nav { width: 100%; margin-left: 400px; }И замените его:
.navSelect.nav { width: 100%; margin-left: 34%; }
#8
Отправлено 11 Декабрь 2014 - 10:40
VID61 (11 Декабрь 2014 - 10:06) писал:
Нужна срочно помощь специалиста, который точно знает как это сделать.
ul.navSelect.menuResp.nav { width: 590px; margin: auto; }
#9
Отправлено 11 Декабрь 2014 - 10:54
Alekseys (11 Декабрь 2014 - 10:40) писал:
ul.navSelect.menuResp.nav { width: 590px; margin: auto; }
А можно реализовать такое
1 Уменьшить шрифт названия страниц
2 Перенести адресную строку влево
3 Поднять корзину в главное меню
4 И теперь чтоб каталог ровнялся по центру
#12
Отправлено 11 Декабрь 2014 - 13:01
VID61 (11 Декабрь 2014 - 12:34) писал:
.body-content-top-center h1 { font-size: 2em; font-weight: normal; margin-top: 0; color: #444; }на
.body-content-top-center h1 { font-size: 26px; font-weight: normal; margin-top: 0; color: #444; }2. В main.css замените
.body-top-right { line-height: 3.5; float: right; }на
.body-top-right { line-height: 3.5; float: left; margin-left: 20px; }3. В шаблоне HTML перенесите
<div class="header-container"> <div class="header-inner"> <!-- Блок навигации --> {% IFNOT menu_empty %} <nav class="head"> <ul class="head"> {% FOR menu %} {% FOR header %} {% FOR links %} <li> <a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a> </li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> <a href="#" class="pull">Меню</a><!-- Появляется только при маленьких разрешениях экрана -->4. В main.css замените
.sectionblock-container { display: inline-block; float: left; width: 88%; }на
.sectionblock-container { display: inline-block; float: left; width: 100%; }и добавьте
.navSelect.menuResp.nav { width: 420px; margin: auto; }параметром width: 420px; отредактируйте ширину меню так, чтоб все пункты располагались в одну строку, не больше.
#13
Отправлено 11 Декабрь 2014 - 14:37
Перешел на другой шаблон.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных