Текст на слайдере

[samvel4577]

Здравствуйте! Подскажите пожалуйста, как по-человечески сделать. Мне нужно, чтобы на слайдере в шапке отображался текст(мини-описание). форум перерыл, ни то все. Спасибо заранее. Как-нибудь так:

Спойлер

 

 

 

Змінено 22 листопада 2017 користувачем samvel4577

[Gann]

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

Здравствуйте! Подскажите пожалуйста, как по-человечески сделать. Мне нужно, чтобы на слайдере в шапке отображался текст(мини-описание). форум перерыл, ни то все. Спасибо заранее. Как-нибудь так:

  Показать контент

 

 

Доброго утра!

 

Здесь _http://8uh.ru/opencart-i-ocstore/uluchshenie-standartnogo-slaydera-opencart-2.html подробно по коду и CSS

[samvel4577]

Нашел файл slideshow.tpl он лежал в /catalog/view/theme/default/template/extension/module

Но я бы хотел именно как в скрине выше, Или это будет уже сложно реализзовать?

Змінено 22 листопада 2017 користувачем samvel4577

[samvel4577]

Почти все сделал. Но теперь вопрос как сделать перенос текста, т к пишу название длинное а оно по всей строчке расходится. Как это можно сделать?

Спойлер

 

Змінено 22 листопада 2017 користувачем samvel4577

[samvel4577]

Вот стили, которые я применил:

.text-slider{
    position: absolute;
    left: 20px;
    bottom: 20px;
    font-size: 26px;
    color:  #fff; 
    padding: 17px;
    background-color: #0000006e;
}

Что тут изменить или добавить чтобы получить желаемый результат?

[Gann]

2 часа назад, samvel4577 сказал:

Вот стили, которые я применил:

.text-slider{
    position: absolute;
    left: 20px;
    bottom: 20px;
    font-size: 26px;
    color:  #fff; 
    padding: 17px;
    background-color: #0000006e;
}

Что тут изменить или добавить чтобы получить желаемый результат?

Задайте максимальную ширину, например, так:

 

max-width:400px;

width:100%;

 

также, чтобы строчки не налипали друг на друга по вертикали, пропишите

 

line-height: 17px

[samvel4577]

поиграл со значениями, в итоге получилось не то. Строки не отделяются друг от друга, сплошной бекграунд. как бы сделать так чтобы фон обтекал слово.  Я думаю padding: 0px использовать, в этом случае фон полностью обтекает всю фразу, но пустое место все равно остается...

Спойлер

 

Змінено 23 листопада 2017 користувачем samvel4577

[Gann]

28 минут назад, samvel4577 сказал:

поиграл со значениями, в итоге получилось не то. Строки не отделяются друг от друга, сплошной бекграунд. как бы сделать так чтобы фон обтекал слово.  Я думаю padding: 0px использовать, в этом случае фон полностью обтекает всю фразу, но пустое место все равно остается...

  Скрыть контент

 

 

CSS надо понимать.

 

    line-height: 88px;
    display: inline;
    padding: 8px;

Для такого случая - margin и z-index ещё понадобятся. Это в Гугл.

[samvel4577]

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

Я добавил в slideshow.tpl некоторые изменения, а именно

Вместо кода

<?php if ($banner['link']) { ?>
<a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>

вставил вот это

<div class="text-slider"><span><?php echo $banner['title']; ?></div><a href="<?php echo $banner['link']; ?>"><div class="text-slider"><?php echo $banner['title']; ?></div><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
    <?php } else { ?></span>
    <div class="text-slider"><span><?php echo $banner['title']; ?></div><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
    <?php } ?></span>
  </div>

Т.е добавил в код <span>

 

в stylesheet.css добавил это:

.text-slider{
  max-width: 600px;
  color: #fff;
  font-size: 3em;
  font-family: Arial;
  line-height: 41px;
  text-transform: uppercase;
  
}

.text-slider span{
  background-color: #0000006e;
  -webkit-box-decoration-break: clone;
  background-size: 600px;
  box-sizing: border-box;
  padding:0px;
  left: 20px;
  bottom: 20px;
}

И вышло из этого вот:

 

Спойлер

Но проблема в том, что текст не ложится вторым слоем на слайдер а оказывается поверх него.Чую этот тот самый z-index, но не уверен. Если для text-slider span задать position:absolute, то текст смещается на слайдер, но уже находится внизу располагается в одну строку. Не подскажете, что где подправить?

Змінено 23 листопада 2017 користувачем samvel4577

[samvel4577]

Вы мне поможете?

[KomissarJuve]

В 24.11.2017 в 15:08, samvel4577 сказал:

Вы мне поможете?

НЕ МНОГО ПОДУМАЙТЕ

кому интересно за бесплатно тратить на вас свое время

[samvel4577]

В 02.12.2017 в 14:30, KomissarJuve сказал:

НЕ МНОГО ПОДУМАЙТЕ

кому интересно за бесплатно тратить на вас свое время

А какой тогда смысл в форуме поддержки?????

[KomissarJuve]

А какой тогда смысл в форуме поддержки?????

------------------------------------------------------------

Я тоже об этом  думаю

[spectre]

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

А какой тогда смысл в форуме поддержки?????

 

Форуме поддержки ЧЕГО?

[samvel4577]

Вместо того, чтобы изливать это, просто подсказали бы, в чем проблема, я уверен, что тут делов на 2 минуты, просто думал, что люди, разбирающиеся в этом, помогут, т.к у меня знаний не хватает, А где мне еще искать поддержки, как не на единственном русскоязычном форуме, где и обитает большая часть понимающих людей(под этим я и понимаю "форум поддержки Opencart". Просить деньги за пару строк в коде - как-то низкопробно. Впрочем, спасибо @Gann, который не требовал вознаграждения за полезные подсказки.

[spectre]

9 минут назад, samvel4577 сказал:

я уверен, что тут делов на 2 минуты

 

Так сделайте, епт)) 

 

Правильно говорят что наглость не второе а первое счастье

[samvel4577]

1 час назад, spectre сказал:

 

Так сделайте, епт)) 

 

Правильно говорят что наглость не второе а первое счастье

Не надо вырывать из контекста. 

2 часа назад, samvel4577 сказал:

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

 

[spectre]

25 минут назад, samvel4577 сказал:

Не надо вырывать из контекста. 

 

 

Так если знаний не хватает, откуда уверенность про 2 минуты? Анекдот про удар молотком за 100$ слышали?

[samvel4577]

Еще раз повторяю, вместо бессмысленной болтовни можно подсказать, в каком направлении действовать.

[spectre]

36 минут назад, samvel4577 сказал:

Еще раз повторяю, вместо бессмысленной болтовни можно подсказать, в каком направлении действовать.

 

Я думаю с таким подходом вам подскажут в каком направлении двигаться

[samvel4577]

@spectre  Зачем вы здесь? Если у вас не хватает навыков и не можете помочь, просто пройдите мимо, в чем проблема? Язвить не нужно, я просто просил помощи, а вы просто пустословите ко-ко-ко. Мне нужна подсказка, и явно не ваша, до свидания.

Змінено 4 грудня 2017 користувачем samvel4577