Изменение слайдера

[KiraA 0]

 1. Как изменить цвет фона слайдера? 2. Как отключить слайдер в  отображении для мобильных устройств? 

[support 447]

4 минуты назад, KiraA сказал:

 1. Как изменить цвет фона слайдера? 2. Как отключить слайдер в  отображении для мобильных устройств? 

Все стили в /app/webroot/css/jquery/plugins/sequence/sequence.css

Задавайте фон в самом первом стиле.

#sequence-theme {
  color: white;
  font-size: 0.625em;
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: 333px;
  margin-bottom: 30px;
  max-width: 1170px;
  -webkit-backface-visibility: hidden;
}

например так:

#sequence-theme {
  color: white;
  background: #e5e5e5;
  font-size: 0.625em;
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: 333px;
  margin-bottom: 30px;
  max-width: 1170px;
  -webkit-backface-visibility: hidden;
}

P.S. У Вас VamShop 2, лучше создавать темы в разделе VamShop 2 - 

Слайдер для мобилок там же можно отключить.

В стилях, что чуть ниже добавлять display: none;

Примерно так:

@media (min-width: 1201px) {
  #sequence-theme {
    height: 333px;
    display: none;
  }
}
@media (max-width: 1200px) {
  #sequence-theme {
    height: 333px;
    display: none;
  }
}
@media (max-width: 980px) {
  #sequence-theme {
    height: 333px;
    display: none;
  }
}
@media (max-width: 767px) {
  #sequence-theme {
    height: 268px;
    display: none;
  }
}
@media (max-width: 480px) {
  #sequence-theme {
    height: 268px;
    display: none;
  }
}

 

[KiraA 0]

Да я проскочила свой раздел, спешила написать Вам, пока не очень поздно. И вот ещё: про цвет я поняла, а если взять картинку для фона, то это как прописывать?

[support 447]

Только что, KiraA сказал:

Да я проскочила свой раздел, спешила написать Вам, пока не очень поздно. И вот ещё: про цвет я поняла, а если взять картинку для фона, то это как прописывать?

Тоже через background

Только там url указывается фона.

Вот тут примеры - https://www.w3schools.com/cssref/css3_pr_background.asp

[KiraA 0]

Написала 

display: none;

Теперь сайт пропал из выдачи при поиске с мобильного.

[support 447]

Значит не там написали.

[KiraA 0]

Перезапустила браузер, так слайдер пропал с сайта. Написала здесь:

#sequence-theme {
  color: white;
background: #FFE4C4;
  font-size: 0.625em;
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: 333px;
  margin-bottom: 30px;
  max-width: 1170px;
  -webkit-backface-visibility: hidden;
}
@media (min-width: 1201px) {
  #sequence-theme {
    height: 333px;
display: none;
  }
}
@media (max-width: 1200px) {
  #sequence-theme {
    height: 333px;
display: none;
  }
}
@media (max-width: 980px) {
  #sequence-theme {
    height: 333px;
display: none;
  }
}
@media (max-width: 767px) {
  #sequence-theme {
    height: 268px;
display: none;
  }
}
@media (max-width: 480px) {
  #sequence-theme {
    height: 268px;
display: none;
  }

[support 447]

11 час назад, KiraA сказал:

Перезапустила браузер, так слайдер пропал с сайта. Написала здесь:

#sequence-theme {
  color: white;
background: #FFE4C4;
  font-size: 0.625em;
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: 333px;
  margin-bottom: 30px;
  max-width: 1170px;
  -webkit-backface-visibility: hidden;
}
@media (min-width: 1201px) {
  #sequence-theme {
    height: 333px;
display: none;
  }
}
@media (max-width: 1200px) {
  #sequence-theme {
    height: 333px;
display: none;
  }
}
@media (max-width: 980px) {
  #sequence-theme {
    height: 333px;
display: none;
  }
}
@media (max-width: 767px) {
  #sequence-theme {
    height: 268px;
display: none;
  }
}
@media (max-width: 480px) {
  #sequence-theme {
    height: 268px;
display: none;
  }

Первые два display: none; попробуйте убрать, остальные оставьте.

[KiraA 0]

Здравствуйте! Изменять высоту слайдера надо во всех строчках, где указан размер 333 пикс? И соотносится ли он с шириной? И ещё я спрашивала, как задать фон слайдера неброской картинкой, но, чтобы товар отображался, как есть.

В 03.03.2017 at 22:58, VaM сказал:

Тоже через background

Только там url указывается фона.

Вот тут примеры - https://www.w3schools.com/cssref/css3_pr_background.asp

В примерах по ссылке можно изменить цвет полей сайта, а фон слайдера остаётся неизменным.

[support 447]

6 часов назад, KiraA сказал:

Здравствуйте! Изменять высоту слайдера надо во всех строчках, где указан размер 333 пикс? И соотносится ли он с шириной? И ещё я спрашивала, как задать фон слайдера неброской картинкой, но, чтобы товар отображался, как есть.

В примерах по ссылке можно изменить цвет полей сайта, а фон слайдера остаётся неизменным.

В #sequence-theme { стиле самом верхнем указывайте файл картинки для фона.

[KiraA 0]

В общем, ничего у меня не получилось. Написала так:  background: #цвета url("моя картинка.jpg")

 

[support 447]

2 минуты назад, KiraA сказал:

В общем, ничего у меня не получилось. Написала так:  background: #цвета url("моя картинка.jpg")

 

Зашёл на stagira.ru и что-то не видно в стилях, что у Вас фон прописан, картинки нет и ошибки нет.

Может не там прописали?!

[KiraA 0]

Да, я делала не сегодня. И так как не получилось, то вернула исходные данные.

[support 447]

18 минуту назад, KiraA сказал:

Да, я делала не сегодня. И так как не получилось, то вернула исходные данные.

Без кода ничего не могу сказать, добавьте снова.

Я так думаю, что неправильно путь до картинки указали.

Нужно писать, к примеру:

background: #цвет url("img/image.jpg");

Картинки доллна быть в папке /app/webroot/img/image.jpg

Всё это видно в chrome developer console

т.е. если картинка не грузится, смотрите ошибку в консоли, там видно будет.

[KiraA 0]

Только что, VaM сказал:

Без кода ничего не могу сказать, добавьте снова.

Я так думаю, что неправильно путь до картинки указали.

Нужно писать, к примеру:

background: #цвет url("img/image.jpg");

Картинки доллна быть в папке /app/webroot/img/image.jpg

Всё это видно в chrome developer console

т.е. если картинка не грузится, смотрите ошибку в консоли, там видно будет.

Да, я сейчас сделаю снова.

[support 447]

6 минут назад, KiraA сказал:

Да, я сейчас сделаю снова.

Пишет, что нет файла - https://stagira.ru/css/img/slider.jpg

т.е. нет картинки в /app/webroot/css/img/slider.jpg

Сделайте что б картинки в браузере открывалась, тогда и в слайдере будет, по идее.

[KiraA 0]

И всё-таки картинка там. ) Вижу, что поменялся только фон, т. е. то, что я указала файл.jpg, не сыграло роли.

[support 447]

Нет, не там.

Иначе ошибка не писало бы.

/app/webroot/css/img/slider.jpg

а не /app/webroot/img/slider.jpg, к примеру.

В консоли именно пишет, что /app/webroot/css/img/slider.jpg

Ну и помните, что в linux, в отличии от windows, регистр букв имеет значение, к примеру, Slider.jpg и slider.jpg - это два разных файла.

 

8 минут назад, KiraA сказал:

И всё-таки картинка там. ) Вижу, что поменялся только фон, т. е. то, что я указала файл.jpg, не сыграло роли.

 

Либо можно /img/slider.jpg прописать, тогда, по идее, картинки должна будет сидеть в папке /app/webroot/img/slider.jpg

[KiraA 0]

В пути  /app/webroot/css/img/slider.jpg у меня нет папки img.

А добавляла я, да, в путь  /app/webroot/img/slider.jpg

Вот, посмотрите, пожалуйста, теперь так: черный фон и всплывающее название товара. Написано так: 

#sequence-theme {
  color: white;
background: #000000 url("/img/slider.jpg");
  font-size: 0.625em;

 

В консоли ошибка.

[support 447]

11 час назад, KiraA сказал:

В пути  /app/webroot/css/img/slider.jpg у меня нет папки img.

А добавляла я, да, в путь  /app/webroot/img/slider.jpg

Вот, посмотрите, пожалуйста, теперь так: черный фон и всплывающее название товара. Написано так: 

#sequence-theme {
  color: white;
background: #000000 url("/img/slider.jpg");
  font-size: 0.625em;

 

В консоли ошибка.

Вот сейчас у Вас пишет ошибку https://stagira.ru/img/slider.jpg

Нет картинки в /app/webroot/img/slider.jpg

Я не знаю где Вы смотрите и как, но картинки у Вас не было в /app/webroot/img

Подключился на ftp и загрузил первую попавшуюся картинку для пробы.

Теперь ошибки нет.

Замените картинку на свою.

[KiraA 0]

Я сейчас добавила файл, перезаписывать не стала, да, теперь отображается в слайдере. Чудеса. Картинка встала коряво, буду экспериментировать. Спасибо!

P.S. Для того, чтобы картинка отображалась корректно, надо установить её длину примерно на 1/5 больше длины слайдера, - так получилось в моём случае.

[KiraA 0]

Добавила вот такую строку:

<marquee onMouseOver="this.stop()" onMouseOut="this.start()" width="200" height="150" scrollamount="2" Direction="up" Bgcolor=#F0F0F0> мой текст </marquee>

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

[support 447]

3 часа назад, KiraA сказал:

Добавила вот такую строку:

<marquee onMouseOver="this.stop()" onMouseOut="this.start()" width="200" height="150" scrollamount="2" Direction="up" Bgcolor=#F0F0F0> мой текст </marquee>

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

Я ж не могу Вам описывать все основы css.

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

А цвет наверное можно попробовать через class="alert alert-danger"

Либо свой класс задавать в /app/webroot/css/vamshop.css

[KiraA 0]

Записала через HTML.

Моветон... Может и моветон, накопаю какую-нибудь современную фишку, её размещу )))

[support 447]

8 часов назад, KiraA сказал:

Записала через HTML.

Моветон... Может и моветон, накопаю какую-нибудь современную фишку, её размещу )))

:)