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


Каталог Товаров (Расположение Названия, Цены И Т.п.)

Автор palikar, 23 янв. 2013 01:21

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

#1 palikar

palikar

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

  • Пользователи
  • PipPip
  • 35 сообщений
  • ГородКалининград

Отправлено 23 Январь 2013 - 01:21

Здравствуйте.
Все ниже вопросы про каталог товаров.
1. Как двигать картинку, название, цену (вверх, вниз)? Я двигал, всё методом тыка, что-то надвигал, может накосячил. Подскажите пож. как правильно.
2. Как сделать так, если название получается в две строки, то цена опускается ниже, под эту строку, а не так как сейчас, цена опущена сразу с запасом?
3. Как изменить промежуток между строками в названии?
4. Как сделать чтобы название было не одними большими буквами, а с учётом регистра?

Все картинки будут размером как красный квадрат.
Сайт lavkaanime.ru

Изображение

#2 Koderhan

Koderhan

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

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

Отправлено 23 Январь 2013 - 05:24

В файле "main.csstemplate".

Цитата

2. Как сделать так, если название получается в две строки, то цена опускается ниже, под эту строку, а не так как сейчас, цена опущена сразу с запасом?
Найти код:
.goodsListItemName				  {padding:0px 3px 1.6em 3px;margin:0px;max-height:13px;overflow:hidden;}
Заменить:

.goodsListItemName				  {padding:0px 3px 1.6em 3px;margin:0px;max-height: 0px;overflow:hidden;}

Цитата

3. Как изменить промежуток между строками в названии?

Найти код:
.goodsListItemName				  {padding:0px 3px 1.6em 3px;margin:0px;max-height:13px;overflow:hidden;}
Заменить:
.goodsListItemName				  {padding:0px 3px 1.6em 3px;margin:0px;max-height:13px;overflow:hidden;line-height: 1;}
line-height - задает меж строчный интервал.
Так же можете изменить расположение названия,  установив для этого же блока значение.
margin-top.

Цитата

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

Найти код:
h3 {
  font: 20px/20px "Trebuchet MS", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  color: #333;
}
Заменить:
h3 {
  font: 20px/20px "Trebuchet MS", Helvetica, Arial, sans-serif;
  color: #333;
}
  text-transform: uppercase; - делает буквы в верхнем регистре.


Цитата

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

Найти код:
.goods-image-other			  {max-width:185px; max-height:185px}

Заменить:
.goods-image-other {
max-width:185px;/*максимальная ширина изображения*/
max-height:185px/*максимальная высота изображения*/

margin-top: 0px;/*внешний верхний отступ*/
margin-left: 0px;/*внешний левый отступ*/
}
Подробнее про margin http://htmlbook.ru/css/margin

#3 palikar

palikar

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

  • Пользователи
  • PipPip
  • 35 сообщений
  • ГородКалининград

Отправлено 23 Январь 2013 - 10:44

Спасибо за ответ!
Сделал как сказали, что-то получилось, но цена так и осталась опущена на определённое расстояние от названия. Что я не так сделал?
Ещё вопрос: каждый товар имеет вокруг обводку в 1 пикс светло-серого цвета, при наведения она становится оранжевой. Как изменить эти цвета?

#4 Koderhan

Koderhan

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

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

Отправлено 23 Январь 2013 - 11:11

В файле "main.csstemplate".
Найти код:
.goodsListItemName				 {padding:0px 3px 1.6em 3px;margin-top:3px;max-height:0px;overflow:hidden;line-height: 0.5;}
Заменить:
.goodsListItemName {line-height: 1;overflow: hidden;}

Постоянный цвет рамки.
В файле "main.csstemplate".
Найти код:
.withBorder				 {border:1px solid #E5E5E5 !important;}

http://htmlbook.ru/css/border
Цвет при наведение на товар.
.withBorder:hover		 {border-color:#ff8d13 !important;}
http://htmlbook.ru/css/border-color

#5 palikar

palikar

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

  • Пользователи
  • PipPip
  • 35 сообщений
  • ГородКалининград

Отправлено 23 Январь 2013 - 12:06

Спасибо, помогло!

Как сделать, чтобы выделенный пункт меню закрывал и левую вертикальную полосу? А сейчас получается не симметрично.
Изображение

#6 Koderhan

Koderhan

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

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

Отправлено 23 Январь 2013 - 12:52

В файле "main.csstemplate".
Найти код:
#mainmenu li a{
  font: bold 12px/40px Helvetica, Tahoma, Arial, sans-serif;
  color: #FFF;
  display: block;
  float: left;
  padding-right: 15px;
  padding-left: 15px;
  text-transform: uppercase;
  text-decoration: none;
  background: url({ASSETS_IMAGES_PATH}tm_link_border.gif) no-repeat right top; }
Заменить:
  #mainmenu li a{
  font: bold 12px/40px Helvetica, Tahoma, Arial, sans-serif;
  color: #FFF;
  display: block;
  float: left;
  padding-right: 15px;
  padding-left: 15px;
  text-transform: uppercase;
  text-decoration: none;
}

#7 ais-83

ais-83

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

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

Отправлено 11 Март 2013 - 09:30

Добрый день. 1) Подскажите как увеличить промежуток между названиями в левом каталоге. Сначала я могла это менять в border в leftmenu li li a, но теперь ничего не меняется(
2) Как пододвинуть влево-вправо само название "каталог товаров". Сами категории двигаются, а эта строка нет(
Шаблон сияние
Спасибо

#8 Koderhan

Koderhan

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

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

Отправлено 11 Март 2013 - 09:39

Цитата

1) Подскажите как увеличить промежуток между названиями в левом каталоге. Сначала я могла это менять в border в leftmenu li li a, но теперь ничего не меняется
В файле "main.css".
Найти код:
.leftmenu li li a{
  display: block;
  padding: 4px 10px;
  border-bottom: 1px solid #D6D6D6;
  font: normal 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #999999;
  text-decoration: none;
}
Заменить:
.leftmenu li li a{
  display: block;
  padding: 4px 10px;
  border-bottom: 1px solid #D6D6D6;
  font: normal 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #999999;
  text-decoration: none;
  height: 24px;/*высота*/
}

Цитата

Как пододвинуть влево-вправо само название "каталог товаров". Сами категории двигаются, а эта строка нет

В файле "main.css".
Найти код:
.leftmenu li h2 {
  font: bold 17px/20px Helvetica, "Trebuchet MS", Arial, sans-serif;
  color: #069;
  text-transform: uppercase;
}
Заменить:
.leftmenu li h2 {
  font: bold 17px/20px Helvetica, "Trebuchet MS", Arial, sans-serif;
  color: #069;
  text-transform: uppercase;
  margin-left: 8px;/*отступ слева*/
}

#9 ais-83

ais-83

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

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

Отправлено 11 Март 2013 - 10:30

Просмотр сообщенияKoderhan (11 Март 2013 - 09:39) писал:

В файле "main.css".
Найти код:
.leftmenu li li a{
display: block;
padding: 4px 10px;
border-bottom: 1px solid #D6D6D6;
font: normal 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #999999;
text-decoration: none;
}
Заменить:
.leftmenu li li a{
display: block;
padding: 4px 10px;
border-bottom: 1px solid #D6D6D6;
font: normal 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #999999;
text-decoration: none;
height: 24px;/*высота*/
}



В файле "main.css".
Найти код:
.leftmenu li h2 {
font: bold 17px/20px Helvetica, "Trebuchet MS", Arial, sans-serif;
color: #069;
text-transform: uppercase;
}
Заменить:
.leftmenu li h2 {
font: bold 17px/20px Helvetica, "Trebuchet MS", Arial, sans-serif;
color: #069;
text-transform: uppercase;
margin-left: 8px;/*отступ слева*/
}

ничего не меняется в обоих случаях(( подозреваю, что я сделала что-то, что не дает мне менять левый каталог, вот код каталога из хтмл:

        <!-- Каталог -->
         <h3 class="contentTbodyCatalogHeader">Каталог товаров</h3>
              <ul id="subNavigation">
         {%IFNOT catalog_empty %}
                  {% FOR catalog %}
                    {% IFNOT catalog.HIDE %}
                      <li>
                        <a href="{catalog.URL}"
                                                                              {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{%ELSE%}style="padding-left:20px; color: #616161;"{% ENDIF %}
                          {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
                        >{catalog.NAME}</a>
                      </li>
                    {% ENDIF %}
                  {% ENDFOR %}
                {% ENDIF %}
       </ul>



       <!-- end Каталог -->

#10 Stasya

Stasya

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

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

Отправлено 11 Март 2013 - 13:06

Просмотр сообщенияais-83 (11 Март 2013 - 10:30) писал:

ничего не меняется в обоих случаях(( подозреваю, что я сделала что-то, что не дает мне менять левый каталог, вот код каталога из хтмл:

<!-- Каталог -->
<h3 class="contentTbodyCatalogHeader">Каталог товаров</h3>
  <ul id="subNavigation">
{%IFNOT catalog_empty %}
  {% FOR catalog %}
{% IFNOT catalog.HIDE %}
  <li>
<a href="{catalog.URL}"
  {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{%ELSE%}style="padding-left:20px; color: #616161;"{% ENDIF %}
  {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
>{catalog.NAME}</a>
  </li>
{% ENDIF %}
  {% ENDFOR %}
{% ENDIF %}
   </ul>



   <!-- end Каталог -->

Код каталога здесь не нужен. Все дело в  стилях. Пришлите, пожалуйста, номер Вашего аккаунта или ссылку на Ваш сайт

#11 support 2.0

support 2.0

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

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

Отправлено 11 Март 2013 - 13:09

Просмотр сообщенияais-83 (11 Март 2013 - 10:30) писал:

ничего не меняется в обоих случаях(( подозреваю, что я сделала что-то, что не дает мне менять левый каталог, вот код каталога из хтмл:

<!-- Каталог -->
<h3 class="contentTbodyCatalogHeader">Каталог товаров</h3>
  <ul id="subNavigation">
{%IFNOT catalog_empty %}
  {% FOR catalog %}
{% IFNOT catalog.HIDE %}
  <li>
<a href="{catalog.URL}"
  {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{%ELSE%}style="padding-left:20px; color: #616161;"{% ENDIF %}
  {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
>{catalog.NAME}</a>
  </li>
{% ENDIF %}
  {% ENDFOR %}
{% ENDIF %}
   </ul>



   <!-- end Каталог -->

я так понимаю, речь идет об аккаунте 185759
можете попробовать следующее:
найдите в файле main.css блок
.leftmenu li li a {
display: block;
padding: 0.3px 10px;
border-bottom: 1px solid #fff;
font: normal 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #999999;
text-decoration: none;
}

измените его на
.leftmenu li li a {
display: block;
padding: 4px 10px;
border-bottom: 1px solid #fff;
font: normal 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #999999;
text-decoration: none;
}

Заголовка каталога сейчас у Вас там нет

#12 ais-83

ais-83

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

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

Отправлено 12 Март 2013 - 08:27

Просмотр сообщенияStasya (11 Март 2013 - 13:06) писал:

Код каталога здесь не нужен. Все дело в  стилях. Пришлите, пожалуйста, номер Вашего аккаунта или ссылку на Ваш сайт


аккаунт 185708

#13 ais-83

ais-83

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

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

Отправлено 12 Март 2013 - 08:53

Просмотр сообщенияsupport 2.0 (11 Март 2013 - 13:09) писал:

я так понимаю, речь идет об аккаунте 185759
можете попробовать следующее:
найдите в файле main.css блок
.leftmenu li li a {
display: block;
padding: 0.3px 10px;
border-bottom: 1px solid #fff;
font: normal 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #999999;
text-decoration: none;
}

измените его на
.leftmenu li li a {
display: block;
padding: 4px 10px;
border-bottom: 1px solid #fff;
font: normal 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #999999;
text-decoration: none;
}

Заголовка каталога сейчас у Вас там нет

185708 аккаунт.

#14 support 2.0

support 2.0

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

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

Отправлено 12 Март 2013 - 09:06

Просмотр сообщенияais-83 (12 Март 2013 - 08:27) писал:

аккаунт 185708

в файле main.css вставьте блок
h3.contentTbodyCatalogHeader {
	padding: 0px 0px 10px 20px;
}
ul#subNavigation li {
	padding: 8px 0px;
}

#15 ais-83

ais-83

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

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

Отправлено 12 Март 2013 - 09:40

Просмотр сообщенияsupport 2.0 (12 Март 2013 - 09:06) писал:

в файле main.css вставьте блок
h3.contentTbodyCatalogHeader {
padding: 0px 0px 10px 20px;
}
ul#subNavigation li {
padding: 8px 0px;
}

оу, отлично, получилось) спасибо большое)

#16 Kirill_LN

Kirill_LN

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

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

Отправлено 25 Апрель 2013 - 12:36

Просмотр сообщенияKoderhan (23 Январь 2013 - 05:24) писал:

В файле "main.csstemplate".

Найти код:
.goodsListItemName				 {padding:0px 3px 1.6em 3px;margin:0px;max-height:13px;overflow:hidden;}
Заменить:

.goodsListItemName {padding:0px 3px 1.6em 3px;margin:0px;max-height: 0px;overflow:hidden;}



Найти код:
.goodsListItemName				 {padding:0px 3px 1.6em 3px;margin:0px;max-height:13px;overflow:hidden;}
Заменить:
.goodsListItemName				 {padding:0px 3px 1.6em 3px;margin:0px;max-height:13px;overflow:hidden;line-height: 1;}
line-height - задает меж строчный интервал.
Так же можете изменить расположение названия,  установив для этого же блока значение.
margin-top.



Найти код:
h3 {
font: 20px/20px "Trebuchet MS", Helvetica, Arial, sans-serif;
text-transform: uppercase;
color: #333;
}
Заменить:
h3 {
font: 20px/20px "Trebuchet MS", Helvetica, Arial, sans-serif;
color: #333;
}
  text-transform: uppercase; - делает буквы в верхнем регистре.




Найти код:
.goods-image-other			 {max-width:185px; max-height:185px}

Заменить:
.goods-image-other {
max-width:185px;/*максимальная ширина изображения*/
max-height:185px/*максимальная высота изображения*/

margin-top: 0px;/*внешний верхний отступ*/
margin-left: 0px;/*внешний левый отступ*/
}
Подробнее про margin http://htmlbook.ru/css/margin

Добрый день а как убрать лишнее расстояние между картинкой и текстом, я уменьшил картинку, но текст все равно остался на том же уровне. Другими словами хочу убрать лишнее расстояние между картинкой и текстом

UPD: После уменьшения размера картинок на главной и в каталоге, уменьшились картинки на странице товара, как зафиксировать размер изображение товара на странице товара?

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

  • 1.png

#17 Stasya

Stasya

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

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

Отправлено 25 Апрель 2013 - 15:27

В файле main.css найдите блок 
.goodsListItemName {
line-height: 1;
overflow: hidden;
}
и замените его на 
.goodsListItemName {
line-height: 1;
overflow: hidden;
margin-top: -39px;
}

#18 Kirill_LN

Kirill_LN

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

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

Отправлено 25 Апрель 2013 - 15:59

Просмотр сообщенияStasya (25 Апрель 2013 - 15:27) писал:

В файле main.css найдите блок 
.goodsListItemName {
line-height: 1;
overflow: hidden;
}
и замените его на 
.goodsListItemName {
line-height: 1;
overflow: hidden;
margin-top: -39px;
}

Спасибо, а по второму вопросу?

#19 Koderhan

Koderhan

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

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

Отправлено 25 Апрель 2013 - 18:06

Просмотр сообщенияKirill_LN (25 Апрель 2013 - 15:59) писал:

Спасибо, а по второму вопросу?
В Основных настройках вы просто можете назначить другие значения для больших изображений.
" Максимальный размер по высоте/ширине в пикселях для средних изображений,  Максимальный размер по высоте/ширине в пикселях для больших изображений"

#20 Kirill_LN

Kirill_LN

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

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

Отправлено 28 Апрель 2013 - 16:58

Просмотр сообщенияKoderhan (25 Апрель 2013 - 18:06) писал:

В Основных настройках вы просто можете назначить другие значения для больших изображений.
" Максимальный размер по высоте/ширине в пикселях для средних изображений,  Максимальный размер по высоте/ширине в пикселях для больших изображений"

спасибо!
Обратно в Шаблон Сияние


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Сияние
  5. Privacy Policy