Войти

Авторизация

Логин:
Пароль:
Забыли пароль?
Регистрация
Сайт пользователей Artisteer и Themler. Официальный торговый представитель.

[РЕШЕНО] Вставка стороннего стиля

Посетитель
Александр
Сообщений: 29
246 дней назад
Всем добрый вечер!
Ребят, помогиииииите или я выкину комп.))
Не могу вставить на главную страницу сайта под шапкой вот это -
Скрытый текст виден только зарегистрированным пользователям

Отображается очень криво.
Прикрепленные файлы:
hovereffectideas_5a1ace515422b.zip | 1204.93 Кб | Скачали: 5 раз
Постоянный участник
Malover
Медаль
Сообщений: 638
12 дней назад
Там где скачали архив должна быть инструкция куда и что добавить.

Вот в блоге примерный принцип как прикрутить к джумле посторонний скрипт:
https://artisteer-rus.com/blogs/ukrashaem-shablon/delaem-slaid-shou-v-joomla.html

Если инструкции нет, тогда можно просто по аналогии со статьей в блоге.

У вас в модуль HTML надо вставить код нужного эффекта, я взял первый:

Код PHP:
  1.  
  2. <div class="content">
  3. <div class="grid">
  4. <figure class="effect-lily">
  5. <img src="img/12.jpg" alt="img12">
  6. <figcaption>
  7. <div>
  8. <h2>Nice <span>Lily</span></h2>
  9. <p>Lily likes to play with crayons and pencils</p>
  10. </div>
  11. <a href="#">View more</a>
  12. </figcaption>
  13. </figure>
  14. <figure class="effect-lily">
  15. <img src="img/1.jpg" alt="img1">
  16. <figcaption>
  17. <div>
  18. <h2>Nice <span>Lily</span></h2>
  19. <p>Lily likes to play with crayons and pencils</p>
  20. </div>
  21. <a href="#">View more</a>
  22. </figcaption>
  23. </figure>
  24. </div>
  25. </div>
  26.  
  27.  
где надо правильно поправить все пути до изображений в строках вида <img src="img/12.jpg" alt="img12"> предварительно расположив картинки по нужным вам адресам. А в строках <a href="#">View more</a> поставить ссылки на нужные страницы вместо #.

а перед закрывающим тегом head в index.php шаблона вставить ссылки на стили и скрипт подключения, вот это:

Код PHP:
  1.  
  2. <link rel="stylesheet" type="text/css" href="css/normalize.css" />
  3. <link rel="stylesheet" type="text/css" href="css/demo.css" />
  4. <link rel="stylesheet" type="text/css" href="css/set1.css" />
  5.  
  6. <script>
  7. // For Demo purposes only (show hover effect on mobile devices)
  8. [].slice.call( document.querySelectorAll('a[href="#"') ).forEach( function(el) {
  9. el.addEventListener( 'click', function(ev) { ev.preventDefault(); } );
  10. } );
  11. </script>
  12.  
Где тоже изменить адреса до стилей <link rel="stylesheet" type="text/css" href="css/set1.css" /> предварительно расположив их тоже в папках по нужным адресам.

Примерно так как то, главное с адресами не запутаться.Добавлено спустя 10 минутЗЫ: У вас есть демо, обычно я для сложных вещей пробую на нем. В начале из страницы с демо удаляю все не нужное мне, тексты, заголовки, шапку, меню и пр.

То есть должно остаться в чистом виде нужный код скрипт и стили, то что я вам написал выше. Если все работает тогда можно переносить на движок или куда надо.

С первого раза не всегда получается, но как то так.
Редактировалось: 2 раза (Последний: 26 ноября 2017 в 18:08)
Постоянный участник
Malover
Медаль
Сообщений: 638
12 дней назад
В коде надо первый див контейнер убрать, он не нужен, так как страница будет контейнером и уже прописана в программе. так:

Код PHP:
  1.  
  2.  
  3. <div class="grid">
  4. <figure class="effect-lily">
  5. <img src="img/12.jpg" alt="img12">
  6. <figcaption>
  7. <div>
  8. <h2>Nice <span>Lily</span></h2>
  9. <p>Lily likes to play with crayons and pencils</p>
  10. </div>
  11. <a href="#">View more</a>
  12. </figcaption>
  13. </figure>
  14. <figure class="effect-lily">
  15. <img src="img/1.jpg" alt="img1">
  16. <figcaption>
  17. <div>
  18. <h2>Nice <span>Lily</span></h2>
  19. <p>Lily likes to play with crayons and pencils</p>
  20. </div>
  21. <a href="#">View more</a>
  22. </figcaption>
  23. </figure>
  24. </div>
  25.  
  26.  
  27.  
А ссылки для стилей и скрипта можно или в программе в основных настройках в поле ДОПОЛНИТЕЛЬНЫЙ HEAD HTML КОД вставить, или в сам модуль HTML можно вписать над кодом, но так хуже.
Редактировалось: 1 раз (Последний: 26 ноября 2017 в 18:59)
Посетитель
Александр
Сообщений: 29
246 дней назад
Ребят, спасибо большое!
Буду пробовать. Как получится отпишу и покажу.
Постоянный участник
FDmitriy
Медаль
Сообщений: 419
12 дней назад
Александр:
Не могу вставить на главную страницу сайта под шапкой вот это

Дело конечно личное, но не проще найти просто готовую секцию и вставить отредактировать под себя. Секций много, эффектов тоже можно разных сделать. smile
Я вот на вскидку посмотрел, попалось такое:



Malover:
Вот в блоге примерный принцип как прикрутить к джумле посторонний скрипт:
https://artisteer-rus.com/blogs/ukrashaem-shablon/delaem-slaid-shou-v-joomla.html

Если инструкции нет, тогда можно просто по аналогии со статьей в блоге.

У вас в модуль HTML надо вставить код нужного эффекта, я взял первый:

Можно не через модуль можно в программе через Вставка - Еще - HTML. smile
Постоянный участник
Malover
Медаль
Сообщений: 638
12 дней назад
FDmitriy:
Дело конечно личное, но не проще найти просто готовую секцию и вставить отредактировать под себя. Секций много, эффектов тоже можно разных сделать.

А какая разница? Если фишка понравилась smile
Посетитель
Александр
Сообщений: 29
246 дней назад
Спасибо огромное всем за помощь!
|
Перейти на форум: