Новости Joomla

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 #Astroid

Как тестировать 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

Вышел релиз Revo PageBuilder Toolkit for YOOtheme Pro 1.6

Вышел релиз Revo PageBuilder Toolkit for YOOtheme Pro 1.6.2PageBuilder Toolkit - это специализированный плагин для конструктора страниц Yootheme Pro, содержит набор различных утилит для ускорения процесса работы и отладки макета, множественные улучшения в интерфейсе, включая поддержку dark mode, подсказки, быстрая смена разрешения в окне просмотра и много чего еще.v.1.6.2 Что нового?- Индикатор статусов: теперь не просто показывает состояние запросов, но и делает автоматические попытки их отправки при кратковременных сбоях в сети, а если это не помогло, то переводит конструктор в ручной режим, что позволяет сохранит макет и настройки темы прежде чем вы потеряете все, что было сделано с момента последнего сохранения- Подсветка ошибок в макете: плагин анализирует код страницы и может автоматически подсвечивать data атрибуты с кучей мусора, которые попадают в код страницы при копипасте из Figma в TinyMCE (пригодится для старых макетов, в текущей работе плагин сам очищает код мусора). Также есть подсветка семантических ошибок сборки - дубли h1 тега на странице и вложенных друг в друга заголовков.- Улучшена поддержка будущего релиза Yootheme Pro 5 и редактора CodeMirror 6Плагин для русскоязычных пользователей доступен в каталоге расширений SovMart и распространяется за символическую плату (100р). Разработчики Joomla расширений и партнеры автора могут получить плагин бесплатно.Для работы плагина необходим конструктор страниц Yootheme Pro.Разработчик плагина - участник нашего сообщества Александр Судьбинов (@alexrevo), член официальной группы поддержки Yootheme Pro. Страница расширенияОписание на сайте автора@joomlafeed#joomla #yootheme

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

Kovgan

  • Осваиваюсь на форуме
  • 11
  • 0 / 0
Модуль HTML. Подложка под изображение
« : 09.04.2014, 03:28:14 »
Сделал новый модуль HTML и хочу сделать бекграунд, на который можно будет наложить другое изображение+текст. 
Каким образом лучше всего сделать такую подложку?

Вот что я сделал:
в template.css своего шаблона добавил класс .vtype
Спойлер
[свернуть]

а в новом модуле HTML вставил строчку:
Код
<div class="vtype">Классический витраж</div>

И вот что получилось:


Но если туда добавить изображение в текстовом редакторе в Joomla
Спойлер
[свернуть]

то это изображение куда-то перескакивает:


На страницах сайта на таких стеклянных подложках будут размещаться разные изображения.

Все это пытался реализовать через суффикс CSS-класса модуля, но так его и не осилил.
Прошу помощи
Записан
*

alex38ann

  • Захожу иногда
  • 204
  • 7 / 0
  • www.sn38.ru
Re: Модуль HTML. Подложка под изображение
« Ответ #1 : 09.04.2014, 08:06:57 »
у меня фото отображается по верх окна, указал для картинки ширину и высоту http://jsfiddle.net/alex38ann/tqFLL/
« Последнее редактирование: 09.04.2014, 08:10:38 от alex38ann »
Записан
*

Grigory S.

  • Давно я тут
  • 658
  • 70 / 0
  • (с)
Re: Модуль HTML. Подложка под изображение
« Ответ #2 : 09.04.2014, 08:27:56 »
Код: html
<div class="vtype">Классический витраж<img src="#" /></div>

Код: css
.vtype{
  overflow:hidden
  display: block;
  position: absolute;
  border: 1px solid #071515; 
  border-radius: 3px;
  box-shadow: 2px 2px 5px #4afffd;
  opacity: .7;
  width: 440px;
  height: 367px;
  font-size:20pt;
  color: #000000;
  text-shadow: 3px 1px 2px #88fdfc;      
  text-align: center;
}
.vtype img{
  width:100%
}
Записан
Не задав правильный вопрос, невозможно получить правильный ответ.
Для "спасибок" существует кнопочка "+".
*

Kovgan

  • Осваиваюсь на форуме
  • 11
  • 0 / 0
Re: Модуль HTML. Подложка под изображение
« Ответ #3 : 09.04.2014, 17:30:59 »
Спасибо большое!

Сделал так:
Код
<div class="vtype">Классический витраж <br /><a href="index.php/type-vitrage/classic"><img src="images/Classic.jpg" border="0" width="410px" height="310px" /></a></div>

Код: css
.vtype{
  overflow:hidden
  display: block;
  position: absolute;
  border: 1px solid #071515; 
  border-radius: 3px;
  box-shadow: 2px 2px 5px #4afffd;
  opacity: .7;
  width: 440px;
  height: 367px;
  font-size:20pt;
  color: #000000;
  text-shadow: 3px 1px 2px #88fdfc;      
  text-align: center;
}
.vtype img{
  width:100%
}

И вот что получилось:




Теперь отступы (слева, справа и снизу) от картинки до подложки можно регулировать шириной/высотой самой картинки. Как теперь сделать этой картинке отступ сверху? Или вообще сделать область за которую не будет выходить изображение. Например, вот такую:



И еще вопрос: как сделать так, чтобы ссылкой являлась не только внутренне изображение, а вся "стеклянная подложка" вместе с картикой?
Записан
*

Grigory S.

  • Давно я тут
  • 658
  • 70 / 0
  • (с)
Re: Модуль HTML. Подложка под изображение
« Ответ #4 : 09.04.2014, 17:33:15 »
Цитата: Kovgan от 09.04.2014, 17:30:59
И еще вопрос: как сделать так, чтобы ссылкой являлась не только внутренне изображение, а вся "стеклянная подложка" вместе с картикой?
Обернуть весь div ссылкой.
Записан
Не задав правильный вопрос, невозможно получить правильный ответ.
Для "спасибок" существует кнопочка "+".
*

Kovgan

  • Осваиваюсь на форуме
  • 11
  • 0 / 0
Re: Модуль HTML. Подложка под изображение
« Ответ #5 : 09.04.2014, 21:13:16 »
Цитата: kamaz6141 от 09.04.2014, 17:33:15
Обернуть весь div ссылкой.

Как это правильно сделать? Я пробовал ссылку вынести с div  вот таким образом:
Код: css
<a class="hover" href="index.php/type-vitrage/classic" >
<div 
class="vtype">text...<img src="images/Classic.jpg" border="0" width="410px" height="310px" />
</div>
</a>

*Изначально было так:
Код: css
<div 
class="vtype">text...<a class="hover" href="index.php/type-vitrage/classic" ><img src="images/Classic.jpg" border="0" width="410px" height="310px" />
</a>
</div>
Записан
*

Kovgan

  • Осваиваюсь на форуме
  • 11
  • 0 / 0
Re: Модуль HTML. Подложка под изображение
« Ответ #6 : 09.04.2014, 22:14:02 »
Разобрался. Сделал через onclick:
Код: css
<div class="linkblock" onclick="location.href='index.php/type-vitrage/classic';">
   <div class="vtype">Классический витраж<img src="images/Classic.jpg" border="0" width="410px" height="310px" />
   </div>
</div>

Код: css
.linkblock {cursor:pointer}
Записан
*

Kovgan

  • Осваиваюсь на форуме
  • 11
  • 0 / 0
Re: Модуль HTML. Подложка под изображение
« Ответ #7 : 10.04.2014, 04:07:42 »
Пытаюсь добавить в самый низ еще один слой с размерами, как у светящейся подложки, только затемненный. Это для того, чтобы т.н. светящаяся подложка была не полностью прозрачна, а похожа на темное стекло.
Для этого добавил еще один класс .vtype-dark с бекграундом и прозрачностью .4

Код: xml
<div class="linkblock" onclick="location.href='index.php/gallery/door-vitrage';">
     <div class="vtype-dark"> 
         <div class="vtype">door vitrage<p> 
             <img src="images/door.jpg" border="0" width="173px" height="310px" /></p>
         </div>
     </div>
</div>


Код: css
.vtype-dark
{
  display:block;
  position:absolute;
  background: #000000;
  width: 440px;
  height: 367px; 
  border-radius: 3px;   
  opacity: .4; 
}

Прозрачность .4 распространяется на остальные слои:



Как решить такую задачку, может есть решение без создания .vtype-dark?
Записан
*

Kovgan

  • Осваиваюсь на форуме
  • 11
  • 0 / 0
Re: Модуль HTML. Подложка под изображение
« Ответ #8 : 14.04.2014, 02:59:38 »
Попробовал создать еще один модуль HTML и класс .bg_type для него и разместил этот модуль в ту же позицию, что и "стеклянная подложка" (о которой шла речь выше)
Код
<div class="bg_type"> </div>

Код: css
.bg_type{
display: block;
position: absolute;
background: #000000;
border: 1px solid #071515; 
border-radius: 3px;
opacity: .6; 
width: 440px;
height: 367px; 
}

Результат тот же, прозрачность распространяется на "стеклянную подложку" + теперь этот темный прямоугольник перекрывает основной слой.
Как можно решить этот вопрос?


upd

Решил путем добавления  z-index: 1; к основному слою
Спойлер
[свернуть]
и прозрачность сделал по-другому:
Спойлер
[свернуть]

 Появилась новая проблема: тень шрифта (text-shadow:) разная в Chrome и мазиле


Пробовал написать -webkit-text-shadow: но ничего из этого не вышло. Как это можно исправить исправить?
« Последнее редактирование: 14.04.2014, 16:45:54 от Kovgan »
Записан
*

Kovgan

  • Осваиваюсь на форуме
  • 11
  • 0 / 0
Re: Модуль HTML. Подложка под изображение
« Ответ #9 : 24.04.2014, 12:26:54 »
Цитата: Kovgan от 14.04.2014, 02:59:38
Появилась новая проблема: тень шрифта (text-shadow:) разная в Chrome и мазиле


Пробовал написать -webkit-text-shadow: но ничего из этого не вышло. Как это можно исправить исправить?


 Вопрос еще актуален
Записан
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Модуль HTML. Подложка под изображение
« Ответ #10 : 24.04.2014, 15:44:18 »
Никак не исправить. Это вопрос к разработчикам браузеров. Ну или на-глаз подбирать более-менее похожие через вендорные правила.
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

В новом шаблоне не адаптируется изображение

Автор Ebelous

 Ответов: 4
Просмотров: 2985 		Последний ответ 13.02.2024, 17:01:12
от Vastriet
Не работают стили CSS в html

Автор ВикуЛя

 Ответов: 1
Просмотров: 1339 		Последний ответ 27.05.2021, 12:31:15
от ShopES
Как сделать плавающий модуль?

Автор THeCMeX

 Ответов: 2
Просмотров: 1265 		Последний ответ 08.03.2021, 22:21:01
от Flexderection
Как сделать плавающий блок/модуль. Пример есть!

Автор Good_user

 Ответов: 8
Просмотров: 12591 		Последний ответ 04.04.2020, 13:49:11
от jan_dax
Как вставить красивю кнопку CSS в модуль/материал?

Автор kunsaid

 Ответов: 6
Просмотров: 3039 		Последний ответ 02.10.2018, 23:16:12
от kunsaid