Отображение Изображений В Каталоге
#1
Отправлено 10 Июнь 2013 - 02:28
Мне нужно чтобы картинка и описание были такого размера как во вложении.
#2
Отправлено 10 Июнь 2013 - 08:33
natishka (10 Июнь 2013 - 02:28) писал:
Мне нужно чтобы картинка и описание были такого размера как во вложении.
Изменим на 20% ширину блоков
Найдите в style.css код:
.items .item-detail { float: left; width: 55.15427%; margin-right: 2.1322314%; margin-left: 2.1322314%; }и замените на:
.items .item-detail { float: left; width: 35.15427%; margin-right: 2.1322314%; margin-left: 2.1322314%; }- это описание
Найдите код в шаблоне Товары:
<!-- Если отображаем товары таблицей --> {% ELSE %} <!-- Проходим по массиву списка товаров --> {% FOR goods %} <div class="items" style="width:97%; margin: 10px; padding: 10px; clear: both; display:block;line-height: 1; position: relative;border-top: 1px solid #d5d5d5;background: #fff;"> <figure style="width: 20%;height: 100%;float: left; clear: both; position: relative; overflow: hidden;">и замените на:
<!-- Если отображаем товары таблицей --> {% ELSE %} <!-- Проходим по массиву списка товаров --> {% FOR goods %} <div class="items" style="width:97%; margin: 10px; padding: 10px; clear: both; display:block;line-height: 1; position: relative;border-top: 1px solid #d5d5d5;background: #fff;"> <figure style="width: 40%;height: 100%;float: left; clear: both; position: relative; overflow: hidden;">- это изображение
#3
Отправлено 15 Июнь 2013 - 13:38
Появились еще вопросы:
1. Как уменьшить ширину полоски меню, нужно сделать ее такой же по ширине как и полоска каталога(см. картинку 1)
2. Я что-то нахимичила и у меня исчез поиск. Пыталась его убрать совсем. Нужно вернуть обратно и переместить в строку с каталогом в право. (см. рисунок 2)
3.Между меню и каталогом нужно вставить статичный баннер (зеленый прямоугольник на кратинке 2).
4. Как изменить цвет полоски на белый (выделено красным на рис.2)?
5. Нужно сделать цвет подвала таким же кориченевым как и шапка.
6. Как изменить цвет корзины в правом верхнем углу (выделено синим на рис.2)?
#4
Отправлено 15 Июнь 2013 - 16:16
natishka16 (15 Июнь 2013 - 13:38) писал:
Появились еще вопросы:
1. Как уменьшить ширину полоски меню, нужно сделать ее такой же по ширине как и полоска каталога(см. картинку 1)
2. Я что-то нахимичила и у меня исчез поиск. Пыталась его убрать совсем. Нужно вернуть обратно и переместить в строку с каталогом в право. (см. рисунок 2)
3.Между меню и каталогом нужно вставить статичный баннер (зеленый прямоугольник на кратинке 2).
4. Как изменить цвет полоски на белый (выделено красным на рис.2)?
5. Нужно сделать цвет подвала таким же кориченевым как и шапка.
6. Как изменить цвет корзины в правом верхнем углу (выделено синим на рис.2)?
1. Найдите код в style.css:
.global { background: #5e4646; padding: 10px; }и замените на:
.global { background: #5e4646; padding: 10px; width: 88.6%; margin: 0 auto; }
2.
Измените код поиска на такой.:
<!-- Форма поиска --> <form action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;" role="search"> <div> <input class="search" name="q" type="search" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" /> <input title="Искать" type="submit" value="Поиск" /> </div> </form> <!-- /Форма поиска -->
3. Найдите код в style.css:
header[role="banner"] { position: relative; min-height: 10em; overflow: hidden; z-index: 10; }и замените на:
header[role="banner"] { position: relative; min-height: 10em; overflow: hidden; z-index: 10; background: green; /*цвет*/ }
4. В коде -
header.controls { padding: 1em; background: #F1F1F0 !important; margin-bottom: 0em; }поменяйте код цвета - #F1F1F0
5. Найдите код:
footer { clear: both; background: #0f0f0f; overflow: hidden; padding: 1.5em 0; color: #e6e4da; width: 100%; }и замените на:
footer { clear: both; background: #5e4646; overflow: hidden; padding: 1.5em 0; color: #e6e4da; width: 100%; }
6. В коде:
.summary a { color: #ffe4ab; background: #0f0f0f; /*ваш цвет*/ padding: 1.75em 1em 1.5em; position: absolute; right: 0; top: -4.2em; display: block; text-align: center; width: 13.333em; }
#5
Отправлено 16 Июнь 2013 - 09:47
2. НЕ получилось переместить поиск и он как отсутствовал так и остался невидимым. Код вставила, но ничего не поменялось, не переместился.
3. Я не так выразилась мне в шапку нужно не цвет фона поменять, а именно вставить картинку, например на как во вложении. Как это сделать?
#6
Отправлено 16 Июнь 2013 - 11:55
natishka16 (16 Июнь 2013 - 09:47) писал:
2. НЕ получилось переместить поиск и он как отсутствовал так и остался невидимым. Код вставила, но ничего не поменялось, не переместился.
3. Я не так выразилась мне в шапку нужно не цвет фона поменять, а именно вставить картинку, например на как во вложении. Как это сделать?
2. Найдите код:
<!-- Форма поиска --> <form action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;" role="search"> <div> <input class="search" name="q" type="search" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" /> <input title="Искать" type="submit" value="Поиск" /> </div> </form> <!-- /Форма поиска -->в шаблоне HTML
и удалите
Найдите код:
<div class="conta">и замените на:
<div class="conta"> <!-- Форма поиска --> <form action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;" role="search"> <div> <input class="search" name="q" type="search" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" /> <input title="Искать" type="submit" value="Поиск" /> </div> </form> <!-- /Форма поиска -->
Найдите код в style.css:
form[role="search"] { position: absolute; right: 2em; top: 2.5em; }и замените на:
form[role="search"] { position: absolute; right: 2em; top: 0.5em; z-index: 999; }
Найдите код:
form[role="search"] input[type="search"], input#search-field, .search { display: none; vertical-align: middle; -webkit-appearance: textfield; -webkit-box-sizing: content-box; border: none; width: 81% !important; height: 2.429em; font-size: 1.167em; color: #8a8a8a; position: absolute; z-index: 1; padding: 0 0.417em; margin: 0; -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17); -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17); box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17); }и замените на:
form[role="search"] input[type="search"], input#search-field, .search { vertical-align: middle; -webkit-appearance: textfield; -webkit-box-sizing: content-box; border: none; width: 81% !important; height: 2.429em; font-size: 1.167em; color: #8a8a8a; position: absolute; z-index: 1; padding: 0 0.417em; margin: 0; -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17); -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17); box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17); }
3. Найдите код в style.css:
.global { background: #5e4646; padding: 10px; width: 88.6%; margin: 0 auto; }и замените на:
.global { background: url("путь до изображения"); padding: 10px; width: 88.6%; margin: 0 auto; }Не забудьте загрузить изображение в бэкофис и указать в коде путь до изображения
#7
Отправлено 20 Июнь 2013 - 07:10
Еще несколько вопросов
По верхнему меню(.global):
1. Как в верхнем меню сделать нижнюю границу ?
2. Как менять положение вкладок в в верхнем меню (допустим я хочу чтобы вкладки"Главная", "Меню" и т.д. были выровнены по левому краю).
3. Как изменить цвет и размер шрифта в меню?
4. Как изменить размер корзины в верхнем меню?
5. Как изменить шрифт (размер и цвет) корзины в меню?
По меню каталога:
6. Необходимо растянуть вкладки по всей ширине меню.
7. Как сделать разделители между вкладками?
8. Могу ли я сделать подобное меню(см.вложение"меню каталога). Каким образом?
9. Как уменьшить расстояние между верхним меню и меню каталога?
#8
Отправлено 20 Июнь 2013 - 11:53
Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Добавить в конец файла код:
.global { border-bottom: 1px solid black; }2. Можно просто перетаскивать пункты меню в разделе Сайт-> Меню.
3.
В файле "main.css".
Добавить в конец файла код:
.global .head a { color: green;/*цвет*/ font-size: 14px;/*размер*/ }4.
Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Добавить в конец файла код:
.summary a { width: 149px;/*ширина */ height: 31px;/*высота*/ }5.
Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Добавить в конец файла код:
.summary a { width: 149px;/*ширина */ height: 31px;/*высота*/ font-size: 10px;/*размер шрифта*/ color: green;/*цвет шрифта*/ }6, 7. К сожалению корректно расстянуть вкладки не получится.
Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Добавить в конец файла код:
.nav > li { border-right: 1px solid white;/*цвет разделителя.*/ margin-right: 3%;/*отступ справа*/ padding-right: 1%; }8. С этим вопросом лучше обратиться в дизайн студию.
9.
В файле "main.css".
Добавить в конец файла код:
header[role="banner"] { min-height: 9em;/*высота блока с банерами*/ }
#9
Отправлено 03 Июль 2013 - 04:08
1. На этих страницах
http://s779843.storeland.ru/cart
http://s779843.storeland.ru/feedback
http://s779843.store.../stage/contacts
подвал не сдвигается вниз
2. На продуктовых страницах
например
http://s779843.store...-s-shampinonami
Пропала кнопка "Заказать" и появилась второе поле "Количество"
#10
Отправлено 03 Июль 2013 - 05:14
.bg > .container { min-height: 600px; }
так же замените код вашего шаблона "Связь с администрацией" на следующий код шаблона (по умолчанию)
<div class="span7 breadcrumbs hidden-phone"> <ul> <li><a href="http://{NET_DOMAIN}/" title="Перейти на главную">Главная</a><span> </span></li> <li><strong>Связь с администрацией</strong></li> </ul> </div> <div class="span7 col-main"> <div class="feedback"> <div class="page-title"> <h2> {% IF FORM_SEND_OK %} Ваше сообщение успешно отправлено администрации магазина {% ELSE %} Связь с администрацией {% ENDIF %} </h2> </div> {% IF FORM_NOTICE %}<ul class="messages"><li class="{% IF FORM_NOTICE_IS_GOOD %}success-msg{% ELSE %}error-msg{% ENDIF %}">{FORM_NOTICE | nl2br}</li></ul>{% ENDIF %} <form method="post" action="{FEEDBACK_URL}" class="feedbackForm" enctype="multipart/form-data"> {% IFNOT FORM_SEND_OK %} <div class="fieldset"> <input type="hidden" name="hash" value="{HASH}" /> <!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации --> {ANTISPAM_CODE} <h2 class="legend" title="Ваши персональные данные">Сообщение администрации магазина</h2> <ul class="form-list"> <li class="fields"> <div class="customer-name"> <div class="field name-firstname"> <label for="feedback_name" class="required"><em>*</em>Представьтесь пожалуйста</label> <div class="input-box"> <input id="feedback_name" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_NAME}]" value="{FORM_FEEDBACK_NAME}" maxlength="50" class="input-text required"/> </div> </div> <div class="field name-lastname"> <label for="feedback_email" class="required"><em>*</em>Электронная почта</label> <div class="input-box"> <input id="feedback_email" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_EMAIL}]" value="{FORM_FEEDBACK_EMAIL}" maxlength="255" class="required email input-text"/> </div> </div> </div> </li> <li class="wide"> <div class="clear"></div> <label for="feedback_message" class="required"><em>*</em>Текст сообщения</label> <div class="input-box"> <textarea id="feedback_message" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_MESSAGE}]" class="required">{FORM_FEEDBACK_MESSAGE}</textarea> </div> <li> <li class="wide"> <label for="feedback_file" class="required">Прикрепить файл</label> <div class="input-box"> <input id="feedback_file" type="file" name="form[assets_file]" value="" style="height:auto;border:0px;" /> </div> </li> </ul> </div> {% ENDIF %} <div class="buttons-set"> {% IFNOT FORM_SEND_OK %}<p class="required">* Обязательные поля</p>{% ENDIF %} <p class="back-link"><a href="http://{NET_DOMAIN}/">Перейти на главную</a></p> {% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="button"><span><span>Отправить</span></span></button>{% ENDIF %} </div> </form> </div> </div>
В файле стилей main.css найдите
.buy-item button { background: url("http://s779843.storeland.net/icons.png") no-repeat scroll 10% -552px #13AF13; border: medium none; color: #FFFFFF; display: inline-block; font-size: 100%; font-weight: normal; letter-spacing: 1px; line-height: 1; margin: auto auto auto 870px; overflow: visible; padding: 0.714em 1em 0.714em 2.5em; text-align: center; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); text-transform: uppercase; width: auto; }
и замените на
.buy-item button { background: url("http://s779843.storeland.net/icons.png") no-repeat scroll 10% -552px #13AF13; border: medium none; color: #FFFFFF; display: inline-block; font-size: 100%; font-weight: normal; letter-spacing: 1px; line-height: 1; margin: auto; overflow: visible; padding: 0.714em 1em 0.714em 2.5em; text-align: center; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); text-transform: uppercase; width: auto; }
#11
Отправлено 03 Июль 2013 - 06:05
2. Календарь некорректно отображается, фона нет. (см. вложение)
http://s779843.store.../stage/delivery
3. И также подвал наезжает на контент. http://s779843.store.../stage/delivery
4. Теперь кнопка тут поехала
http://s779843.store.../catalog/Salaty
#12
Отправлено 03 Июль 2013 - 06:31
natishka (03 Июль 2013 - 06:05) писал:
2. Календарь некорректно отображается, фона нет. (см. вложение)
http://s779843.store.../stage/delivery
3. И также подвал наезжает на контент. http://s779843.store.../stage/delivery
4. Теперь кнопка тут поехала
http://s779843.store.../catalog/Salaty
1) в каком браузере у Вас так отображается?
2) Возможно эта ошибка не только у Вас. Ошибка перенаправлена Разработчикам
3) Найдите код в style.css:
.bg > .container { min-height: 600px; }и замените на:
.bg > .container { min-height: 739px; }
4. Где кнопка должна быть? Сверху? или между изображением и названием товара?
#13
Отправлено 10 Август 2013 - 05:44
#14
Отправлено 10 Август 2013 - 07:17
natishka16 (10 Август 2013 - 05:44) писал:
4) Найдите код в style.css -
form { position: absolute; right: 2em; top: 0.5em; z-index: 999; top: 50px; left: 10px; right: 20px; }и замените на -
form { right: 2em; top: 0.5em; z-index: 999; top: 50px; left: 10px; right: 20px; }
#15
Отправлено 12 Август 2013 - 07:17
На широкоформатном мониторе и в нормальном браузере все норм.
#18
Отправлено 13 Август 2013 - 03:01
html, body { min-width: 980px; background: #FFFFFF !important; }
#19
Отправлено 13 Август 2013 - 03:04
#20
Отправлено 13 Август 2013 - 03:10
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных