Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

Изменить Картинки В Каталоге Товаров

Автор Ash74, 03 мая 2015 10:12

каталог товаров

Авторизуйтесь для ответа в теме

Сообщений в теме: 10

#1 Ash74

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

Пользователи
42 сообщений

ГородЧелябинск

Отправлено 03 Май 2015 - 10:12

Добрый день!
Аккаунт SL-259633

Подскажите, как изменить размеры картинок в каталоге.

1. Сейчас вот такая вот картина:

Размеры используемых мной изображений - 200х200. И сейчас они растягиваются на большее разрешение - вот этот момент и нужно убрать. Нужны картинки чётко 200х200 пикселей.
Пробовал менять значения в настройках - получается вот такое вот:

2. При разрешении 1600х900, на экране отображаются четыре "рамки" в ряду.

Возможно ли увеличить их количество до 6 или 8? И чтобы расстояние между рамками было одинаковое.

Заранее благодарен.

Наверх

#2 Firefly

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

Модераторы
3 810 сообщений

Отправлено 03 Май 2015 - 10:49

Ash74 (03 Май 2015 - 10:12) писал:

Добрый день!
Аккаунт SL-259633

Подскажите, как изменить размеры картинок в каталоге.

1. Сейчас вот такая вот картина:
Прикрепленный файл

фотки сайт 1.jpg
Размеры используемых мной изображений - 200х200. И сейчас они растягиваются на большее разрешение - вот этот момент и нужно убрать. Нужны картинки чётко 200х200 пикселей.
Пробовал менять значения в настройках - получается вот такое вот:
Прикрепленный файл

фотки сайт 2.jpg

2. При разрешении 1600х900, на экране отображаются четыре "рамки" в ряду.
Прикрепленный файл

Сейчас.jpg
Возможно ли увеличить их количество до 6 или 8? И чтобы расстояние между рамками было одинаковое.
Прикрепленный файл

Нужно.jpg

Заранее благодарен.

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css найдите код:

.cat {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;display: block;margin: 0 0 40px;width: 100%;height:350px;max-width:300px;overflow: hidden;position: relative;text-align: left;vertical-align: top;float:left;}

Замените на:

.cat {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;display: block;margin: 0 0 40px;width: 100%;height:350px;max-width:215px;overflow: hidden;position: relative;text-align: left;vertical-align: top;float:left;}

Наверх

#3 Ash74

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

Пользователи
42 сообщений

ГородЧелябинск

Отправлено 04 Май 2015 - 10:04

Firefly, спасибо!

Прошу помочь еще немного =)

Наверх

#4 Firefly

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

Модераторы
3 810 сообщений

Отправлено 04 Май 2015 - 12:07

Ash74 (04 Май 2015 - 10:04) писал:

Firefly, спасибо!

Прошу помочь еще немного =)

Прикрепленный файл

правка фоток - главная.jpg

Прикрепленный файл

правка фоток - сетка категорий.jpg

1. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:

#main {margin-top:40px;}

Замените на:

#main {margin-top:5px;}

В main.css найдите код:

#footer {background-color: #f3f3f3;margin-top: 45px;padding-top: 40px;}

Замените на:

#footer {background-color: #f3f3f3;margin-top: 5px;padding-top: 40px;}

2. В main.css найдите код:

.category-img-index {vertical-align: middle;display: table-cell;height: 270px;width:270px;border: 1px solid #F2F2F2;}

Замените на:

.category-img-index {vertical-align: middle;display: table-cell;height: 200px;width:270px;border: 1px solid #F2F2F2;}

3. В main.css найдите код:

.category-description .vertical {display: table-cell;height: 72px;padding-left: 5px;padding-right: 5px;vertical-align: middle;}

Замените на:

.category-description .vertical {display: table-cell;height: 55px;padding-left: 5px;padding-right: 5px;vertical-align: middle;}

В main.css найдите код:

.category-name a {color: #333333;line-height:46px;text-decoration: none;-webkit-transition: opacity .2s linear;transition: opacity .2s linear;}

Замените на:

.category-name a {color: #333333;line-height:46px;text-decoration: none;-webkit-transition: opacity .2s linear;transition: opacity .2s linear;font-family: Georgia;font-size: 18px;}

Добавлены 2 показателя:
1) font: Georgia; - семейство шрифтов. Если Вам необходимо изменить сам тип шрифта, то меняете на свой (либо удаляете)
2) font-size: 18px; - размер шрифта. В том случае если необходимо изменить размер шрифта меняете на свой.

4,6 В main.css найдите код:

.cat {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;display: block;margin: 0 0 25px;width: 100%;height:350px;max-width:215px;overflow: hidden;position: relative;text-align: left;vertical-align: top;float:left;}

Замените на:

.cat {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;display: block;margin-right: -5px;width: 100%;height:350px;max-width: 217px;overflow: hidden;position: relative;text-align: center;vertical-align: top;float:left;}

Наверх

#5 Ash74

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

Пользователи
42 сообщений

ГородЧелябинск

Отправлено 12 Май 2015 - 07:34

Добрый день!
Спасибо за помощь. Часть вопросов решена. Прошу помочь разобраться с оставшимися:

Вопрос №1

Вопрос №5

Вопрос №2

Жду ответа!

Наверх

#6 Cupuyc

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

Пользователи
747 сообщений

Отправлено 12 Май 2015 - 09:42

Ash74 (12 Май 2015 - 07:34) писал:

Добрый день!
Спасибо за помощь. Часть вопросов решена. Прошу помочь разобраться с оставшимися:

Прикрепленный файл

правка фоток - главная.jpg Вопрос №1

Прикрепленный файл

правка фоток - сетка категорий.jpg Вопрос №5

Прикрепленный файл

Главная - отступы и ширина блоков.jpg Вопрос №2

Жду ответа!

Здравствуйте,
1) Здравствуйте, зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css найдите код:

#main {margin-top:40px;}

В строке "margin-top:40px;" измените значение "40px"

2) В данный момент у вас отсутствуют области в указанной области.

3) В админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css найдите код:

.category-description .vertical {display: table-cell;height: 55px;padding-left: 5px;padding-right: 5px;vertical-align: middle;}

В строке "height: 55px;" измените значение "10px"

4) В админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css добавьте последней строкой код:

.col-sm-3.col-md-3.cat {
padding-left: 10px;
}

В строке "padding-left: 10px;" измените значение "10px"

Наверх

#7 Firefly

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

Модераторы
3 810 сообщений

Отправлено 12 Май 2015 - 09:47

Ash74 (12 Май 2015 - 07:34) писал:

правка фоток - главная.jpg Вопрос №1

Прикрепленный файл

правка фоток - сетка категорий.jpg Вопрос №5

Прикрепленный файл

Главная - отступы и ширина блоков.jpg Вопрос №2

Жду ответа!

Здравствуйте.
Вопрос №2
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:

.yt-bannertop {background-color:#f3f3f3;padding:50px 0 30px;}

Замените на:

.yt-bannertop {background-color:#f3f3f3;padding: 20px 0 20px;}

Найдите код:

#main {margin-top:40px;}

Замените на:

#main {margin-top:20px;}

Вопрос №5
Найдите код:

.cat {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;display: block;margin: 0 0 25px;width: 100%;height:350px;max-width:215px;overflow: hidden;position: relative;text-align: left;vertical-align: top;float:left;}

Замените на:

.cat {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;/* display: block; */margin: 0 0 25px;width: 100%;height:255px;max-width:215px;overflow: hidden;position: relative;text-align: left;vertical-align: top;float:left;}

Наверх

#8 Ash74

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

Пользователи
42 сообщений

ГородЧелябинск

Отправлено 24 Май 2015 - 22:14

Доброй ночи!

SL-259633

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

Вопросы №1 и №2

№3 - как сменить цвет фона вот этого блока? Знал, но забыл)

№4 - бекраунд сайта
Хочу поставить не цвет, а картинку! Знаю, что можно это сделать, но не знаю её оптимальные параметры - разрешение/вес и т.п. Чтобы не сильно грузилась долго.

Спасибо!

Наверх

#9 Vaccina

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

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

Отправлено 26 Май 2015 - 04:44

1. В шаблоне HTML найдите:

<div class="yt-main-menu col-lg-9 col-md-10 col-xs-12">

после него разместите:

<div class="contacts">
					{% IF SETTINGS_STORE_PHONE_NUMBER1 %}<p>{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</p>{% ENDIF %}
					{% IF SETTINGS_STORE_PHONE_NUMBER2 %}<p>{SETTINGS_STORE_PHONE_COUNTRY_CODE2}({SETTINGS_STORE_PHONE_CITY_CODE2}){SETTINGS_STORE_PHONE_NUMBER2}</p>{% ENDIF %}
					{% IF SETTINGS_STORE_PHONE_NUMBER3 %}<p>{SETTINGS_STORE_PHONE_COUNTRY_CODE3}({SETTINGS_STORE_PHONE_CITY_CODE3}){SETTINGS_STORE_PHONE_NUMBER3}</p>{% ENDIF %}
					{% IF SETTINGS_STORE_WORK_TIME %}<p>Время работы : {SETTINGS_STORE_WORK_TIME}</p>{% ENDIF %}
					{% IF SETTINGS_STORE_EMAIL_MAIN %}<p>Email : <a href="{SETTINGS_STORE_EMAIL_MAIN}">{SETTINGS_STORE_EMAIL_MAIN}</a></p>{% ENDIF %}
					{% IF SETTINGS_STORE_SKYPE %}<p>Skype : {SETTINGS_STORE_SKYPE}</p>{% ENDIF %}
					{% IF SETTINGS_STORE_ICQ %}<p>ICQ : {SETTINGS_STORE_ICQ}</p>{% ENDIF %}
				  </div>

В main.css найдите:

.header-content .yt-main-menu {
  float: right;
  padding: 40px 0 20px;
}

замените на:

.header-content .yt-main-menu {
  float: right;
  padding: 10px 0;
}
.header-content .yt-main-menu .contacts{float:right;width:50%;}
.header-content .yt-main-menu .contacts p, .header-content .yt-main-menu .contacts a{
font-family: "Open Sans Condensed",sans-serif;
text-align:right;
color: #333333;
}

2. В шаблоне HTML после:

<div class="yt-main-menu col-lg-9 col-md-10 col-xs-12">

разместите:

<!-- Все Новости -->
			  <div class="news block block-latestblog">
				<h2 class="block-title"><a href="{NEWS_ALL_URL}">Новости</a></h2>
				<div class="navslider" style="display: block;">
				  <a class="prev" title="Prev" href="#">Prev</a>
				  <a class="next" title="Next" href="#">Next</a>
				</div>
				<div class="block-content">
				  <ul class="list-blog owl-carousel owl-theme">
				  <!--  Если есть список из любых новостей и если в тарифном плане подключен модуль новостей -->
				  {% IFNOT news_list_all_empty && TARIFF_FEATURE_NEWS %}
				  {% FOR news_list_all %}
					<li class="item">
					  <div class="postTitle">
						<a href="{news_list_all.URL}" title="Перейти к странице &laquo;{news_list_all.TITLE}&raquo;" {% IF news_list_all.ID = NEWS_ID %}class="selected"{%ENDIF%}>{news_list_all.TITLE}</a>
					  </div>
					  <div class="date">
						<span class="d-month">{news_list_shop.TIME | date("m")}</span>
						<span class="d-day">{news_list_shop.TIME | date("d")}</span>
						<span class="d-year">{news_list_shop.TIME | date("Y")}</span>
					  </div>
					  <div class="postContent">
						<p>{news_list_shop.TEXT_SHORT}</p>
					  </div>
					</li>
				  {% ENDFOR %}
				  {% ENDIF %}
				  <!-- /Если есть список из любых новостей и если в тарифном плане подключен модуль новостей -->
				  <!-- Если есть список новости магазина и если в тарифном плане подключен модуль новостей -->
				  {% IFNOT news_list_shop_empty && TARIFF_FEATURE_NEWS %}
				  {% FOR news_list_shop %}
					<li class="item">
					  <div class="postTitle">
						<a href="{news_list_shop.URL}" title="Перейти к странице &laquo;{news_list_shop.TITLE}&raquo;" {% IF news_list_shop.ID = NEWS_ID %}class="selected"{%ENDIF%}>{news_list_shop.TITLE}</a>
					  </div>
					  <div class="date">
						<span class="d-month">{news_list_shop.TIME | date("m")}</span>
						<span class="d-day">{news_list_shop.TIME | date("d")}</span>
						<span class="d-year">{news_list_shop.TIME | date("Y")}</span>
					  </div>
					  <div class="postContent">
						<p>{news_list_shop.TEXT_SHORT}</p>
					  </div>
					</li>
				  {% ENDFOR %}
				  {% ENDIF %}
				  <!-- /Если есть список новости магазина и если в тарифном плане подключен модуль новостей -->
				  <!-- Если есть список статей магазина и если в тарифном плане подключен модуль новостей -->
				  {% IFNOT news_list_articles_empty && TARIFF_FEATURE_NEWS %}
				  {% FOR news_list_articles %}
					<li class="item">
					  <div class="postTitle">
						<a href="{news_list_articles.URL}" title="Перейти к странице &laquo;{news_list_articles.TITLE}&raquo;" {% IF news_list_articles.ID = NEWS_ID %}class="selected"{%ENDIF%}>{news_list_articles.TITLE}</a>
					  </div>
					  <div class="date">
						<span class="d-month">{news_list_articles.TIME | date("m")}</span>
						<span class="d-day">{news_list_articles.TIME | date("d")}</span>
						<span class="d-year">{news_list_articles.TIME | date("Y")}</span>
					  </div>
					  <div class="postContent">
						<p>{news_list_articles.TEXT_SHORT}</p>
					  </div>
					</li>
				  {% ENDFOR %}
				  {% ENDIF %}
				  <!-- /Если есть список статей магазина и если в тарифном плане подключен модуль новостей -->
				  <!-- Если есть список материалов СМИ магазина и если в тарифном плане подключен модуль новостей -->
				  {% IFNOT news_list_mass_media_empty && TARIFF_FEATURE_NEWS %}
				  {% FOR news_list_mass_media %}
					<li class="item">
					  <div class="postTitle">
						<a href="{news_list_mass_media.URL}" title="Перейти к странице &laquo;{news_list_mass_media.TITLE}&raquo;" {% IF news_list_mass_media.ID = NEWS_ID %}class="selected"{%ENDIF%}>{news_list_mass_media.TITLE}</a>
					  </div>
					  <div class="date">
						<span class="d-month">{news_list_mass_media.TIME | date("m")}</span>
						<span class="d-day">{news_list_mass_media.TIME | date("d")}</span>
						<span class="d-year">{news_list_mass_media.TIME | date("Y")}</span>
					  </div>
					  <div class="postContent">
						<p>{news_list_mass_media.TEXT_SHORT}</p>
					  </div>
					</li>
				  {% ENDFOR %}
				  {% ENDIF %}
				  <!-- /Если есть список материалов СМИ магазина и если в тарифном плане подключен модуль новостей -->
				  </ul>
				</div>
			  </div>
			  <!-- /END Все Новости -->

В main.css после:

.header-content .yt-main-menu {
  float: right;
  padding: 10px 0;
}
.header-content .yt-main-menu .contacts{float:right;width:50%;}
.header-content .yt-main-menu .contacts p, .header-content .yt-main-menu .contacts a{
font-family: "Open Sans Condensed",sans-serif;
text-align:right;
color: #333333;
}

вставьте:

.news{float:left; width:45%; background:url('ссылка на картинку') no-repeat left center;padding-left:100px;}

вместо текста укажите ссылку на картинку

3. В main.css найдите:

.yt-bannertop {
  background-color: #f3f3f3;
  padding: 30px 0 25px;
}

измените значение у стиля background-color

4. В main.css найдите:

body {
  background-color: #ffffff;
  color: #333333;
  font-family: Arial;
  font-size: 12px;
  line-height: 1;
  outline: medium none;
  position: relative;
}

вместо background-color: #ffffff; используйте background: url('ссылка на картинку\фон') repeat;

Наверх

#10 Ash74

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

Пользователи
42 сообщений

ГородЧелябинск

Отправлено 27 Май 2015 - 14:24

Добрый день.

Сделал все, как написано по вопросам 1 и 2. Вот что получилось:

Блок новостей нужно уменьшить в размерах, чтобы он вписывался в эту область. И чтобы показывалась только одна новость в каждом слайде.

Спасибо!

Наверх

#11 Vaccina

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

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

Отправлено 28 Май 2015 - 04:48

В строке main.css :

.news{float:left; width:45%; background:url('ссылка на картинку') no-repeat left center;padding-left:100px;}

измените ширину блока новостей 45%

В main.js найдите:

// Слайдер Новостей магазина на главной
jQuery(document).ready(function($){
$('.block-latestblog ul.list-blog').owlCarousel({
	 itemsCustom: [
		 [0, 1],[480, 1],[640, 2],[768, 3],[992, 4],[1170, 4]
	 ],
	 pagination: false,
	 itemsScaleUp : true,
	 slideSpeed : 500,
	 autoPlay: true,
	 afterAction: function (e) {
		 if(this.$owlItems.length > this.options.items){
			 $('.block-latestblog .navslider').css('display', 'block');
		 }else{
			 $('.block-latestblog .navslider').css('display', 'none');
		 }
	 }
});
$('.block-latestblog .navslider .prev').on('click', function(e){
	 e.preventDefault();
	 $('.block-latestblog ul.list-blog').trigger('owl.prev');
});
$('.block-latestblog .navslider .next').on('click', function(e){
	 e.preventDefault();
	 $('.block-latestblog ul.list-blog').trigger('owl.next');
});
});

после него пропишите:

// Слайдер Новостей магазина в шапке сайта
jQuery(document).ready(function($){
$('.header-content .block-latestblog ul.list-blog').owlCarousel({
	 itemsCustom: [
		 [0, 1],[480, 1],[640, 1],[768, 1],[992, 1],[1170, 1]
	 ]
});
});

Наверх

Обратно в Каталог товаров

Темы с аналогичным тегами каталог товаров

Вопросы работы сервиса StoreLand → Дизайн → Шаблон Лотос → Каталог товаров → Проблема С Большим Изображением В Internet Explorer Автор Гость_ser300774_* , 12 марта 2019 Каталог товаров и 1 еще...	0 Ответов 1 244 Просмотров	ser300774 12 марта 2019
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Туризм → Каталог товаров → Не Работает Адаптивное Меню Каталога Товаров Автор Гость_Sharlex_* , 16 апр. 2018 каталог товаров, адаптивное меню	1 Ответ 1 982 Просмотров	Sharlex 16 апр. 2018
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Осень → Каталог товаров → Изменение Лесенки Каталога Товаров Автор Гость_SOGOOD_* , 17 марта 2018 каталог товаров	2 Ответов 2 587 Просмотров	SOGOOD 05 апр. 2018
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Туризм → Изменение общей стилистики → Создание Страницы Отзывов О Товарах Автор Гость_Sharlex_* , 13 февр. 2018 отзывы, каталог товаров и 1 еще...	Популярная тема 9 Ответов 3 935 Просмотров	MikDark 05 июля 2018
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Туризм → Каталог товаров → Закрепить Облать Каталог Товаров При Прокрутке Автор Гость_Sharlex_* , 24 дек. 2017 Каталог товаров, каталог	8 Ответов 2 782 Просмотров	Sharlex 30 дек. 2017

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

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

Изменить Картинки В Каталоге Товаров

Темы с аналогичным тегами каталог товаров

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

Войти

Google поиск