Добавление Социальных Иконок, Изменение Размера Логотипа, Изменение Цвета Фона, Увеличение Иконок Товара
#1
Отправлено 17 Июль 2013 - 16:08
Хочу внести изменения!
1. Добавление в шапку социальных иконок.
Выравнивание по левой стороне окошка поиска, расстояние между иконками примерно такое.
2. Изменение цвета фона
На данный момент цвет фона всего сайта #F6F6F4 а нужно сделать #FFFFFF (где это изменить?)
3. Увеличение товара
При просмотре всего товара хотелось бы увеличить размеры иконок, примерно чтобы на разрешении 1680х1050, в один ряд было 4 товара, так как на данный момент очень тяжело разглядеть сами принты на футболках вот тут
4. Сделать ссылки не активными
При наведении к примеру на "ФУТБОЛКИ" Выпадает меню "МУЖКИЕ ФУТБОЛКИ" "ЖЕНСКИЕ ФУТБОЛКИ" и тд. так вот, именно при нажатии на "ФУТБОЛКИ" открывается пустая страница, которая в принципе не нужна. Необходимо сделать так чтобы при наведении на "ФУТБОЛКИ" она была не активной и вообще не работала.
5. Увелечение логотипа и контактов
Увеличение логотипа до примерно такого размера, дальше контакты сместить вправо и разбить на две колонки в левой телефон и мэйл в правой скайп и ася.
6. Изменение цвета полосок
И вопрос на последок, где хранятся данные о цвете всех черных элементов, то есть полосы сверху в списке товара и подвал.
PS. Надеюсь всё расписал понятно, спасибо за внимание, всем удачных изменений, и заранее благодарю того кто ответит! )
#2
Отправлено 17 Июль 2013 - 20:16
origina1 (17 Июль 2013 - 16:08) писал:
Хочу внести изменения!
1. Добавление в шапку социальных иконок.
соц иконки.png
Выравнивание по левой стороне окошка поиска, расстояние между иконками примерно такое.
2. Изменение цвета фона
На данный момент цвет фона всего сайта #F6F6F4 а нужно сделать #FFFFFF (где это изменить?)
3. Увеличение товара
При просмотре всего товара хотелось бы увеличить размеры иконок, примерно чтобы на разрешении 1680х1050, в один ряд было 4 товара, так как на данный момент очень тяжело разглядеть сами принты на футболках вот тут
4. Сделать ссылки не активными
При наведении к примеру на "ФУТБОЛКИ" Выпадает меню "МУЖКИЕ ФУТБОЛКИ" "ЖЕНСКИЕ ФУТБОЛКИ" и тд. так вот, именно при нажатии на "ФУТБОЛКИ" открывается пустая страница, которая в принципе не нужна. Необходимо сделать так чтобы при наведении на "ФУТБОЛКИ" она была не активной и вообще не работала.
5. Увелечение логотипа и контактов
лого.png
Увеличение логотипа до примерно такого размера, дальше контакты сместить вправо и разбить на две колонки в левой телефон и мэйл в правой скайп и ася.
6. Изменение цвета полосок
И вопрос на последок, где хранятся данные о цвете всех черных элементов, то есть полосы сверху в списке товара и подвал.
PS. Надеюсь всё расписал понятно, спасибо за внимание, всем удачных изменений, и заранее благодарю того кто ответит! )
1. Зайдите в раздел Сайт-Редактор шаблонов. Откройте шаблон HTML, найдите код
<!-- Форма поиска --> <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> <!-- /Форма поиска -->после него вставьте такой код
<!-- Иконки соц.сетей --> <div class="socialIcons"> <a href="http://vk.com/vfutbolke_rf" target="_blank"> <img alt="" src="http://files.storeland.ru/web/upload/sitefiles/6/554/553289/vk.png" /> </a> <a href="http://facebook.com/Vfutbolke" target="_blank"> <img alt="" src="http://files.storeland.ru/web/upload/sitefiles/6/554/553287/fb.png" /> </a> <a href="http://www.odnoklassniki.ru/vfutbolke.rf" target="_blank"> <img alt="" src="http://files.storeland.ru/web/upload/sitefiles/6/554/553288/ok.png" /> </a> <!-- И так далее --> </div> <!-- /Иконки соц.сетей -->Где каждый участок кода вида
<a href="http://vk.com/vfutbolke_rf" target="_blank"> <img alt="" src="http://files.storeland.ru/web/upload/sitefiles/6/554/553289/vk.png" /> </a>является картинкой-ссылкой. Надо прописать для иконок стили. Для этого откройте шаблон style.css и в конец допишите такой код
.socialIcons { float: right; margin-top: 75px; width: 32.5em; } .socialIcons img{ width: 50px; height: 50px; margin-right:10px; border-radius: 8px; }Здесь в .socialIcons описание блока, содержащего иконки (местоположение, ширина). В .socialIcons img описаны сами иконки: width: 50px; - ширина иконки, height: 50px; - ее высота, margin-right:10px; - отступ от иконки справа, border-radius: 8px; - закругление уголков.
2. В style.css ~406 строка
.bg {background: #f6f6f4;}3. Не совсем понял, но кажется вам надо в Настройки - Основные. Подраздел "Изображения товаров", поставите для маленьких изображений максимальный размер побольше и потом в шаблоне "Товары" в строке
<figure style="width: 20%;height: 100%;float: left; clear: both; position: relative; overflow: hidden;">увеличьте параметр width: 20%;
Остальное чуть позже.
#3
Отправлено 17 Июль 2013 - 20:21
<!-- Каталог товаров --> <div class="conta"> <a class="toggleMenu" href="#">Каталог</a> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}<ul>{% ENDIF %} <li {% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %}> <a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a><span class="icons" {% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {%ENDFOR%} {%ENDIF%} </div> <!-- /Каталог товаров -->измените строчку
<a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a><span class="icons" {% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span>на эту
<a {% IF catalog_full.GOODS_COUNT > 0 %} href="{catalog_full.URL}" {% ELSEIF %} href="#" {% ENDIF %}{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a><span class="icons" {% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span>
#4
Отправлено 17 Июль 2013 - 21:12
header[role="banner"] .hgroup {position: absolute; top: 1em; left: 1em; width: 39.877301%;}измените так
header[role="banner"] .hgroup {position: absolute; top: 1em; left: 1em; width: 55%;}А в конец шаблона добавьте такой код
header[role="banner"] .hgroup h1 a{ width: 90%; } header[role="banner"] .hgroup img { width: inherit; }Где, увеличивая width: 90%; вы увеличите логотип.
Теперь с контактами. В style.css код
.contacts{float: left;position: relative;}замените на
.contacts{float: left;position: relative; font-size: 12pt; }В HTML после строчки
<div class="contacts">вставьте такой код
<table> <tr> <td>далее после кода
<!-- Время работы магазина --> {% IF SETTINGS_STORE_WORK_TIME %} <div class="work-time" title="Время работы нашего магазина: {SETTINGS_STORE_WORK_TIME}"> {SETTINGS_STORE_WORK_TIME} </div> {% ENDIF %}вставьте такой код
</td> <td style="padding-top: 1px;">А после
<!-- ICQ номер --> {% IF SETTINGS_STORE_ICQ %} <div class="contentTableHeadMainIcq"> <img class="valignMiddle" src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&img=27" alt="Статус" width="16" height="16" /> <span class="valignMiddle">{SETTINGS_STORE_ICQ}</span> </div> {% ENDIF %}вставьте такой код
</td> </tr> </table>
6. В style.css
.global {background: #000;padding: 10px}background: #000; - цвет фона верхнего меню.
.nav {list-style: none;*zoom: 1;background:#000;z-index:30;position: relative;}background:#000; - цвет фона каталога.
footer {clear: both;background: #0f0f0f;overflow: hidden;padding: 1.5em 0;color: #e6e4da;width: 100%;}background: #0f0f0f; - цвет фона подвала.
Ура.
#5
Отправлено 18 Июль 2013 - 11:01
2. Изменение цвета фона готово
3. Увеличение товара,
Получилось вот так - почему то товар заходит друг на друга
4. Сделать ссылки не активными
Всё получилось, вот один нюанс, при наведении курсора он превращается в курсор выделителя, нужно сделать так чтобы курсор оставался курсором при наведении на "ФУТБОЛКИ"
5. Увелечение логотипа и контактов
Лого увеличил, а вот контакты после всей процедуры просто исчезли, пробывал несколько раз, одна и та же ситуация.
PS. ВИРТУАЛЬНО ЖМУ РУКУ И БЛАГОДАРСТВУЮ ! )
#6
Отправлено 18 Июль 2013 - 14:05
origina1 (18 Июль 2013 - 11:01) писал:
2. Изменение цвета фона готово
3. Увеличение товара,
Получилось вот так - почему то товар заходит друг на друга
4. Сделать ссылки не активными
Всё получилось, вот один нюанс, при наведении курсора он превращается в курсор выделителя, нужно сделать так чтобы курсор оставался курсором при наведении на "ФУТБОЛКИ"
5. Увелечение логотипа и контактов
Лого увеличил, а вот контакты после всей процедуры просто исчезли, пробывал несколько раз, одна и та же ситуация.
PS. ВИРТУАЛЬНО ЖМУ РУКУ И БЛАГОДАРСТВУЮ ! )
А для табличного вида надо вот что. В шаблоне товары у вас есть 2 строчки
<div class="items" style="float:left; width:173px;margin: 10px;background: #fff;padding:10px;"> <figure style="width: 150%;position: relative;overflow:hidden;">Я так понимаю вторая - та , которую вы редактировали. Вот в ней ширину надо поставить 100%, а ширину в первой строчке поставить побольше. Тогда изображения станут больше, не будут вылезать за границы, но товаров в строку будет меньше.
Т.е. Примерно так
<div class="items" style="float:left; width:260px;margin: 10px;background: #fff;padding:10px;"> <figure style="width: 100%;position: relative;overflow:hidden;">4. В style.css код
.nav > li > a {display: block; top: -1px;}замените на
.nav > li > a {display: block; top: -1px; cursor: pointer;}5. Сам только что сделал по инструкции, все нормально.
Инструкция по разделению контактов - это вот эта часть:
В HTML после строчки
<div class="contacts">вставьте такой код
<table> <tr> <td>далее после кода
<!-- Время работы магазина --> {% IF SETTINGS_STORE_WORK_TIME %} <div class="work-time" title="Время работы нашего магазина: {SETTINGS_STORE_WORK_TIME}"> {SETTINGS_STORE_WORK_TIME} </div> {% ENDIF %}вставьте такой код
</td> <td style="padding-top: 1px;">А после
<!-- ICQ номер --> {% IF SETTINGS_STORE_ICQ %} <div class="contentTableHeadMainIcq"> <img class="valignMiddle" src="[url="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&img=27"]http://wwp.icq.com/s...TS}&img=27"[/url] alt="Статус" width="16" height="16" /> <span class="valignMiddle">{SETTINGS_STORE_ICQ}</span> </div> {% ENDIF %}вставьте такой код
</td> </tr> </table>Возможно, возникла путаница со вставкой последнего блока кода. Он должен быть вот тут:
#7
Отправлено 18 Июль 2013 - 15:06
#8
Отправлено 18 Август 2013 - 14:07
не получилось поставить "контакты" должным образом, думаю разница в коде у нас изначала была (с автором)
Съехала полоска "Поиск" к логотипу, контакты вовсе исчезли.
SL-125918 мой аккаунт.
И так, прошу помощи:
1. Расположение "Контакты" как у автора темы (поиск вернуть на место)
2. Товары в категориях "пляшут", имеют разный размер. Как установить единый размер для всевозможных товаров, так , чтобы даже товар со скидкой был на ровне с другими товарами? (Вот пример)
Спасибо за помощь!
#9
Отправлено 18 Август 2013 - 14:39
header[role="banner"] .hgroup { position: absolute; top: 5px; left: 1em; width: 30%; }и замените его на
header[role="banner"] .hgroup { position: absolute; top: 5px; left: 1em; width: 100%; }Теперь найдите блок
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; height: 150px; }2. В шаблоне Товары найдите блок
{% FOR goods %} <div class="items" style="float:left; width:173px;margin: 10px;background: #fff;padding:10px;"> <figure style="width: 173px;position: relative;overflow:hidden; ">и замените его на
{% FOR goods %} <div class="items" style="float:left; width:173px;margin: 10px;background: #fff;padding:10px;"> <figure style="width: 173px;position: relative;overflow:hidden; height:200px;">
#10
Отправлено 18 Август 2013 - 15:26
1. Расположение "Контакты" как у автора темы (поиск вернуть на место) - Готово!
2. Не получилось. Отодвигается описание к картинкам в каталоге. Но их месторасположение относительно друг друга осталось не закрепленным
#11
Отправлено 18 Август 2013 - 16:17
Stasya (18 Август 2013 - 14:39) писал:
header[role="banner"] .hgroup { position: absolute; top: 5px; left: 1em; width: 30%; }и замените его на
header[role="banner"] .hgroup { position: absolute; top: 5px; left: 1em; width: 100%; }Теперь найдите блок
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; height: 150px; }2. В шаблоне Товары найдите блок
{% FOR goods %} <div class="items" style="float:left; width:173px;margin: 10px;background: #fff;padding:10px;"> <figure style="width: 173px;position: relative;overflow:hidden; ">и замените его на
{% FOR goods %} <div class="items" style="float:left; width:173px;margin: 10px;background: #fff;padding:10px;"> <figure style="width: 173px;position: relative;overflow:hidden; height:200px;">
1. Расположение "Контакты" как у автора темы (поиск вернуть на место) - Готово!
2. Не получилось. Отодвигается описание к картинкам в каталоге. Но их месторасположение относительно друг друга осталось не закрепленным
#12
Отправлено 18 Август 2013 - 17:59
<!-- Проходим по массиву списка товаров --> {% FOR goods %} <div class="items" style="float:left; width:173px;margin: 10px;background: #fff;padding:10px;">и замените его на
<!-- Проходим по массиву списка товаров --> {% FOR goods %} <div class="items" style="float:left; width:173px;margin: 10px;background: #fff;padding:10px;height:400px;">
#13
Отправлено 22 Август 2013 - 14:44
При просмотре каталога таблицей - все ок, а вот списком- такая чертовщина появляется
#14
Отправлено 22 Август 2013 - 19:00
<!-- Если отображаем товары таблицей --> {% ELSE %} <!-- Проходим по массиву списка товаров --> {% FOR goods %} <div class="items" style="float:left; width:173px;margin: 10px;background: #fff;padding:10px;">и замените его на
<!-- Если отображаем товары таблицей --> {% ELSE %} <!-- Проходим по массиву списка товаров --> {% FOR goods %} <div class="items" style="float:left; width: 97%;margin: 10px;background: #fff;padding:10px;">
Теперь в файле style.css найдите строку
.buy-item {clear: both; overflow: hidden; margin-bottom: 1em; bottom: 0; position: absolute;}и замените его на
.buy-item {clear: both; overflow: hidden; margin-bottom: 1em; bottom: 0; position: relative;}
#16
Отправлено 05 Июнь 2014 - 14:51
в фаиле style.css в самом низу пропишите
.hgroup h1 img { width:120%; padding-top: 40%; }и в строке 432, того же фаила css убрать значение max-width: 100%; конечное правило должно выглядеть так
img { height: auto;}
#17
Отправлено 06 Июнь 2014 - 07:16
#18
Отправлено 06 Июнь 2014 - 07:50
Никита (06 Июнь 2014 - 07:16) писал:
Последний шаг отмените, далее находим код:
header[role="banner"] h1 a { height: 127px; width: 150px; display: block; font: normal 26px ''; line-height: 20px; color: #000; font-weight: bold; text-align: center; }
и меняем на:
header[role="banner"] h1 a { height: 127px; width: 200px; display: block; font: normal 26px ''; line-height: 20px; color: #000; font-weight: bold; text-align: center; }
#19
Отправлено 07 Июнь 2014 - 14:31
в строке 432, того же фаила css убрать значение max-width: 100%; конечное правило должно выглядеть так
img { height: auto;}
?
если я правильно понял, сделал как вы и сказали. подскажите ещё 1. как поднять логотип чтобы он был примерно по центру банера в облости 1
и 2. как вернуть баннер чтобы он занимал облость 2?
#20
Отправлено 07 Июнь 2014 - 14:48
Никита (07 Июнь 2014 - 14:31) писал:
в строке 432, того же фаила css убрать значение max-width: 100%; конечное правило должно выглядеть так
img { height: auto;}
?
если я правильно понял, сделал как вы и сказали. подскажите ещё 1. как поднять логотип чтобы он был примерно по центру банера в облости 1
и 2. как вернуть баннер чтобы он занимал облость 2?
.hgroup h1 img { width:120%; padding-top: 40%; }и замените их на:
.hgroup h1 img { width:120%; padding-top: 30%; }
Затем, в nyvo.css найдите строки:
.nivoSlider { position:relative; right: -70px; width:990px; /*ширина*/ height:130px; /*длина*/ overflow: hidden; }и замените их на:
.nivoSlider { position:relative; right: -20px; width:990px; /*ширина*/ height:130px; /*длина*/ overflow: hidden; }-20 можете изменить на значение, приемлемое для вас.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных