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

[Den1992]

Доброе время суток ! Прошу помощи как новичек
1.Где регулируется слайдер по высоте?
2.1 То что на скрине перенести в центр   (И где поменять этот цвет? я про оранжевый!)
2.2 Сравнение именно его убрать!Как это сделать
3.Перенести поиск и растянуть его!
4.Возможно ли заменить фон к примеру на картинку или текстуру!?

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

• 
• 
• 
• 

[Den1992]

Никто не поможет?
Ещё 1 вопрос назрел!
Как сделать вот такую корзинку как на скрине, что бы она  поднималась и опускалась когда покупатель прокручивает страницу!

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

• 

[Firefly]

Den1992 (03 Сентябрь 2015 - 03:21) писал:

Доброе время суток ! Прошу помощи как новичек
1.Где регулируется слайдер по высоте?
2.1 То что на скрине перенести в центр   (И где поменять этот цвет? я про оранжевый!)
2.2 Сравнение именно его убрать!Как это сделать
3.Перенести поиск и растянуть его!
4.Возможно ли заменить фон к примеру на картинку или текстуру!?

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

#slider {position: relative; margin: 0 auto;top: 0px; left: 0px; width: 1920px; height: 570px; overflow: hidden;z-index:1;}
.slides_container {cursor: move; position: absolute; left: 0px; top: 0px; width: 1920px;height: 570px; overflow: hidden;}

В данных строках за размер слайдера и его содержимое (контейнера) отвечают параметры width и height.

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

.products-grid .item-inner:hover .product-addto-wrap {top: 40%;left: 13%;}

Замените на:

.products-grid .item-inner:hover .product-addto-wrap {top: 40%;left: 25%;}

Для цвета:
Найдите код:

.products-grid .item .product-addto-wrap .btn-addto:hover {background-color: #f79242;box-shadow: 0 0 0 3px #fff;-webkit-box-shadow: 0 0 0 3px #fff;-moz-box-shadow: 0 0 0 3px #fff;}

Измените код цвета #f79242 на необходимый.

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

4. Да, фон можно изменить на изображение. Страница магазина на данном шаблоне состоит из нескольких блоков.
Для основного блока:
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:

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

Замените на:

body {color: #666666;font-family: Arial;font-size: 12px;line-height: 1;outline: none;position: relative;background: url(ссылка на изображение) repeat-y;}

Где укажите ссылку на загруженное изображение.

Фон у баннеров задан так же сейчас отдельным цветом. Его можно заменить на изображение.
В main.css найдите код:

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

Замените на:

.yt-bannertop {padding:50px 0 30px; background: url(ссылка на изображение) repeat-y;}

Для основной части шапки:
Найдите код:

.header-content {padding: 0;background: #fff;}

Замените на:

.header-content {padding: 0; background: url(ссылка на изображение) repeat-y;}

В подвале можно просто скрыть оставшуюся белую полосу.
Найдите код:

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

Замените на:

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

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

5. Как вариант Вы можете закрепить уже имеющийся блок корзины вместе с поиском. При перемещениях по странице, они будут зафиксированы.
В main.css найдите код:

.header-top .header-top-right .header-right-mobile {float: right;}

Замените на:

.header-top .header-top-right .header-right-mobile {float: right;position: fixed;}

[Den1992]

Firefly (05 Сентябрь 2015 - 11:17) писал:

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

#slider {position: relative; margin: 0 auto;top: 0px; left: 0px; width: 1920px; height: 570px; overflow: hidden;z-index:1;}
.slides_container {cursor: move; position: absolute; left: 0px; top: 0px; width: 1920px;height: 570px; overflow: hidden;}

В данных строках за размер слайдера и его содержимое (контейнера) отвечают параметры width и height.

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

.products-grid .item-inner:hover .product-addto-wrap {top: 40%;left: 13%;}

Замените на:

.products-grid .item-inner:hover .product-addto-wrap {top: 40%;left: 25%;}

Для цвета:
Найдите код:

.products-grid .item .product-addto-wrap .btn-addto:hover {background-color: #f79242;box-shadow: 0 0 0 3px #fff;-webkit-box-shadow: 0 0 0 3px #fff;-moz-box-shadow: 0 0 0 3px #fff;}

Измените код цвета #f79242 на необходимый.

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

4. Да, фон можно изменить на изображение. Страница магазина на данном шаблоне состоит из нескольких блоков.
Для основного блока:
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:

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

Замените на:

body {color: #666666;font-family: Arial;font-size: 12px;line-height: 1;outline: none;position: relative;background: url(ссылка на изображение) repeat-y;}

Где укажите ссылку на загруженное изображение.

Фон у баннеров задан так же сейчас отдельным цветом. Его можно заменить на изображение.
В main.css найдите код:

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

Замените на:

.yt-bannertop {padding:50px 0 30px; background: url(ссылка на изображение) repeat-y;}

Для основной части шапки:
Найдите код:

.header-content {padding: 0;background: #fff;}

Замените на:

.header-content {padding: 0; background: url(ссылка на изображение) repeat-y;}

В подвале можно просто скрыть оставшуюся белую полосу.
Найдите код:

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

Замените на:

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

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

5. Как вариант Вы можете закрепить уже имеющийся блок корзины вместе с поиском. При перемещениях по странице, они будут зафиксированы.
В main.css найдите код:

.header-top .header-top-right .header-right-mobile {float: right;}

Замените на:

.header-top .header-top-right .header-right-mobile {float: right;position: fixed;}

4. я Имел в виду замена текстуры на картинку к примеру выделенные области на 4-ом скриншоте!
В остальном все хорошо, получилось! Спасибо)

[Danil]

Den1992 (06 Сентябрь 2015 - 02:03) писал:

4. я Имел в виду замена текстуры на картинку к примеру выделенные области на 4-ом скриншоте!
В остальном все хорошо, получилось! Спасибо)

Здравствуйте.
Попробуйте сделать следующее:
в main.css найдите код

#breadcrumbs, #product-next-pre, .container-slider .page-title-slider, #main_left .block-title, .success {
	background: #444444;
	background: -moz-linear-gradient(left, #fb7e3e 0%, #ac2c77 160%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#444444), color-stop(160%,#444444));
	background: -webkit-linear-gradient(left, #444444 0%,#ac2c77 160%);
	background: -o-linear-gradient(left, #fb7e3e 0%,#ac2c77 160%);
	background: -ms-linear-gradient(left, #fb7e3e 0%,#ac2c77 160%);
	background: linear-gradient(to right, #444444 0%,#95CCFC 160%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb7e3e', endColorstr='#ac2c77',GradientType=1 );
}

и замените на

#breadcrumbs, #product-next-pre, .container-slider .page-title-slider, #main_left .block-title, .success {
  background: url("{ASSETS_IMAGES_PATH}название картинки");
  background-size: 100% 100%;
}

[Den1992]

Danil (06 Сентябрь 2015 - 09:47) писал:

Здравствуйте.
Попробуйте сделать следующее:
в main.css найдите код

#breadcrumbs, #product-next-pre, .container-slider .page-title-slider, #main_left .block-title, .success {
background: #444444;
background: -moz-linear-gradient(left, #fb7e3e 0%, #ac2c77 160%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#444444), color-stop(160%,#444444));
background: -webkit-linear-gradient(left, #444444 0%,#ac2c77 160%);
background: -o-linear-gradient(left, #fb7e3e 0%,#ac2c77 160%);
background: -ms-linear-gradient(left, #fb7e3e 0%,#ac2c77 160%);
background: linear-gradient(to right, #444444 0%,#95CCFC 160%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb7e3e', endColorstr='#ac2c77',GradientType=1 );
}

и замените на

#breadcrumbs, #product-next-pre, .container-slider .page-title-slider, #main_left .block-title, .success {
background: url("{ASSETS_IMAGES_PATH}название картинки");
background-size: 100% 100%;
}

Возникла проблема на скрине видно что слайдер слишком большой! как сделать что бы он адаптировался. ? Или эта проблема уйдет как только я выставлю правильный размер?




И по пункту 2.1 Иконки не стали по центру


А так же как выравнить то что на скрине на 2. в том числе и лого

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

• 
• 

[Den1992]

хелп