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

[dplace]

Добрый день!

Нашел в форуме информацию как сделать, чтобы при нажатии на каталог товаров (слева, вертикальное меню) отображались категории, а не товары в перемешку.

Для этого зайдите в Сайт - Редактор тем - Товары - найдите сл.строку:


<h1>{CATEGORY_NAME}</h1>


и добавьте ниже следующий блок:


{% IF IS_FULL_CATALOG %}
    <!-- Блок навигации по категориям, вложенным в текущую категорию -->
    <ul class="content_catalog_nested_categories">
      {% FOR nested_categories_list %}
        <li>
          <div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div>
          <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a>
        </li>
      {% ENDFOR %}
    </ul>
    <br clear="all"/>
  {% ELSE %}



и в самом конце этого же файла допишите сл.строку:


{% ENDIF %}



Как теперь категории спустить немного вниз, чтобы не налазили на шапку?

amleto-shop.ru

Спасибо

[Koderhan]

dplace (23 Октябрь 2012 - 12:34) писал:

Добрый день!

Нашел в форуме информацию как сделать, чтобы при нажатии на каталог товаров (слева, вертикальное меню) отображались категории, а не товары в перемешку.

Для этого зайдите в Сайт - Редактор тем - Товары - найдите сл.строку:


<h1>{CATEGORY_NAME}</h1>


и добавьте ниже следующий блок:


{% IF IS_FULL_CATALOG %}
    <!-- Блок навигации по категориям, вложенным в текущую категорию -->
    <ul class="content_catalog_nested_categories">
      {% FOR nested_categories_list %}
        <li>
          <div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div>
          <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a>
        </li>
      {% ENDFOR %}
    </ul>
    <br clear="all"/>
  {% ELSE %}



и в самом конце этого же файла допишите сл.строку:


{% ENDIF %}



Как теперь категории спустить немного вниз, чтобы не налазили на шапку?

amleto-shop.ru

Спасибо

Можно добавить отступ сверху для класса .content_catalog_nested_categories.
это можно сделать по следующей инструкции.
Зайти в панели администратора Сайт -> Редактр тем. Открыть файл main.csstemplate и добавить в самом конце файла код:

.page-headline .content_catalog_nested_categories {
	 padding-top:70px;
		
}

Пожалуйста, не забывайте делать резервные копии перед редактированием шаблона!

[Vaccina]

Так же можно убрать позиционирование заголовка, тем самым сместив категории.
В файле стилей main.css найдите

.page-headline h1 {
	color: #000000;
	font: 30px/70px "Trebuchet MS",Arial,Helvetica,sans-serif;
	height: 2em;
	overflow: hidden;
	padding-left: 20px;
	position: absolute;
	width: 940px;
}

и заменить на

.page-headline h1 {
	color: #000000;
	font: 30px/70px "Trebuchet MS",Arial,Helvetica,sans-serif;
	height: 2em;
	overflow: hidden;
	padding-left: 20px;
	max-width: 640px;
}

Этот вариант немного укоротит поле для заголовка.

[dplace]

Спасибо большое

[laramah]

Помогите пожалуйста!!!!Cделала,все так как описано выше,вместо списка товаров-получилось сделать названия категорий с изображениями,а вот сдвинуть их вниз и увеличить расстояние между изображениями и текстом,чтоб не был вплотную к изображению по выше описанному не получается мой сайт www.conte-kolgotki.ru.

[Koderhan]

laramah (30 Ноябрь 2012 - 13:03) писал:

Помогите пожалуйста!!!!Cделала,все так как описано выше,вместо списка товаров-получилось сделать названия категорий с изображениями,а вот сдвинуть их вниз и увеличить расстояние между изображениями и текстом,чтоб не был вплотную к изображению по выше описанному не получается мой сайт www.conte-kolgotki.ru.

Здравствуйте.
Это происходит из-за того что категории находятся в том div-блоке, что и заголовок.
Код с категориями вставить сразу после кода:

<div class="page-headline">
  <h1>{CATEGORY_NAME}</h1>
</div>

Далее.
В файл main.csstemplate.
Добавить код:

.content_catalog_nested_categories li .imagem {
  height:100px;  
}
.content_catalog_nested_categories li .imagem img {  
  width: 115px;
}

[laramah]

Cделала так как вы описали,получилось вообще не то-значки выстроились по вертикали,названия категорий вообще посъезжали,мне нужно чтоб изображения категорий были как сейчас по горизонтали,только раздвинуть их ,чтоб не были так близко друг ко другу,и изображение почему-то обрезается-как исправить,и названия категорий под изображениями чтобы были в одной линии -не скакали

[support 2.0]

laramah (30 Ноябрь 2012 - 14:17) писал:

Cделала так как вы описали,получилось вообще не то-значки выстроились по вертикали,названия категорий вообще посъезжали,мне нужно чтоб изображения категорий были как сейчас по горизонтали,только раздвинуть их ,чтоб не были так близко друг ко другу,и изображение почему-то обрезается-как исправить...

1. Чтобы изображения не обрезались, нужно в файле main.css найти блок (214 строка)

.content_catalog_nested_categories li {
text-align: center;
float: left;
width: 135px;
height: 135px;
overflow: hidden;
padding: 1em;
margin: 0px;
list-style-type: none;
background: none !important;
}

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

.content_catalog_nested_categories li {
text-align: center;
float: left;
width: 160px;
height: 160px;
overflow: hidden;
padding: 1em;
margin: 0px;
list-style-type: none;
background: none !important;
}

Здесь нужно было значения

width: 135px;
height: 135px;

заменить на 160, т.е. у Вас максимальный размер изображений 160px.

2. Чтобы раздвинуть изображения, в том же самом блоке есть тег

padding: 1em;

Он делает отступ со всех сторон изображения одинаковый.
Чтобы сделать отступ только справа, нужно задать тег padding-right:30px. Значение 30 меняйте на любое. В результате у Вас должно получиться следующее

.content_catalog_nested_categories li {
text-align: center;
float: left;
width: 160px;
height: 160px;
overflow: hidden;
padding: 1em;
margin: 0px;
list-style-type: none;
background: none !important;
padding-right: 30px;
}

laramah (30 Ноябрь 2012 - 14:17) писал:

названия категорий под изображениями чтобы были в одной линии -не скакали

Не совсем поняла что Вы имеете ввиду. Опишите поподробнее что бы Вы хотели сделать

[laramah]

спасибо, получилось!
По поводу названий категорий ,котрые под этими изображениями посмотрите тут http://conte-kolgotki.ru/catalog
я хочу сделать отступ текста(названий категорий) от изображения,и чтоб этот текст был на одной линии,сейчас посмотрите  подпись под изображением Charmante залезла  под рисунок-не красиво

[support 2.0]

laramah (30 Ноябрь 2012 - 14:49) писал:

спасибо, получилось!
По поводу названий категорий ,котрые под этими изображениями посмотрите тут http://conte-kolgotki.ru/catalog
я хочу сделать отступ текста(названий категорий) от изображения,и чтоб этот текст был на одной линии,сейчас посмотрите  подпись под изображением Charmante залезла  под рисунок-не красиво

По поводу того, чтобы текст начинался и заканчивался на одной линии не думаю что получится, т.к. у Вас 3 ячейки и каждая ячейка составляет размер 224х272 пикселя, каждой изображение имеет разную высоту и ширину, далее столько пикселей сколько остается тексту, он и относительно этого размещается. Поэтому либо изначально рассчитывайте чтобы все изображения имели одинаковую высоту, либо придумывать нужно что-то еще.

Для того, чтобы увеличить отступ между изображением и текстом, найдите в файле main.css блок (69 строка)

/*images*/
.p-img {
  margin: 0px 10px 0px 0px;
  padding: 1px;
  border: 1px solid #CCC;
}

и сразу за ним поставьте

div img {
  margin: 0px 10px 10px 0px;
  padding: 1px;
}