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


Вопросы По Изменению Внешнего Вида Сайта


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

#1 Equator

Equator

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

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

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

Добрый день, хотелось бы изменить выделенные на скриншоте элементы. Например изменить фон, бордюр, тень и т.д. Интересует изменение всех подобных элементов на сайте. Понял, что это возможно сделать в файле "товары". Но мне нужно, чтобы при наведении на эти элементы изменялся их вид, т.е. применить :hover. Не могли бы вы помочь мне с этим?

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

  • 2014-06-15_175515.jpg


#2 Dars

Dars

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

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

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

Просмотр сообщенияEquator (15 Июнь 2014 - 17:05) писал:

Добрый день, хотелось бы изменить выделенные на скриншоте элементы. Например изменить фон, бордюр, тень и т.д. Интересует изменение всех подобных элементов на сайте. Понял, что это возможно сделать в файле "товары". Но мне нужно, чтобы при наведении на эти элементы изменялся их вид, т.е. применить :hover. Не могли бы вы помочь мне с этим?
Здравствуйте! Чтобы изменить данные элементы при наведении, необходимо в шаблоне "Товары" найти и заменить строку:
			<select name="per_page"  onchange="this.form.submit();" style="background: black;">
на
			<select class="show_by" name="per_page"  onchange="this.form.submit();" style="background: black;">
и
			<select name="goods_search_field_id" onchange="this.form.submit();" style="padding-left: 2px; padding-top: 3px; padding-bottom: 3px; padding-right: 2px; font-size: 12px !important; color: #525252; text-align: left; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; vertical-align: middle; text-shadow: 1px 0 0 #fff; cursor: pointer; background-image: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5); border: 1px solid #bbb; border-top-color: #ccc; border-bottom-color: #aaa; border-radius: 2px; box-shadow: 0 0 3px rgba(0,0,0,0.1);">
на
			<select class="sort_by" name="goods_search_field_id" onchange="this.form.submit();" style="padding-left: 2px; padding-top: 3px; padding-bottom: 3px; padding-right: 2px; font-size: 12px !important; color: #525252; text-align: left; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; vertical-align: middle; text-shadow: 1px 0 0 #fff; cursor: pointer; background-image: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5); border: 1px solid #bbb; border-top-color: #ccc; border-bottom-color: #aaa; border-radius: 2px; box-shadow: 0 0 3px rgba(0,0,0,0.1);">
Затем в main.css добавить строки:
.sort_by:hover {}
.show_by:hover {}
и в фигурных скобках указать необходимые вам стили. Если с ними нужна будет помощь - пишите, какие конкретно изменения вы хотите произвести.

#3 Equator

Equator

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

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

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

Все получилось, спасибо.
Подскажите еще вот что. В каталоге товаров мне нужно изменить шрифт текста краткого описания. Как это сделать я знаю, но когда меняю, то вместе со шрифтом краткого описания меняются шрифты у некоторых других элементов на странице, например шрифт пути страницы. Подскажите, как поменять шрифт только у краткого описания, а остальные не трогать?
Второй вопрос: мне нужно, чтобы краткое описание отображалось не полностью. Т.е. в режиме отображения таблицей краткое описание занимало 3 строчки и не переходило на четвертую, а заканчивалось многоточием. И тоже самое в режиме отображения списком, только там краткое описание должно занимать 2 строчки. Показал на скринах, как примерно должно быть.
И последний вопрос: можно ли изменить переключатель режима просмотра в каталоге и сделать его не в виде текста, а в виде .png файлы, т.е. заменить слова "таблица" и "список" на изображения ( размер 25x25px каждое)?

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

  • 2014-06-16_221929.jpg
  • 2014-06-16_222702.jpg


#4 Сake

Сake

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

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

Отправлено 17 Июнь 2014 - 02:04

Цитата

Подскажите еще вот что. В каталоге товаров мне нужно изменить шрифт текста краткого описания. Как это сделать я знаю, но когда меняю, то вместе со шрифтом краткого описания меняются шрифты у некоторых других элементов на странице, например шрифт пути страницы. Подскажите, как поменять шрифт только у краткого описания, а остальные не трогать?

Добавьте в конец вашего файла стилей main.css следующий класс

.contm > p {
  font: 14px/20px Arial,Helvetica,sans-serif;
}

после этого измените параметры шрифта в данном классе на необходимые.

Цитата

Второй вопрос: мне нужно, чтобы краткое описание отображалось не полностью. Т.е. в режиме отображения таблицей краткое описание занимало 3 строчки и не переходило на четвертую, а заканчивалось многоточием. И тоже самое в режиме отображения списком, только там краткое описание должно занимать 2 строчки. Показал на скринах, как примерно должно быть.

В конец файла main.js добавьте следующий код

$(function() {
$('.contm > p').each(function(){
  while ($(this).outerHeight() >= 50) {
	$(this).text($(this).text().slice(0,-4)+'...');
  }
});
$('.goodsListItemBlock > p').each(function(){
  while ($(this).outerHeight() >= 60) {
	$(this).text($(this).text().slice(0,-4)+'...');
  }
});
});

Цитата

И последний вопрос: можно ли изменить переключатель режима просмотра в каталоге и сделать его не в виде текста, а в виде .png файлы, т.е. заменить слова "таблица" и "список" на изображения ( размер 25x25px каждое)?

Можно, добавьте в ваш файл стилей main.css следующий код

.viewSelector > *:first-child,
.viewSelector > *:last-child {
  display: inline-block;
  height: 25px;
  text-indent: -9999px;
  width: 25px;
  background: url("{ASSETS_IMAGES_PATH}view-table.png") no-repeat;
}
.viewSelector > *:last-child {
  background: url("{ASSETS_IMAGES_PATH}view-list.png") no-repeat;
}

а после загрузите изображения view-table.png и view-list.png в разделе Сайт -> Редактор шаблонов.

#5 Equator

Equator

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

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

Отправлено 18 Июнь 2014 - 00:18

Все получилось, спасибо. Сделал так, чтобы при наведении на переключатель режима просмотра, он менялся на другое изображение (с помощью :hover), но сделать так, чтобы выбранный переключатель оставался таким же, как при наведении (с помощью .active) не получается. Не подскажите, как это сделать?

#6 Сake

Сake

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

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

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

Найдите в вашем файле стилей main.css

.viewSelector > *:first-child:hover

и замените на

.viewSelector > *:first-child:hover,
.viewSelector > strong:nth-of-type(1)

далее найдите

.viewSelector > *:last-child:hover

и замените на

.viewSelector > *:last-child:hover,
.viewSelector > strong:nth-of-type(2)


#7 Equator

Equator

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

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

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

Работает, только почему-то когда выбираешь правый переключатель, то к нему применяется такое же изображение, как к левому, при наведении все как надо, а вот при выборе нет.

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

  • 2014-06-18_023639.jpg


#8 Сake

Сake

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

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

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

Попробуйте немного изменить селектор, заменив в 2х случаях :nth-of-type на :nth-child

#9 Equator

Equator

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

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

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

Добавил для изменения в корзине количества товара, кнопки "plus" и "minus", но вот что странно. Если в корзине один вид товара, то все в порядке, но если добавить в нее несколько разных товаров, то при нажатии один раз на плюс, количество увеличивается не на один, а на 2, 3 и 4 в зависимости, от количества видов товаров в корзине. Помогите пожалуйста это исправить.
И подскажите, как сделать такие же кнопки на странице товаров.

#10 Equator

Equator

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

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

Отправлено 24 Июнь 2014 - 01:22

?

#11 Сake

Сake

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

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

Отправлено 24 Июнь 2014 - 04:15

Найдите в вашем шаблоне "Корзина" код

<script type="text/javascript" >
						 $(document).ready(function() {
						 $('.minus').click(function () {
						  var $input = $(this).parent().find('input');
						  var count = parseInt($input.val()) - 1;
						  count = count < 1 ? 1 : count;
						  $input.val(count);
						  $input.change();
						  return false;
						 });
						$('.plus').click(function () {
						var $input = $(this).parent().find('input');
						$input.val(parseInt($input.val()) + 1);
						$input.change();
						return false;
						});
						});
				   </script>

и перенесите его, вставив в самый конец шаблона. Для страницы товара вам необходимо выполнить аналогичное изменение - в шаблоне "Товар" найдите код

<div class="more-link"  onclick="$('.goodsDataForm').submit(); return false;" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину" href="#">В корзину</div><br /><br />
					  <!-- Если в тарифном плане подключен модуль сравнения товаров -->
					  {% IF TARIFF_FEATURE_GOODS_COMPARE %}
						<!-- Если не выключен модуль сравнения товаров, то покажем кнопку сравнения товаров -->
						{% IFNOT SETTINGS_COMPARE_DISABLE %}
						  <a class="goodsDataCompareButton add" {% IF GOODS_MOD_IS_HAS_IN_COMPARE_LIST %}style="display:none;"{% ENDIF %} rel="{COMPARE_ADD_URL}?return_to={CURRENT_URL | urlencode}" title="Добавить &laquo;{GOODS_NAME}&raquo; к списку сравнения с другими товарами" href="#" >Добавить к сравнению</a>
						  <a class="goodsDataCompareButton delete" {% IFNOT GOODS_MOD_IS_HAS_IN_COMPARE_LIST %}style="display:none;"{% ENDIF %} rel="{COMPARE_DELETE_URL}?return_to={CURRENT_URL | urlencode}" title="Убрать &laquo;{GOODS_NAME}&raquo; из списка сравнения с другими товарами" href="#" >Убрать из сравнения</a>
						{% ENDIF %}
					  {% ENDIF %}

и замените его на

<div class="nums">
					<input name="form[quantity][{GOODS_MOD_ID}]" value="1" />
				  <span class="plus">+</span>
				  <span class="minus">-</span>
						 </div>
						 <script type="text/javascript" >
						 $(document).ready(function() {
						 $('.minus').click(function () {
						  var $input = $(this).parent().find('input');
						  var count = parseInt($input.val()) - 1;
						  count = count < 1 ? 1 : count;
						  $input.val(count);
						  $input.change();
						  return false;
						 });
						$('.plus').click(function () {
						var $input = $(this).parent().find('input');
						$input.val(parseInt($input.val()) + 1);
						$input.change();
						return false;
						});
						});
				   </script>
</div>
<div class="more-link"  onclick="$('.goodsDataForm').submit(); return false;" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину" href="#">В корзину</div><br /><br />
					  <!-- Если в тарифном плане подключен модуль сравнения товаров -->
					  {% IF TARIFF_FEATURE_GOODS_COMPARE %}
						<!-- Если не выключен модуль сравнения товаров, то покажем кнопку сравнения товаров -->
						{% IFNOT SETTINGS_COMPARE_DISABLE %}
						  <a class="goodsDataCompareButton add" {% IF GOODS_MOD_IS_HAS_IN_COMPARE_LIST %}style="display:none;"{% ENDIF %} rel="{COMPARE_ADD_URL}?return_to={CURRENT_URL | urlencode}" title="Добавить &laquo;{GOODS_NAME}&raquo; к списку сравнения с другими товарами" href="#" >Добавить к сравнению</a>
						  <a class="goodsDataCompareButton delete" {% IFNOT GOODS_MOD_IS_HAS_IN_COMPARE_LIST %}style="display:none;"{% ENDIF %} rel="{COMPARE_DELETE_URL}?return_to={CURRENT_URL | urlencode}" title="Убрать &laquo;{GOODS_NAME}&raquo; из списка сравнения с другими товарами" href="#" >Убрать из сравнения</a>
						{% ENDIF %}
					  {% ENDIF %}

возможно понадобиться небольшое выравнивание через стили.

#12 Equator

Equator

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

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

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

Спасибо.
Появился еще один вопрос. На странице товара сделал вкладки, в первую поместил описание товара, во вторую характеристики и модификации, но вот перенести отзывы в третью вкладку не получается, отзывы там просто не отображаются. Помогите пожалуйста. Вкладки делал по инструкции из этой темы http://forum.storela...бов/#entry35035

#13 Dars

Dars

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

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

Отправлено 30 Июнь 2014 - 17:45

Просмотр сообщенияEquator (30 Июнь 2014 - 17:21) писал:

Спасибо.
Появился еще один вопрос. На странице товара сделал вкладки, в первую поместил описание товара, во вторую характеристики и модификации, но вот перенести отзывы в третью вкладку не получается, отзывы там просто не отображаются. Помогите пожалуйста. Вкладки делал по инструкции из этой темы http://forum.storela...бов/#entry35035
Воспользуйтесь вот этой инструкцией: http://forum.storela...дки/#entry38402

#14 Equator

Equator

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

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

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

Сделал вкладки по инструкции, которую вы посоветовали. Хотелось бы убрать несколько элементов и блоков, но не понимаю в каком файле они находятся. Например, в каком файле находится следующая строчка?
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">


#15 MikDark

MikDark

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

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

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

Просмотр сообщенияEquator (02 Июль 2014 - 14:47) писал:

Сделал вкладки по инструкции, которую вы посоветовали. Хотелось бы убрать несколько элементов и блоков, но не понимаю в каком файле они находятся. Например, в каком файле находится следующая строчка?
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">

Смотря где Вы это смотрите. Если в карточке товара, то должна находиться в шаблоне Товар.

#16 Equator

Equator

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

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

Отправлено 11 Июль 2014 - 23:44

Подскажите пожалуйста, во сплывающем окне при добавлении товара в корзину, как изменить текст? Нужно изменить строчку "Товар «name» успешно добавлен в вашу корзину" на "Товар добавлен в корзину".

#17 Сake

Сake

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

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

Отправлено 11 Июль 2014 - 23:55

Информацию по данному вопросу вы можете найти в сообщении темы форума http://forum.storela...сия/#entry20687

#18 Equator

Equator

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

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

Отправлено 12 Июль 2014 - 00:26

Благодарю. Еще один вопрос по тому же окну. Как убрать кнопку "close" из левого верхнего угла?

#19 Сake

Сake

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

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

Отправлено 12 Июль 2014 - 01:00

Добавьте в ваш файл стилей main.css

#closeBut {
  display: none;
}





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

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