Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


 Поделиться

Рекомендованные сообщения

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

Спойлер

5a14c95d5974d_1.thumb.png.450fe3f545d29aa1bffc930e65039378.png

 

 

 

Изменено пользователем samvel4577
Ссылка на комментарий
Поделиться на других сайтах


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

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

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

5a14c95d5974d_1.thumb.png.450fe3f545d29aa1bffc930e65039378.png

 

 

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

 

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

Ссылка на комментарий
Поделиться на других сайтах

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

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

Изменено пользователем samvel4577
Ссылка на комментарий
Поделиться на других сайтах


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

Спойлер

5a15efc55ab65_1.thumb.png.5d4244aff3fc1603d1dfef6ccaa98357.png

 

Изменено пользователем samvel4577
Ссылка на комментарий
Поделиться на других сайтах


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

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

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

Ссылка на комментарий
Поделиться на других сайтах


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

Ссылка на комментарий
Поделиться на других сайтах

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

Спойлер

5a169319b110c_.thumb.png.b18dfca4046ea6fcb6b2248f670cb67a.png

 

Изменено пользователем samvel4577
Ссылка на комментарий
Поделиться на других сайтах


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

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

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

 

 

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

 

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

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

Ссылка на комментарий
Поделиться на других сайтах

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

Я добавил в 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;
}

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

 

Спойлер

5a16d3042c047_.thumb.png.86ee80c5ed88ce237e4d42ab67a62895.png

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

Изменено пользователем samvel4577
Ссылка на комментарий
Поделиться на других сайтах


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

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

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

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

Ссылка на комментарий
Поделиться на других сайтах


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

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

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

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

Ссылка на комментарий
Поделиться на других сайтах


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

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

 

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

Ссылка на комментарий
Поделиться на других сайтах

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

Ссылка на комментарий
Поделиться на других сайтах


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

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

 

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

 

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

Ссылка на комментарий
Поделиться на других сайтах

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

 

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

 

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

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

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

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

 

Ссылка на комментарий
Поделиться на других сайтах


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

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

 

 

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

Ссылка на комментарий
Поделиться на других сайтах

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

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

 

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

Ссылка на комментарий
Поделиться на других сайтах

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

Изменено пользователем samvel4577
Ссылка на комментарий
Поделиться на других сайтах


Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.