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


Слайдер На Главной


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

#1 Любовь1805

Любовь1805

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

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

Отправлено 12 Май 2017 - 20:21

Добрый день, хочу изменить картинку на главной на слайдер меньшего размера. Чтоб располагался слева от названия сайта.(чуть меньше половины экрана для прямоугольных мониторов) С возможностью перехода по ссылке при нажатии на картинку.

В мобильной версии при нажатии кнопки "Каталог" нужно чтоб открывалось меню с подкатегориями.

Еще вопрос где можно изменить шрифт названия магазина и кнопки каталог?

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

  • слайдер.png


#2 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 13 Май 2017 - 07:48

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#slideshow .slide {width: 100%;height: 100%;opacity: 1;visibility: inherit;z-index: 20;background-image: url("{ASSETS_IMAGES_PATH}slide1.jpg?design=sunrise");background-color: #fff;background-size: cover;background-position: center center;background-repeat: no-repeat;}
#slideshow .text {position: absolute;top: 60%;right: 10%;padding: 0 15px;}
#slideshow .text .title {color: #8C2C29;margin-bottom: 15px;font-weight: 500;font-size: 36px;text-transform: uppercase;}

замените на:
#slideshow .slide {width: 100%;height: 100%;opacity: 1;visibility: inherit;z-index: 20;background-image: url("{ASSETS_IMAGES_PATH}slide1.jpg?design=sunrise");background-color: #fff;background-size: 50%;background-position: left center;background-repeat: no-repeat;}
#slideshow .text {position: absolute;top: 40%;right: 0;padding: 0 15px;z-index: 99;display: block;}
#slideshow .text .title {color: #8C2C29;margin-bottom: 15px;font-weight: 500;font-size: 36px;text-transform: uppercase;}

Далее найдите:
#slideshow .text .title {color: #8C2C29;margin-bottom: 15px;font-weight: 500;font-size: 36px;text-transform: uppercase;}

и:
.button.big {
	font-size: 21px;
	height: 50px;
	line-height: 46px;
	text-transform: none;
	padding: 0 30px;
}

отредактируйте в первом блок и добавьте во второй стиль color, отвечающий за цвет шрифта, пример:
#slideshow .text .title {color: #dddddd;margin-bottom: 15px;font-weight: 500;font-size: 36px;text-transform: uppercase;}

.button.big {
	font-size: 21px;
	height: 50px;
	line-height: 46px;
	text-transform: none;
	padding: 0 30px;
	color:#000000;
}


#3 Любовь1805

Любовь1805

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

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

Отправлено 13 Май 2017 - 11:11

 Vaccina (13 Май 2017 - 07:48) писал:

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#slideshow .slide {width: 100%;height: 100%;opacity: 1;visibility: inherit;z-index: 20;background-image: url("{ASSETS_IMAGES_PATH}slide1.jpg?design=sunrise");background-color: #fff;background-size: cover;background-position: center center;background-repeat: no-repeat;}
#slideshow .text {position: absolute;top: 60%;right: 10%;padding: 0 15px;}
#slideshow .text .title {color: #8C2C29;margin-bottom: 15px;font-weight: 500;font-size: 36px;text-transform: uppercase;}

замените на:
#slideshow .slide {width: 100%;height: 100%;opacity: 1;visibility: inherit;z-index: 20;background-image: url("{ASSETS_IMAGES_PATH}slide1.jpg?design=sunrise");background-color: #fff;background-size: 50%;background-position: left center;background-repeat: no-repeat;}
#slideshow .text {position: absolute;top: 40%;right: 0;padding: 0 15px;z-index: 99;display: block;}
#slideshow .text .title {color: #8C2C29;margin-bottom: 15px;font-weight: 500;font-size: 36px;text-transform: uppercase;}

Далее найдите:
#slideshow .text .title {color: #8C2C29;margin-bottom: 15px;font-weight: 500;font-size: 36px;text-transform: uppercase;}

и:
.button.big {
font-size: 21px;
height: 50px;
line-height: 46px;
text-transform: none;
padding: 0 30px;
}

отредактируйте в первом блок и добавьте во второй стиль color, отвечающий за цвет шрифта, пример:
#slideshow .text .title {color: #dddddd;margin-bottom: 15px;font-weight: 500;font-size: 36px;text-transform: uppercase;}

.button.big {
font-size: 21px;
height: 50px;
line-height: 46px;
text-transform: none;
padding: 0 30px;
color:#000000;
}


Спасибо, получилось, но не совсем так, нужно, чтоб слайдер был под полосой с меню. И как добавить переключение слайдов с гиперссылками? Чтоб было несколько картинок и при нажатии на любую осуществлялся переход по ссылке.

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

  • слайдер.png


#4 Mr.Nito

Mr.Nito

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

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

Отправлено 13 Май 2017 - 12:49

 Любовь1805 (13 Май 2017 - 11:11) писал:

Спасибо, получилось, но не совсем так, нужно, чтоб слайдер был под полосой с меню. И как добавить переключение слайдов с гиперссылками? Чтоб было несколько картинок и при нажатии на любую осуществлялся переход по ссылке.
Здравствуйте.
Чтобы переделать отображение слайдов как на скриншоте, нужно переделать разметку данного блока.
Для начала нужно установить сам слайдер по инструкции:
http://forum.storela...аблона-рассвет/

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

#5 Любовь1805

Любовь1805

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

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

Отправлено 13 Май 2017 - 13:24

 Mr.Nito (13 Май 2017 - 12:49) писал:

Здравствуйте.
Чтобы переделать отображение слайдов как на скриншоте, нужно переделать разметку данного блока.
Для начала нужно установить сам слайдер по инструкции:
http://forum.storela...аблона-рассвет/

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


Сделано, что дальше? и как быть с кнопкой каталога в мобильной версии?

"В мобильной версии при нажатии кнопки "Каталог" нужно чтоб открывалось меню с подкатегориями."

#6 Mr.Nito

Mr.Nito

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

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

Отправлено 13 Май 2017 - 14:29

 Любовь1805 (13 Май 2017 - 13:24) писал:

Сделано, что дальше? и как быть с кнопкой каталога в мобильной версии?

"В мобильной версии при нажатии кнопки "Каталог" нужно чтоб открывалось меню с подкатегориями."
Изменения по слайдеру произвёл.
Вместо # укажите необходимые ссылки, в 2-3 блоке slide1.jpg замените на slide2.jpg - slide3.jpg (загрузите одноименные файлы в редактор)
<a href="#" title="" style="background-image: url({ASSETS_IMAGES_PATH}slide1.jpg?design=sunrise);"></a>
<a href="#" title="" style="background-image: url({ASSETS_IMAGES_PATH}slide1.jpg?design=sunrise);"></a>
<a href="#" title="" style="background-image: url({ASSETS_IMAGES_PATH}slide1.jpg?design=sunrise);"></a>

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

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

  • 13-05-2017 14-29-27.jpg


#7 Любовь1805

Любовь1805

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

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

Отправлено 13 Май 2017 - 15:49

 Mr.Nito (13 Май 2017 - 14:29) писал:

Изменения по слайдеру произвёл.
Вместо # укажите необходимые ссылки, в 2-3 блоке slide1.jpg замените на slide2.jpg - slide3.jpg (загрузите одноименные файлы в редактор)
<a href="#" title="" style="background-image: url({ASSETS_IMAGES_PATH}slide1.jpg?design=sunrise);"></a>
<a href="#" title="" style="background-image: url({ASSETS_IMAGES_PATH}slide1.jpg?design=sunrise);"></a>
<a href="#" title="" style="background-image: url({ASSETS_IMAGES_PATH}slide1.jpg?design=sunrise);"></a>

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


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

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

  • стрелка.png
  • PPGFVQJbt7U.jpg
  • X8Mnb11q9vo.jpg


#8 Mr.Nito

Mr.Nito

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

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

Отправлено 13 Май 2017 - 16:11

 Любовь1805 (13 Май 2017 - 15:49) писал:

Спасибо, уже почти, что нужно.
1. стрелки слайдера поднять выше, наш ассортимент/новинки под слайдер.
2. В моб. версии при нажатии кнопки "меню" на само слово "меню" разворачивается собственно меню, а при нажатии на "каталог", открывается каталог без возможности подробного выбора. Нужно чтоб кнопка "каталог" работала как "Меню" т.е. при нажатии сразу разворачивались подкатегории, сейчас это реализована на маленькой кнопочке сбоку.
1. По видимому это кэш браузера,обновите страницу через Ctrl + F5, сейчас отображается по другому,пример в скриншоте
2. Не совсем понятен пункт "нажатии на "каталог", открывается каталог без возможности подробного выбора." ведь функционал пунктов одинаков, и если в каталоге появятся подкатегории они также отобразятся в списке.

Чтобы список каталога был развёрнут сразу добавьте в main.css
перед
/* Моб. Каталог */
код:
#menu_offcanvas .menu-list.catalog ul{display: block!important;}
#menu_offcanvas .menu-list.catalog .fa.fa-sort-down {display:none;}

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

  • 13-05-2017 16-08-14.jpg


#9 Любовь1805

Любовь1805

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

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

Отправлено 13 Май 2017 - 16:19

 Mr.Nito (13 Май 2017 - 16:11) писал:

1. По видимому это кэш браузера,обновите страницу через Ctrl + F5, сейчас отображается по другому,пример в скриншоте
2. Не совсем понятен пункт "нажатии на "каталог", открывается каталог без возможности подробного выбора." ведь функционал пунктов одинаков, и если в каталоге появятся подкатегории они также отобразятся в списке.

Чтобы список каталога был развёрнут сразу добавьте в main.css
перед
/* Моб. Каталог */
код:
#menu_offcanvas .menu-list.catalog ul{display: block!important;}
#menu_offcanvas .menu-list.catalog .fa.fa-sort-down {display:none;}


Спасибо огромное, теперь все как нужно!

 Mr.Nito (13 Май 2017 - 16:11) писал:

1. По видимому это кэш браузера,обновите страницу через Ctrl + F5, сейчас отображается по другому,пример в скриншоте
2. Не совсем понятен пункт "нажатии на "каталог", открывается каталог без возможности подробного выбора." ведь функционал пунктов одинаков, и если в каталоге появятся подкатегории они также отобразятся в списке.

Чтобы список каталога был развёрнут сразу добавьте в main.css
перед
/* Моб. Каталог */
код:
#menu_offcanvas .menu-list.catalog ul{display: block!important;}
#menu_offcanvas .menu-list.catalog .fa.fa-sort-down {display:none;}


нет, опять сломалась первая страница

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

  • ошибка.png


#10 Mr.Nito

Mr.Nito

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

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

Отправлено 13 Май 2017 - 16:46

 Любовь1805 (13 Май 2017 - 16:19) писал:

Спасибо огромное, теперь все как нужно!




нет, опять сломалась первая страница

Попробуйте восстановить последний работоспособный бэкап от 13.05.2017 14:23:47

#11 Андрей М

Андрей М

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

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

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

Здравствуйте.
Помогите убрать со слайдера надпись и кнопку.

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

  • Новая колекция 1.jpg


#12 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

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

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#slideshow .text {position: absolute;top: 60%;right: 10%;padding: 0 15px;}

замените на:
#slideshow .text {position: absolute;top: 60%;right: 10%;padding: 0 15px;display: none;}


#13 Андрей М

Андрей М

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

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

Отправлено 17 Июнь 2017 - 18:40

Спасибо, получилось.




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

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