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


Общее Изменение Дизайна Окна Товара.

дизайн товар

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

#1 A-myshop

A-myshop

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

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

Отправлено 24 Сентябрь 2014 - 22:30

Доброго времени суток, уважаемые модераторы, есть пара вопросов по изменению дизайна. Заранее спасибо за помощь.

1 Можно ли сделать полосу на категории потемнее немного

2. Надо заменить все белые элементы, рамки на чёрные. А красные элементы поменять на цвет #C71585

3. хотелось бы что бы окно описания было повыше а цена ниже.

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

  • cats2.jpg
  • cats2.jpg


#2 Vaccina

Vaccina

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

  • Модераторы
  • 22 289 сообщений

Отправлено 25 Сентябрь 2014 - 01:38

1. В style.css найдите:
.accordion a.selected {
	background: #aaa;
}
измените значение стиля background

2.В style.css найдите:
.product_img_wrapper a {
	display: block;
}
замените на:
.product_img_wrapper a {
	background: #000;
	display: block;
}

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

#3 A-myshop

A-myshop

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

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

Отправлено 25 Сентябрь 2014 - 07:33

Хотя давайте наверное таблицу оставим внизу, а вот на таблице белая полоса её бы поменять на чёрный и если возможно убрать рамки у фото. И надо поменять все красные элементы на #C71585

#4 Danil

Danil

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

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

Отправлено 25 Сентябрь 2014 - 07:42

Просмотр сообщенияA-myshop (25 Сентябрь 2014 - 07:33) писал:

Хотя давайте наверное таблицу оставим внизу, а вот на таблице белая полоса её бы поменять на чёрный и если возможно убрать рамки у фото. И надо поменять все красные элементы на #C71585
Здравствуйте.
В style.css найдите код
1) Белая полоса
В style.css найдите код
.htabs {
background-color: #F5F5F5;
}
Замените значение  #F5F5F5 на свое.
2) Рамки у больших изображений.
В style.css найдите код
.img_middle_big div {
display: table;
width: 100%;
height: 251px;
border: 1px solid #bcbec0;
background: #fff;
}
Замените цвет border(рамка), либо удалите совсем.
3) Рамки для маленьких изображений.
В style.css найдите код
.game_img_selected {
border: 1px solid #fff;
}
Так же найдите код
.img_middle_small {
display: table;
width: 60px;
height: 60px;
margin: 0;
float: left;
border: 1px solid #bcbec0;
margin: 0 8px 9px 0;
background: #fff;
}
Замените цвет border(рамка), либо удалите совсем.
4) Изменение красного цвета.
Зайдите в style.css.
"Цена"
.prod_info_price .productSpecialPrice1 {
color: #ff0000;
line-height: 23px;
}
"Товары есть в наличии"
.goodsDataMainModificationAvailable .available-false strong {
color: #ff0000;
}
Вкладки(описание и т.д.)

#tabs > a:hover, #tabs > a.active, #tabs > a.active:hover {
border: none;
background-color: #FF0000;
color: #fff;
text-decoration: none;
}
Красная полоса вверху таблицы со вкладками
.tab-content {
position: relative;
z-index: 5;
overflow: hidden;
margin-bottom: 25px;
padding: 20px;
border-top: 5px solid #FF0000;
border-right: solid 1px #ccc;
border-left: solid 1px #ccc;
border-bottom: solid 1px #ccc;
}

За цвет отвечают значения background, background-color, color, так же цвет есть в border.

#5 A-myshop

A-myshop

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

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

Отправлено 25 Сентябрь 2014 - 08:27

Спасибо большое, всё получилось. Ещё осталось пара вопросов, если сможете помочь буду очень рад.

1. как поменять цвет на этих значках (и было бы круто лупу поместить поближе к картинке )

2. Осталась белая рамка, её возможно сделать чёрной?

3. "С этим товаром смотрят" убрать бы это внизу товара.

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

  • 1.jpg


#6 Danil

Danil

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

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

Отправлено 25 Сентябрь 2014 - 09:05

Просмотр сообщенияA-myshop (25 Сентябрь 2014 - 08:27) писал:

Спасибо большое, всё получилось. Ещё осталось пара вопросов, если сможете помочь буду очень рад.

1. как поменять цвет на этих значках (и было бы круто лупу поместить поближе к картинке )

2. Осталась белая рамка, её возможно сделать чёрной?

3. "С этим товаром смотрят" убрать бы это внизу товара.
1) Зайдите в раздел редактор шаблонов-изображения и отредактируйте изображение с именем heart.png(Для кнопки "добавить в избранное") и icon.png(Для кнопки "увеличить изображение")
2) В style.css найдите код
.qty-button-down {
margin-right: -1px;
padding: 5px;
display: inline-block;
float: left;
line-height: 18px;
background: #fafafa;
border: solid 1px #cdcdcd;
}
.qty-button-up {
margin-left: -1px;
padding: 5px;
display: inline-block;
float: left;
line-height: 18px;
background: #fafafa;
border: solid 1px #cdcdcd;
}
Измените значения #fafafa и #cdcdcd на свои.
3) Нужно перенести заголовок или весь блок(с товарами) и куда именно?(желательно показать на скриншоте)

#7 A-myshop

A-myshop

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

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

Отправлено 25 Сентябрь 2014 - 09:49

1. На счёт добавить в избранное. Файл который вы посоветовали отредактировать формата PNG. Так там трогать ничего не надо. Сердечко должно оставаться белым. А вот красная рамка вокруг него, её надо изменить.

2. Поменял цвет всё хорошо, вот только не пойму как цифры белыми сделать, и снизу вроде немного косовато.

3. лупу поближе к картинке.

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

  • 2.jpg


#8 Danil

Danil

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

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

Отправлено 25 Сентябрь 2014 - 10:07

Просмотр сообщенияA-myshop (25 Сентябрь 2014 - 09:49) писал:

1. На счёт добавить в избранное. Файл который вы посоветовали отредактировать формата PNG. Так там трогать ничего не надо. Сердечко должно оставаться белым. А вот красная рамка вокруг него, её надо изменить.

2. Поменял цвет всё хорошо, вот только не пойму как цифры белыми сделать, и снизу вроде немного косовато.

3. лупу поближе к картинке.
1) В style.css найдите код
.wishlist:before, .icon-heart { background: #ff0000 url('{ASSETS_IMAGES_PATH}heart.png') center center no-repeat; }
Измените значение #ff0000
2) В style.css найдите код
.product_info_wrapper .qty {
height: 37px;
line-height: 37px;
line-height: 1;
}
И замените на
.product_info_wrapper .qty {
height: 37px;
line-height: 37px;
line-height: 1;
color: #FFF;
}
3) В style.css найдите код
.img_middle_big div div {
display: table-cell;
width: 100%;
height: 248px;
text-align: center;
vertical-align: middle;
border: 0;
}
И замените на
.img_middle_big div div {
width: 100%;
height: 248px;
text-align: center;
vertical-align: middle;
border: 0;
}


#9 A-myshop

A-myshop

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

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

Отправлено 25 Сентябрь 2014 - 10:45

А можно как нибудь подвинуть лупу к картинке а не наоборот?

И тут вот в описании название чёрным, как на белый можно исправить.

#10 Dars

Dars

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

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

Отправлено 25 Сентябрь 2014 - 11:34

Просмотр сообщенияA-myshop (25 Сентябрь 2014 - 10:45) писал:

А можно как нибудь подвинуть лупу к картинке а не наоборот?

И тут вот в описании название чёрным, как на белый можно исправить.
Здравствуйте!
В style.css найдите строку:

.img_middle_big  b.zoom{ display:block; position:absolute; width:30px; height:30px; bottom:5px; right:5px;  background: url('http://z45293.storeland.net/icon.png') 0 -691px no-repeat;}

Здесь параметры bottom и right - отступы снизу и справа соответственно, меняйте их значения, чтобы расположить лупу так, как вам нужно.

Учитывая палитру сайта, возможно, имеет смысл поменять цвет всех заголовков: там же найдите строку:

h1, h2, h3, h4, h5, h6 {color: #000;font-family: Calibri;font-weight: normal;padding: 0 0 10px;font-weight: bold;}

и замените её на:

h1, h2, h3, h4, h5, h6 {color: #fff;font-family: Calibri;font-weight: normal;padding: 0 0 10px;font-weight: bold;}


#11 A-myshop

A-myshop

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

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

Отправлено 25 Сентябрь 2014 - 12:40

Спасибо) Опять помог) Крутой ты всё таки мужик))





Темы с аналогичным тегами дизайн, товар

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

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