Перейти к содержимому


Добавление Социальных Иконок, Изменение Размера Логотипа, Изменение Цвета Фона, Увеличение Иконок Товара

Добавление социальных иконок изменение размера логотипа изменение цвета фона увеличение иконок товара

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 20

#1 origina1

origina1

    Пользователь

  • Пользователи
  • PipPip
  • 46 сообщений

Отправлено 17 Июль 2013 - 16:08

Доброго дня! Проект ВФУТБОЛКЕ.РФ

Хочу внести изменения!

1. Добавление в шапку социальных иконок.

соц иконки.png

Выравнивание по левой стороне окошка поиска, расстояние между иконками примерно такое.

2. Изменение цвета фона

На данный момент цвет фона всего сайта #F6F6F4 а нужно сделать #FFFFFF (где это изменить?)

3. Увеличение товара

При просмотре всего товара хотелось бы увеличить размеры иконок, примерно чтобы на разрешении 1680х1050, в один ряд было 4 товара, так как на данный момент очень тяжело разглядеть сами принты на футболках вот тут

4. Сделать ссылки не активными

При наведении к примеру на "ФУТБОЛКИ" Выпадает меню "МУЖКИЕ ФУТБОЛКИ" "ЖЕНСКИЕ ФУТБОЛКИ" и тд. так вот, именно при нажатии на "ФУТБОЛКИ" открывается пустая страница, которая в принципе не нужна. Необходимо сделать так чтобы при наведении на "ФУТБОЛКИ" она была не активной и вообще не работала.

5. Увелечение логотипа и контактов

лого.png

Увеличение логотипа до примерно такого размера, дальше контакты сместить вправо и разбить на две колонки в левой телефон и мэйл в правой скайп и ася.

6. Изменение цвета полосок

И вопрос на последок, где хранятся данные о цвете всех черных элементов, то есть полосы сверху в списке товара и подвал.

PS. Надеюсь всё расписал понятно, спасибо за внимание, всем удачных изменений, и заранее благодарю того кто ответит! )

#2 sengun

sengun

    Активный участник

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 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 sengun

sengun

    Активный участник

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 17 Июль 2013 - 20:21

4. В html в коде
<!-- Каталог товаров -->
	 <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 sengun

sengun

    Активный участник

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 17 Июль 2013 - 21:12

5. Лучше конечно логотипа загрузить побольше, а то немного размазанным получится. А вообще в style.css код
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}&amp;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 origina1

origina1

    Пользователь

  • Пользователи
  • PipPip
  • 46 сообщений

Отправлено 18 Июль 2013 - 11:01

1. Добавление в шапку социальных иконок.  готово
2. Изменение цвета фона готово
3. Увеличение товара,
Получилось вот так - почему то товар заходит друг на друга

4. Сделать ссылки не активными
Всё получилось, вот один нюанс, при наведении курсора он превращается в курсор выделителя, нужно сделать так чтобы курсор оставался курсором при наведении на "ФУТБОЛКИ"

5. Увелечение логотипа и контактов
Лого увеличил, а вот контакты после всей процедуры просто исчезли, пробывал несколько раз, одна и та же ситуация.

PS. ВИРТУАЛЬНО ЖМУ РУКУ И БЛАГОДАРСТВУЮ ! )

#6 sengun

sengun

    Активный участник

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 18 Июль 2013 - 14:05

 origina1 (18 Июль 2013 - 11:01) писал:

1. Добавление в шапку социальных иконок.  готово
2. Изменение цвета фона готово
3. Увеличение товара,
Получилось вот так - почему то товар заходит друг на друга

4. Сделать ссылки не активными
Всё получилось, вот один нюанс, при наведении курсора он превращается в курсор выделителя, нужно сделать так чтобы курсор оставался курсором при наведении на "ФУТБОЛКИ"

5. Увелечение логотипа и контактов
Лого увеличил, а вот контакты после всей процедуры просто исчезли, пробывал несколько раз, одна и та же ситуация.

PS. ВИРТУАЛЬНО ЖМУ РУКУ И БЛАГОДАРСТВУЮ ! )
3. Я не о том подумал, я написал инструкцию про отображение списком.
А для табличного вида надо вот что. В шаблоне товары у вас есть 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. Сам только что сделал по инструкции, все нормально. 18-07-2013 14-58-04.png
Инструкция по разделению контактов - это вот эта часть:
В 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}&amp;img=27"]http://wwp.icq.com/s...TS}&#38;img=27"[/url] alt="Статус" width="16" height="16" />
						 <span class="valignMiddle">{SETTINGS_STORE_ICQ}</span>
						 </div>
				 {% ENDIF %}
вставьте такой код
</td>
				 </tr>
				 </table>
Возможно, возникла путаница со вставкой последнего блока кода. Он должен быть вот тут:18-07-2013 15-02-55.png

#7 origina1

origina1

    Пользователь

  • Пользователи
  • PipPip
  • 46 сообщений

Отправлено 18 Июль 2013 - 15:06

Всё сделано! Спасибо большое! ;)

#8 ligorempty

ligorempty

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 64 сообщений

Отправлено 18 Август 2013 - 14:07

Добрый день! Очень понравилась задумка автора. После попыток воплотить,
не получилось поставить "контакты" должным образом, думаю разница в коде у нас изначала была (с автором)
Съехала полоска "Поиск" к логотипу, контакты вовсе исчезли.
SL-125918 мой аккаунт.

И так, прошу помощи:

1.  Расположение "Контакты" как у автора темы (поиск вернуть на место)
2.  Товары в категориях "пляшут", имеют разный размер. Как установить единый размер для всевозможных товаров, так , чтобы даже товар со скидкой был на ровне с другими товарами? (Вот пример)

Спасибо за помощь!

#9 Stasya

Stasya

    Активный участник

  • Модератоpы
  • 4 007 сообщений

Отправлено 18 Август 2013 - 14:39

1. В файле style.css найдите блок
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 ligorempty

ligorempty

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 64 сообщений

Отправлено 18 Август 2013 - 15:26

Спасибо!
1.  Расположение "Контакты" как у автора темы (поиск вернуть на место) - Готово!
2. Не получилось. Отодвигается описание к картинкам в каталоге. Но их месторасположение относительно друг друга осталось не закрепленным

#11 ligorempty

ligorempty

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 64 сообщений

Отправлено 18 Август 2013 - 16:17

 Stasya (18 Август 2013 - 14:39) писал:

1. В файле style.css найдите блок
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 Stasya

Stasya

    Активный участник

  • Модератоpы
  • 4 007 сообщений

Отправлено 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 ligorempty

ligorempty

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 64 сообщений

Отправлено 22 Август 2013 - 14:44

Спасибо! Скажите, появилась вот такая беда:
При просмотре каталога таблицей - все ок, а вот списком- такая чертовщина появляется :angry:

#14 Stasya

Stasya

    Активный участник

  • Модератоpы
  • 4 007 сообщений

Отправлено 22 Август 2013 - 19:00

В шаблоне hTML найдите блок
<!-- Если отображаем товары таблицей -->
{% 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;}


#15 Никита

Никита

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 142 сообщений

Отправлено 05 Июнь 2014 - 13:37

Здравствуйте, подскажите как увеличить логотип, пробовал менять значения
header[role="banner"] .hgroup {
  height: 1em;
  left: 0;
  top: 2.5em;
  width: 55%;

Прикрепленные изображения

  • Безымянный1.png


#16 макс

макс

    Новичок

  • Пользователи
  • Pip
  • 3 сообщений

Отправлено 05 Июнь 2014 - 14:51

здравствуйте, попробуйте сделать следующее:
в фаиле style.css  в самом низу пропишите
.hgroup h1 img {
width:120%;
padding-top: 40%;
}
и в строке 432, того же фаила css убрать значение max-width: 100%; конечное правило должно выглядеть так
img { height: auto;}


#17 Никита

Никита

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 142 сообщений

Отправлено 06 Июнь 2014 - 07:16

Спасибо, за ответ! логотип стал больше, но вместе с ним увеличились и все фото товаров. Можно ли фото товаров вернуть в прежнее состояние?

#18 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 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 Никита

Никита

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 142 сообщений

Отправлено 07 Июнь 2014 - 14:31

последний шаг это:
в строке 432, того же фаила css убрать значение max-width: 100%; конечное правило должно выглядеть так
img { height: auto;}
?

если я правильно понял, сделал как вы и сказали. подскажите ещё 1. как поднять логотип чтобы он был примерно по центру банера в облости 1
и 2. как вернуть баннер чтобы он занимал облость 2?

Прикрепленные изображения

  • Безымянный.png


#20 Dars

Dars

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 410 сообщений

Отправлено 07 Июнь 2014 - 14:48

 Никита (07 Июнь 2014 - 14:31) писал:

последний шаг это:
в строке 432, того же фаила css убрать значение max-width: 100%; конечное правило должно выглядеть так
img { height: auto;}
?

если я правильно понял, сделал как вы и сказали. подскажите ещё 1. как поднять логотип чтобы он был примерно по центру банера в облости 1
и 2. как вернуть баннер чтобы он занимал облость 2?
В style.css найдите строки:
.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 анонимных