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


Устаканить


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

#1 Samcopy

Samcopy

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

  • Пользователи
  • PipPipPipPip
  • 346 сообщений
  • ГородСамара

Отправлено 28 Март 2014 - 18:09

Так как сайтов у меня ту уже несколько - обратите внимание на Аккаунт SL-281546

Прикладываю скрин, то что необходимо сделать. На других сайтах получались некоторые штуки (например сдвиг слайдера и меню), но здесь почему то не получается (все съезжает)

1. Слайдер сдвинуть вправо до упора,
2. Левое меню поднять под шапку
3. Верхнее меню каждую кнопку сделать отдельным блоком и залить свой фон
4. В этом блоке - Название магазина и координаты
5. Этот блок для АКЦИИ
6. Этот блок - для заказать обратный звонок с картинкой
7, Корзина - весь блок заменить на свою картинку (чтобы осталось все кликабельно)
8. Поиск выровнять с меню

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

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


#2 sengun

sengun

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

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

Отправлено 28 Март 2014 - 19:13

Просмотр сообщенияSamcopy (28 Март 2014 - 18:09) писал:

Так как сайтов у меня ту уже несколько - обратите внимание на Аккаунт SL-281546

Прикладываю скрин, то что необходимо сделать. На других сайтах получались некоторые штуки (например сдвиг слайдера и меню), но здесь почему то не получается (все съезжает)

1. Слайдер сдвинуть вправо до упора,
2. Левое меню поднять под шапку
3. Верхнее меню каждую кнопку сделать отдельным блоком и залить свой фон
4. В этом блоке - Название магазина и координаты
5. Этот блок для АКЦИИ
6. Этот блок - для заказать обратный звонок с картинкой
7, Корзина - весь блок заменить на свою картинку (чтобы осталось все кликабельно)
8. Поиск выровнять с меню
Здравствуйте.
1,2. В шаблоне HTML перенесите код
{% IF index_page %}
	 <div class="flexslider" id="autumn-slider" style="
height: 300px;
width: 600px;
">
	 <ul class="slides">
		 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg"></a></li>
	 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg"></a></li>
		 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide3.jpg"></a></li>
	 </ul>
	 </div>
{% ENDIF %}
чуть ниже, вставьте его после
<div class="column two-third">

3. Вставляйте код в style.css
#megamenu li:nth-child(1) { background: #F00;}
для каждого пункта меню, номер которого указан в круглых скобках. Приведенный код зальет первый пункт меню красным. Следующий, например, зальет первый - красным, второй - синим.
#megamenu li:nth-child(1) { background: #f00;}
#megamenu li:nth-child(2) { background: #00f;}

7. Если просто картинку хотите, тогда в HTML замените код
		 <!-- Корзина -->
	 <div id="header_shopping_cart">
	 <div id="shopping_cart">
	 <a href="{CART_URL}" title="Перейти в корзину">
			 {% IF cart_count_empty %}
				 <span class="ajax_cart_no_product">Корзина пуста</span>
			 {% ELSE %}
				 <span class="ajax_cart_quantity">{CART_COUNT_TOTAL} товар{CART_COUNT_TOTAL | gen_word_end("","а","ов")}</span>
			 {% ENDIF %}	
	 <span class="down_arrow_dark"></span>
	 </a>
	 </div>
	 </div>
на такой
		 <!-- Корзина -->
	 <div id="header_shopping_cart">
	 <a href="{CART_URL}" title="Перейти в корзину"></a>
	 </div>
Далее в style.css замените
#header_shopping_cart{position: static;width:170px;float:right;clear:both;margin-top:26px;list-style:none;background-clip:padding-box;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;
background:#f7f7f7 url('{ASSETS_IMAGES_PATH}cart_red.png') no-repeat 12px;border:1px solid #cecece;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;
box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05)}
на такой код
#header_shopping_cart{position: static;float:right;clear:both;margin-top:26px;list-style:none;background-clip:padding-box;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;}
и после него добавьте
#header_shopping_cart a { display: block; width: 100px; height: 100px; background: url({ASSETS_IMAGES_PATH}cart_img.png) no-repeat center center;}
width: 100px; height: 100px; - ширина и высота картинки соответственно, cart_img.png - ее имя.

8. Сперва в HTML перенесите блок кода
<div id="header_user_info">
		 <!-- Если в тарифном плане подключен модуль сравнения товаров -->
		 {% IF TARIFF_FEATURE_GOODS_COMPARE %}
			 <!-- Если не выключен модуль сравнения товаров, то покажем этот блок -->
			 {% IFNOT SETTINGS_COMPARE_DISABLE %}
			 {% IF COMPARE_GOODS_COUNT=0 %}
				 <div class="menuCompare" style="visibility: hidden;">
				 <em>Ваш список сравнения пуст</em>
				 </div>
			 {% ELSE %}
				 <div class="menuCompare">
				 <em>Сейчас на <a href="{COMPARE_URL}">сравнении</a> {COMPARE_GOODS_COUNT} товар{COMPARE_GOODS_COUNT | gen_word_end("","а","ов")}.</em><br />
				 </div>
			 {% ENDIF %}
			 {% ENDIF %}
		 {% ENDIF %}
		 <!-- END Если в тарифном плане подключен модуль фильтров по товарам -->
	 </div>
ниже, после строки
<!-- /Форма поиска -->
он выводит "На сравнении n товаров" - будет перекрываться, если просто подвинуть поиск выше.
Теперь отрегулируем отступ сверху у поиска. В шаблоне style.css в коде
#search_block_top{position:static;float:right;margin:26px 10px 0 0}
замените 26 на 15 - по усмотрению.

Остальные изменения скорее всего повлекут нарушение адаптивности. Если вас это устроит, мы напишем инструкцию.

#3 Samcopy

Samcopy

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

  • Пользователи
  • PipPipPipPip
  • 346 сообщений
  • ГородСамара

Отправлено 28 Март 2014 - 21:04

Спасибо, начала эксперимент:
- после изменения п.1 и 2 - организовалось пространство между левым меню и контентом. Скорее всего контент надо сдвинуть влево как-то
- по пунктам 4-5-6 не соглашусь по поводу потери адаптивности, на сайте косметики Аккаунт SL-237674  у меня вставлены в шапку два блока, но по опыту знаю, что они двигают за собой корзину с поиском, поэтому и попросилась тут на подмогу (я буду неделю их возить туда-сюда). Была реализована вставка картинки и откоординачена как надо

#4 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 29 Март 2014 - 04:46

1,2 в style.css найдите:
.two-third {
	float: right;
	width: 1030px;
}
замените на:
.two-third {
	float: right;
	width: 75%;
}
при моем разрешении, блок каталога был ниже контента.

4,5,6. В style.css найдите:
#megamenu {
	clear: both;
	height: 54px;
	left: 400px;
	padding-top: 1px;
	position: absolute;
}
замените на:
#megamenu {
	float: left;
	height: 54px;
	padding-top: 1px;
}
далее в HTML вставляем блоки:
<!-- Блок навигации -->
{% IFNOT menu_empty %}
<ul id="megamenu">
{% FOR menu %}
{% FOR header %}
{% FOR links %}
<li class="root_menu {% IF menu.header.links.SELECTED %}active{% ENDIF %}" >
<a href="{menu.header.links.URL}" class="root_link" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} >{menu.header.links.NAME}</a>
</li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>
{% ENDIF %}
перед ним вставляем:
<div style="float:left;">
после него:
<div class="clear"></div>
<div class="banner">текст\картинка внутри баннера</div>
<div class="banner">текст\картинка внутри баннера</div>
<div class="banner">текст\картинка внутри баннера</div>
<div class="clear"></div>
</div>
и в style.css добавляем:
.banner{
float:left;
width:200px; /* ширина блоков */
}
далее внесите свою информацию в данные баннеры

#5 Samcopy

Samcopy

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

  • Пользователи
  • PipPipPipPip
  • 346 сообщений
  • ГородСамара

Отправлено 29 Март 2014 - 09:11

Vaccinочка, спасибо.
Требую добавить в интерфейс прыгающий от счастья смайлик -)))))))))))

1. По инструкции у меня только надписи в шапке вышли (без блоков), вставила свои картинки (наверно не правильно), и они не желают расширяться. Как регулировать их ширину? Мне нужно, чтобы они уперлись в Корзину.

2. Вдогонку спрашиваю - справа от слайдера у меня есть место, хочется туда поставить тоже блок с картинкой. Это возможно?
3. Левое меню: у меня есть картинка, которую хочется использовать в виде подсветки на позицию меню, при указателе мыши на него. Как это осуществить? Уточняю, не просто выбрать цвет, а именно использовать блок с картинкой.(как на скрине)

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

  • Буфер обмена03.jpg


#6 MikDark

MikDark

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

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

Отправлено 29 Март 2014 - 16:15

Просмотр сообщенияSamcopy (29 Март 2014 - 09:11) писал:

Vaccinочка, спасибо.
Требую добавить в интерфейс прыгающий от счастья смайлик -)))))))))))

1. По инструкции у меня только надписи в шапке вышли (без блоков), вставила свои картинки (наверно не правильно), и они не желают расширяться. Как регулировать их ширину? Мне нужно, чтобы они уперлись в Корзину.

2. Вдогонку спрашиваю - справа от слайдера у меня есть место, хочется туда поставить тоже блок с картинкой. Это возможно?
3. Левое меню: у меня есть картинка, которую хочется использовать в виде подсветки на позицию меню, при указателе мыши на него. Как это осуществить? Уточняю, не просто выбрать цвет, а именно использовать блок с картинкой.(как на скрине)

Начну с конца:
3)Загрузите картинку в раздел Сайт - Редактор шаблонов (допустим картинка с именем bg.jpg) и в style.css добавьте:
.accordion li:hover {
background: url({ASSETS_IMAGES_PATH}bg.jpg)
}

2) В шаблоне HTML найдите код
{% IF index_page %} 
	  <div class="flexslider" id="autumn-slider" style="
height: 300px;
width: 600px;
">
		<ul class="slides">
		  <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg"></a></li>
		<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg"></a></li>
		  <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide3.jpg"></a></li>
		</ul>
	 </div>
	{% ENDIF %}   
и после него добавьте:
<div class="headimage"><img src="{ASSETS_IMAGES_PATH}image.jpg"></div>

image.jpg - это название картинки, загруженной в раздел Сайт - Редактор шаблонов.

Далее в style.css добавьте:
.headimage {
float:right;
}

1) Вы хотите растянуть картинки или увеличитьпространство между блоками?

#7 Samcopy

Samcopy

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

  • Пользователи
  • PipPipPipPip
  • 346 сообщений
  • ГородСамара

Отправлено 29 Март 2014 - 21:42

1. Все равно, лишь бы выровнялись (можно шириной блока, можно расстоянием между ними)
2. Картинку вставила, но она не рядом со слайдером встала ( на Главной), а с контентом.  И также она отображается на всех остальных страницах (что не нужно, особенно на каталоге, где нарушает выдачу категорий). И заодно ее ширину как регулировать?
3. Подсветка встала, а нельзя ее идентично образцу реализовать? На скрине видно - она немного сдвинута влево относительно строк меню

#8 Samcopy

Samcopy

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

  • Пользователи
  • PipPipPipPip
  • 346 сообщений
  • ГородСамара

Отправлено 30 Март 2014 - 21:38

Ау-у-у-у-у.... :wacko:  вы меня бросили?????

#9 MikDark

MikDark

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

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

Отправлено 31 Март 2014 - 07:54

Просмотр сообщенияSamcopy (30 Март 2014 - 21:38) писал:

Ау-у-у-у-у.... :wacko:  вы меня бросили?????

1) Что касается изображений. У вас шаблон адаптивный и при разных экранах изображения расстояние до края совершенно разные, поэтому нельзя точно подобрать значение, на которое нужно увеличить.
2) Сейчас картинки нет, добавьте ее на сайт, нужно наглядно посмотреть. Только код:

<div class="headimage"><img src="{ASSETS_IMAGES_PATH}image.jpg"></div>
заключите в


{% IF index_page %}
<div class="headimage"><img src="{ASSETS_IMAGES_PATH}image.jpg"></div>
{% ENDIF % }

3) Единственное что можно сделать, это: Найдите в main.css строчки:
.accordion li:hover {
...
}

и между скобок добавьте:

margin-left: -10px;
padding-left: 10px;
background-repeat: no-repeat;


#10 Samcopy

Samcopy

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

  • Пользователи
  • PipPipPipPip
  • 346 сообщений
  • ГородСамара

Отправлено 31 Март 2014 - 09:35

п.2 - по вашему коду ошибка компиляции, по коду MikDark все встает, но на всех страницах (надо только на первой и рядом со слайдером). Сейчас я картинку вернула
п.3 - сдвиг образовался, но исчезла зеленая накладка, как ее вернуть

#11 MikDark

MikDark

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

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

Отправлено 31 Март 2014 - 09:59

Просмотр сообщенияSamcopy (31 Март 2014 - 09:35) писал:

п.2 - по вашему коду ошибка компиляции, по коду MikDark все встает, но на всех страницах (надо только на первой и рядом со слайдером). Сейчас я картинку вернула
п.3 - сдвиг образовался, но исчезла зеленая накладка, как ее вернуть

изменения произвели.

#12 Samcopy

Samcopy

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

  • Пользователи
  • PipPipPipPip
  • 346 сообщений
  • ГородСамара

Отправлено 31 Март 2014 - 10:20

:rolleyes: Вононочёёёё :D А я уже начала в Бога верить.
Большущее спасибо.

#13 Samcopy

Samcopy

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

  • Пользователи
  • PipPipPipPip
  • 346 сообщений
  • ГородСамара

Отправлено 31 Март 2014 - 14:14

Хождение по мукам.Часть ......писсяттретья

1.На главной карусель уехала за экран.
2.Как мне поставить картинку (не сменить цвет) на кнопку быстрого заказа. Смогла добавить туда подсветку (чтобы она не исчезла), это в каталоге, а на главной в карусели не добавилась. Нужно, чтобы и там и там сменилось.
3.Как расположить в Каталоге товары по 5 шт в ряд и соответственно уменьшить размер блока с картинками категорий
4.Можно ли в блок с категориями товаров в Каталоге вставить свою подложку-картинку (чтобы не на белом фоне картинки были)? Для примера загрузила подложку - bg4.png

#14 Samcopy

Samcopy

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

  • Пользователи
  • PipPipPipPip
  • 346 сообщений
  • ГородСамара

Отправлено 31 Март 2014 - 17:22

тук-тук :rolleyes:

#15 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 01 Апрель 2014 - 04:24

пожалуйста расписывайте подробно, если что-то не так, так как 1 вопрос я не поняла, карусель находится ровно под описанием страницы вне зависимости от разрешения =)
2.В style.css найдите примерно сл.код(ищите по первой строке):
input.exclusive, #paymentForm input, a.exclusive {
	-moz-box-sizing: border-box;
	background: #573D2E !important;
	border: 1px solid #A40F18;
	border-radius: 2px;
	box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.2);
	color: #FAFAFA !important;
	cursor: pointer;
	display: inline-block;
	font: inherit !important;
	padding: 6px 12px;
	text-decoration: none;
}
и измените
#573D2E !important
на
url('ссылка на фон для кнопки') no-repeat left top
точку с запятой не потеряйте в конце)
3.конкретное кол-во категорий лучше не выставлять иначе адаптивность улетит далеко и надолго, а уменьшить блоки можно, в style.css найдите:
#category_view_type.grid_view #product_list li {
	border: 0 none;
	display: -moz-inline-stack;
	margin: 0 15px;
	min-height: 200px;
	padding: 0;
	position: relative;
	text-align: center;
	vertical-align: top;
	width: 200px;
	z-index: 100;
}
#category_view_type.grid_view #product_list .product_image_wrapper {
	background: none repeat scroll 0 0 #FFFFFF;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.094), 0 1.5px 1.5px 0 rgba(0, 0, 0, 0.2), 0 2px 1.5px 0 rgba(0, 0, 0, 0.1);
	height: 200px;
	overflow: hidden;
	padding: 8px;
	position: relative;
	width: 200px;
}
и уменьшите значение width(ширина) и height(высота) в обоих блоках
4.в style.css найдите:
#category_view_type.grid_view #product_list .product_image_wrapper {
	background: #FFFFFF;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.094), 0 1.5px 1.5px 0 rgba(0, 0, 0, 0.2), 0 2px 1.5px 0 rgba(0, 0, 0, 0.1);
	height: 200px;
	overflow: hidden;
	padding: 8px;
	position: relative;
	width: 100px;
}
и измените значение background по примеру 2го пункта

#16 Samcopy

Samcopy

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

  • Пользователи
  • PipPipPipPip
  • 346 сообщений
  • ГородСамара

Отправлено 01 Апрель 2014 - 10:00

По вопросу 1 - я пересмотрела на разных браузерах, везде одно и то же. Понятно, что каруселька под текстом, но она выезжает справа не видите как? Пятый товар только часть видна (прикладываю скрин)

2. Если менять в этом коде бекграунд, то меняется только кнопка "Показать" в фильтре (сама в шоке)
3. Получилось как хотела, но теперь названия категорий не лезут и названия товаров, как подправить?
4. Встало, но кособоко почему-то :rolleyes:


Посмотрите пжлст еще код фильтра, в нтмл он отсутствует, с товара не смогла вытащить, мне нужно его поставить в левое меню.
В категории BANAX-BURST почему то не выводится в фильтре шкала с ценой
Прозевала момент, когда в футере все съехало (бэкапы не помогают вернуть), пропал раздел Статьи и Видеообзоры, с них содержимое переехало в Новости

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

  • Буфер обмена01.jpg


#17 Samcopy

Samcopy

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

  • Пользователи
  • PipPipPipPip
  • 346 сообщений
  • ГородСамара

Отправлено 01 Апрель 2014 - 13:27

люди-и-и-и-и-и-и-и-и-и-и-и-и-и-и....работа стоит

#18 Samcopy

Samcopy

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

  • Пользователи
  • PipPipPipPip
  • 346 сообщений
  • ГородСамара

Отправлено 02 Апрель 2014 - 09:21

Просмотр сообщенияSamcopy (01 Апрель 2014 - 10:00) писал:

По вопросу 1 - я пересмотрела на разных браузерах, везде одно и то же. Понятно, что каруселька под текстом, но она выезжает справа не видите как? Пятый товар только часть видна (прикладываю скрин)

2. Если менять в этом коде бекграунд, то меняется только кнопка "Показать" в фильтре (сама в шоке)
3. Получилось как хотела, но теперь названия категорий не лезут и названия товаров, как подправить?
4. Встало, но кособоко почему-то :rolleyes:


Посмотрите пжлст еще код фильтра, в нтмл он отсутствует, с товара не смогла вытащить, мне нужно его поставить в левое меню.
В категории BANAX-BURST почему то не выводится в фильтре шкала с ценой
Прозевала момент, когда в футере все съехало (бэкапы не помогают вернуть), пропал раздел Статьи и Видеообзоры, с них содержимое переехало в Новости

Help....help.... :mellow:

#19 Samcopy

Samcopy

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

  • Пользователи
  • PipPipPipPip
  • 346 сообщений
  • ГородСамара

Отправлено 02 Апрель 2014 - 12:12

Уважаемые модераторы!!!!!!!!!!!! Ну хоть кто нибудь один может заняться моими вопросами????????????? Вторые сутки жду

#20 MikDark

MikDark

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

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

Отправлено 02 Апрель 2014 - 13:03

1) Шаблон адаптивный, поэтому в зависимости от экрана отображается он по-разному. У нас ничего не выезжает на большом разрешении. Скажите что Вы хотите видеть, уменьшить остальные товары, чтобы пятый влезал, или наоборот увеличить их, чтобы 5-й не попадал в поле зрения?

2) У Вас сейчас стоит изображение на этих кнопках. Если нужно его заменить, то найдите код в style.css
input.exclusive, #paymentForm input, a.exclusive{display:inline-block;background: url({ASSETS_IMAGES_PATH}cat-bg.png) no-repeat left top;color:#fafafa!important;border:1px solid #a40f18;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;

и поменяйте cat-bg.png на нужное изображение.

3) В style.css найдите:
#category_view_type.grid_view #product_list h5 a {
display: block;
height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 150px;
}


и замените на:
#category_view_type.grid_view #product_list h5 a {
display: block;
height: 35px;
overflow: hidden;
text-overflow: ellipsis;
width: 150px;
}


4) Если Вы о том, что правая и нижняя часть подложки не видна, то нужно просто чуть уменьшить фоновое изображение.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных