Новости Joomla

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

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

Рады сообщить о специальном предложении от Nevigen, разработчика расширений для JoomShopping.

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

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

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

Как тестировать 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 Гость просматривают эту тему.
  • 10 Ответов
  • 8758 Просмотров
*

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
Просмотров: 2990 		Последний ответ 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
Просмотров: 12593 		Последний ответ 04.04.2020, 13:49:11
от jan_dax
Как вставить красивю кнопку CSS в модуль/материал?

Автор kunsaid

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