Новости Joomla

Новогодние скидки от Nevigen.com

Новогодние скидки от Nevigen.com

Рады сообщить о специальном предложении от Nevigen, разработчика расширений для JoomShopping. С 29 декабря 2025 года по 7 января 2026 года будет действовать скидка 26% на все заказы от $50. Предложение распространяется на весь ассортимент продукции. Подробности и полный каталог расширений доступны по ссылке: https://nevigen.com/ru #joomshopping

Astroid обновился до версии 3.3.7!

Astroid обновился до версии 3.3.7!

Astroid — это мощный фреймворк для дизайнеров и разработчиков, позволяющий создавать адаптивные, быстрые и надежные веб-сайты и шаблоны на базе Joomla.

Главное в новой версии:

-   Исправлена загрузка файлов макетов

В предыдущем крупном релизе Astroid 3.3.6 были сделаны важные улучшения:

Основные моменты:

  • Улучшенный UI/UX в ключевых областях конфигурации
  • Повышенная стабильность и согласованность в Layout Builder и Form Builder
  • Исправления ошибок на основе отзывов сообщества
  • Улучшенная обработка визуальных эффектов, границ и шрифтов

Улучшения:

  • Обновленный UX Layout Builder
  • Улучшенный эффект предзагрузчика
  • Улучшенный стиль границ
  • Улучшенный UI/UX вкладки «Layout» в Template Options

Исправления ошибок:

  • Решены проблемы с некорректными динамическими значениями
  • Исправлен Color Transform при прокрутке
  • Устранены проблемы с работой Form Builder в Article Layout и Module Layout Builder
  • Исправлена проблема с созданием ненужных временных файлов при обработке шрифтов

Скачать: https://github.com/templaza/astroid-framework/releases/tag/v3.3.7

Как тестировать Joomla PHP-разработчику? Компонент Patch tester.

👩‍💻 Как тестировать Joomla PHP-разработчику? Компонент Patch tester.Joomla - open source PHP-фреймворк с готовой админкой. Его основная разработка ведётся на GitHub. Для того, чтобы международному сообществу разработчиков было удобнее тестировать Pull Requests был создан компонент Patch Tester, который позволяет "накатить" на текущую установку Joomla именно те изменения, которые необходимо протестировать. На стороне инфраструктуры Joomla для каждого PR собираются готовые пакеты, в которых находится ядро + предложенные изменения. В каждом PR обычно находятся инструкции по тестированию: куда зайти, что нажать, ожидаемый результат. Тестировщики могут предположить дополнительные сценарии, исходя из своего опыта и найти баги, о которых сообщить разработчику. Или не найти, и тогда улучшение или исправление ошибки быстрее войдёт в ядро Joomla. Напомню, что для того, чтобы PR вошёл в ядро Joomla нужны минимум 2 положительных теста от 2 участников сообщества, кроме автора. Видео на YouTubeВидео на VK ВидеоВидео на RuTubeКомпонент на GitHub https://github.com/joomla-extensions/patchtester@joomlafeed#joomla #php #webdev #community

1   Вниз
0 Пользователей и 1 Гость просматривают эту тему.
  • 13 Ответов
  • 5723 Просмотров
*

DragDG

  • Захожу иногда
  • 75
  • 1 / 0
hover-эффекты при помощи CSS 3
« : 11.11.2011, 22:25:08 »
Да бы снизить нагрузку на страницу, решил использовать не js а обойтись возможностями css3:
Хотел сделать вот такую http://www.webmasters.by/articles/html-coding/467-original-hover-effects-with-css3.html.
Все сделано как описано.
Но что-то не чего не пашет.


В какую CSS шаба не засовывай не пашет.
В CSS не селен, прошу помощи, заранее спасибо.

joomla 1.7
шаб: yootheme spark
Записан
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: hover-эффекты при помощи CSS 3
« Ответ #1 : 11.11.2011, 22:33:41 »
С какого браузера тестируете?Когда задаете вопрос, прикладывайте пожалуйста ссылочку на свой сайт с проблемой.Либо код.А еще лучше целиком страницу со стилями в архиве.Или предлагаете угадать почему у Вас ничего не выходит?Кроме "руки кривые" в таком случае ничего не ждите в ответ
Записан
*

DragDG

  • Захожу иногда
  • 75
  • 1 / 0
Re: hover-эффекты при помощи CSS 3
« Ответ #2 : 12.11.2011, 00:20:09 »
Дико извиняюсь.
1)Firefox, opera, chrome.
2)Сайт http://slki.ru/9Ph
3)Примеры, мной использован #9: http://www.webmasters.by/images/articles/css3-hover-effects/OriginalHoverEffects.zip
4) на данный момент код находиться в css/system.css
Код
/* NINTH EXAMPLE*/
.view-ninth .mask-1, .view-ninth .mask-2 {
    background-color: rgba(0, 0, 0, 0.5);
    height: 361px;
    width: 361px;
    background: rgba(119, 0, 36, 0.5);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out 0.6s;
    -moz-transition: all 0.3s ease-in-out 0.6s;
    -o-transition: all 0.3s ease-in-out 0.6s;
    transition: all 0.3s ease-in-out 0.6s;
}
.view-ninth .mask-1 {
    left: auto;
    right: 0;
    -webkit-transform: rotate(56.5deg) translateX(-180px);
    -moz-transform: rotate(56.5deg) translateX(-180px);
    -o-transform: rotate(56.5deg) translateX(-180px);
    -ms-transform: rotate(56.5deg) translateX(-180px);
    transform: rotate(56.5deg) translateX(-180px);
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}
.view-ninth .mask-2 {
    top: auto;
    bottom: 0;
    -webkit-transform: rotate(56.5deg) translateX(180px);
    -moz-transform: rotate(56.5deg) translateX(180px);
    -o-transform: rotate(56.5deg) translateX(180px);
    -ms-transform: rotate(56.5deg) translateX(180px);
    transform: rotate(56.5deg) translateX(180px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
.view-ninth .content {
    background: rgba(0, 0, 0, 0.9);
    height: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
    width: 361px;
    overflow: hidden;
    -webkit-transform: rotate(-33.5deg) translate(-112px, 166px);
    -moz-transform: rotate(-33.5deg) translate(-112px, 166px);
    -o-transform: rotate(-33.5deg) translate(-112px, 166px);
    -ms-transform: rotate(-33.5deg) translate(-112px, 166px);
    transform: rotate(-33.5deg) translate(-112px, 166px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transition: all 0.4s ease-in-out 0.3s;
    -moz-transition: all 0.4s ease-in-out 0.3s;
    -o-transition: all 0.4s ease-in-out 0.3s;
    transition: all 0.4s ease-in-out 0.3s;
}
.view-ninth h2 {
    background: transparent;
    margin-top: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.view-ninth a.info {
    display: none;
}
.view-ninth:hover .content {
    height: 120px;
    width: 300px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    opacity: 0.9;
    top: 40px;
    -webkit-transform: rotate(0deg) translate(0, 0);
    -moz-transform: rotate(0deg) translate(0, 0);
    -o-transform: rotate(0deg) translate(0, 0);
    -ms-transform: rotate(0deg) translate(0, 0);
    transform: rotate(0deg) translate(0, 0);
}
.view-ninth:hover .mask-1, .view-ninth:hover .mask-2 {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.view-ninth:hover .mask-1 {
    -webkit-transform: rotate(56.5deg) translateX(1px);
    -moz-transform: rotate(56.5deg) translateX(1px);
    -o-transform: rotate(56.5deg) translateX(1px);
    -ms-transform: rotate(56.5deg) translateX(1px);
    transform: rotate(56.5deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
    -webkit-transform: rotate(56.5deg) translateX(-1px);
    -moz-transform: rotate(56.5deg) translateX(-1px);
    -o-transform: rotate(56.5deg) translateX(-1px);
    -ms-transform: rotate(56.5deg) translateX(-1px);
    transform: rotate(56.5deg) translateX(-1px);
}
5) после включения плагина "система-кэш" и очистки кэша на хостинге вот аткой результат:

6) спустя 5 минут слетела кодировка. пришлось отключить плагин
« Последнее редактирование: 12.11.2011, 00:54:33 от DragDG »
Записан
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: hover-эффекты при помощи CSS 3
« Ответ #3 : 12.11.2011, 15:49:31 »
Для блока с картинкой задайте размеры.По части css3 все работает как надо
Записан
*

DragDG

  • Захожу иногда
  • 75
  • 1 / 0
Re: hover-эффекты при помощи CSS 3
« Ответ #4 : 12.11.2011, 18:21:49 »
Беда в том что не знаю, где именно задать
Записан
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: hover-эффекты при помощи CSS 3
« Ответ #5 : 12.11.2011, 19:21:17 »
Код
div.mod-box div.box-1 {
    background: none repeat scroll 0 0 #141516;
    border: 1px solid #222426;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    padding: 19px;
}
Для этого блока добавьте
Код
width: ...px; height:...px;
Записан
*

DragDG

  • Захожу иногда
  • 75
  • 1 / 0
Re: hover-эффекты при помощи CSS 3
« Ответ #6 : 12.11.2011, 20:10:05 »
добавил не чего не изменилось
Записан
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: hover-эффекты при помощи CSS 3
« Ответ #7 : 12.11.2011, 20:29:37 »
А ничего и не изменилось.
Код
div.mod-box div.box-1 {
    background: none repeat scroll 0 0 #141516;
    border: 1px solid #222426;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    padding: 19px;
}
Для начала отключите GZip сжатие, или что там у Вас используется для оптимизации.Потом включите, когда все сделаете.И второй момент
Код
<div class="box-1 deepest" style="min-height: 972px;">
style="min-height: 972px;" уберите
Записан
*

DragDG

  • Захожу иногда
  • 75
  • 1 / 0
Re: hover-эффекты при помощи CSS 3
« Ответ #8 : 12.11.2011, 20:35:25 »
хм... отключив сжатие, действительно изменился размер. но все равно не работает
+ модуль твиттера внизу тоже изменил свой размер
Записан
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: hover-эффекты при помощи CSS 3
« Ответ #9 : 12.11.2011, 20:51:52 »
Сжатие включается лишь тогда, когда без него все работает как часы.Потому что не каждый подобный плагин и далеко не на каждом сайте работает корректно.Точнее не каждая страница со сжатыми стилями и жабаскриптом работает правильно.Грамотно оптимизировать страницу - это целая наука.

Теперь, когда отображение поддается тестированию, играйте со значениями высоты и ширины в тех блоках, которые Вы показали выше.Впрочем не только с шириной и высотой.
Например
Код
   -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
отвечают за стартовое местоположение перемещающегося блока.
Код
transform: rotate(56.5deg) translateX(180px);
Это поворот относительно центральной оси и смещение по горизонтали.Значение deg обозначает градусы наклона.Можно задавать как положительные значения, так и отрицательные зо знаком "-"
Записан
*

DragDG

  • Захожу иногда
  • 75
  • 1 / 0
Re: hover-эффекты при помощи CSS 3
« Ответ #10 : 12.11.2011, 23:35:59 »
спасибо!
поиграюсь.
но как быть с модулями? поменяв ширину высоту для hover, поменялись еще несколько. как сделать так чтоб исключительно те моду ли что вверху имели фиксированный размер?
Записан
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: hover-эффекты при помощи CSS 3
« Ответ #11 : 12.11.2011, 23:49:42 »
Обрамить все позиции с ними в отдельные блоки и наследовать элементы через них.К примеру
Код
<div class="myBlock">позиция</div>
Код
.myBlock div.mod-box div.box-1 {
    background: none repeat scroll 0 0 #141516;
    border: 1px solid #222426;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    padding: 19px;
}
В этом случае стиль будет присвоен только содержимому myBlock
Записан
*

DragDG

  • Захожу иногда
  • 75
  • 1 / 0
Re: hover-эффекты при помощи CSS 3
« Ответ #12 : 13.11.2011, 16:25:03 »
Код
<div class="myBlock">позиция</div>
где прописывать эту строку?
Записан
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: hover-эффекты при помощи CSS 3
« Ответ #13 : 14.11.2011, 07:43:25 »
В index.php вестимо.
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Найти height. Прошу помощи

Автор EvaLifeTime

 Ответов: 17
Просмотров: 1730 		Последний ответ 21.11.2019, 21:03:22
от EvaLifeTime
[Решено] Прошу помощи - кособочит форму ввода

Автор zndm

 Ответов: 3
Просмотров: 1483 		Последний ответ 07.02.2017, 12:16:23
от zndm
:hover и :active {

Автор RicoID

 Ответов: 1
Просмотров: 1160 		Последний ответ 21.11.2016, 12:22:04
от darkghost
Как задать :hover{ и :active { Для одной кнопки?

Автор RicoID

 Ответов: 2
Просмотров: 2649 		Последний ответ 18.11.2016, 16:34:43
от ProtectYourSite
CSS Hover для картинки

Автор vitalid

 Ответов: 19
Просмотров: 1735 		Последний ответ 20.06.2016, 15:13:34
от vipiusss