Перейти к содержанию

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

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

Спойлер

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