Оформление Главного Баннера

Здравствуйте. В настройках блока "Главные баннеры" можно выбрать вариант пагинации в виде стрелок. Но эти стрелки просто ужасно смотрятся.

[attachment=11662:2016-09-29_14-29-15.jpg]

Подскажите, пожалуйста, как можно их видоизменить и поменять положение. Сделать что-то вроде этого:

[attachment=11663:2016-09-29_14-39-15.jpg]

[attachment=11664:2016-09-29_14-39-53.jpg]

И как можно сделать баннер на всю область?

2016-09-29_14-39-15.jpg

2016-09-29_14-29-15.jpg

2016-09-29_14-39-53.jpg

Попробуйте по аналогии сделать

http://www.cs-cart.ru/videos/devel-design/g.10.1-banner-na-vsyu-shirinu-s-pomoschyu-obolochki.html

Ну а стрелки стилями можно поменять

Попробуйте по аналогии сделать

http://www.cs-cart.ru/videos/devel-design/g.10.1-banner-na-vsyu-shirinu-s-pomoschyu-obolochki.html

Ну а стрелки стилями можно поменять

Можете подсказать, как сделать так, чтобы стрелки были по центру баннера, по его бокам?

Попробуйте так

.owl-carousel.owl-theme .owl-controls .owl-buttons div.owl-prev {
    position: absolute;
    left: 0;
    top: 0;
    margin-top: -215px;
    font-size: 0;
}
.owl-carousel.owl-theme .owl-controls .owl-buttons div.owl-next {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: -215px;
    font-size: 0;
}
.owl-carousel.owl-theme .owl-controls .owl-buttons div.owl-prev:before, .owl-carousel.owl-theme .owl-controls .owl-buttons div.owl-next:before {
    font-size: 20px;
    border: none;
}

(!) не тестировано

Попробуйте так

.owl-carousel.owl-theme .owl-controls .owl-buttons div.owl-prev {
    position: absolute;
    left: 0;
    top: 0;
    margin-top: -215px;
    font-size: 0;
}
.owl-carousel.owl-theme .owl-controls .owl-buttons div.owl-next {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: -215px;
    font-size: 0;
}
.owl-carousel.owl-theme .owl-controls .owl-buttons div.owl-prev:before, .owl-carousel.owl-theme .owl-controls .owl-buttons div.owl-next:before {
    font-size: 20px;
    border: none;
}

(!) не тестировано

В этом случае все стрелки пагинации поднимаются наверх

В этом случае все стрелки пагинации поднимаются наверх

Задайте блоку пользовательский класс и сделайте стили относительно этого класса

Задайте блоку пользовательский класс и сделайте стили относительно этого класса

В пользовательские CSS прописал следующий код

.homepage-banners {
.owl-carousel.owl-theme .owl-controls .owl- buttons div.owl-prev {
position: absolute;
left: 0;
top: 0;
margin-top: -215px;
font-size: 0;
}
.owl-carousel.owl-theme .owl-controls .owl-buttons div.owl-next {
position: absolute;
right: 0;
top: 0;
margin-top: -215px;
font-size: 0;
}
.owl-carousel.owl-theme .owl-controls .owl-buttons div.owl-prev:before, .owl-carousel.owl-theme .owl-controls .owl-buttons div.owl-next:before {
font-size: 20px;
border: none;
}
}
Получилось, что правая стрелка нормально отображается, а вместо левой просто пустой прямоугольник
[attachment=11681:2016-10-03_11-42-46.jpg]

2016-10-03_11-42-46.jpg

Кстати давно хотел спросить: А можно ли делать на слайдере (когда баннер текст+ фото) так что бы текст отображался поверх фотки а не снизу? Что бы просто вставлять картинку а текст УТП или акции писать в админке?

Получилось, что правая стрелка нормально отображается, а вместо левой просто пустой прямоугольник

Похоже, что есть лишние пробелы в коде

http://prntscr.com/cp6rqn

Кстати давно хотел спросить: А можно ли делать на слайдере (когда баннер текст+ фото) так что бы текст отображался поверх фотки а не снизу? Что бы просто вставлять картинку а текст УТП или акции писать в админке?

Только доработкой

Похоже, что есть лишние пробелы в коде

http://prntscr.com/cp6rqn

Исправил, но результат тот же

Исправил, но результат тот же

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

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

Написал вам в личку

Готово

Готово

Спасибо Вам большое