Новости Joomla

NorrCompetition 3.0 — новые возможности компонента конкурсов и голосований для Joomla 6

Релиз NorrCompetition 3.0 — крупное обновление расширения для проведения конкурсов и голосований в Joomla.

Вышли релизы безопасности Joomla 6.1.1 и Joomla 5.4.6

Релиз безопасности Joomla 6.1.1 и Joomla 5.4.6

Проект Joomla! рад сообщить о выходе Joomla 6.1.1 и Joomla 5.4.6. Это релизы безопасности и исправления ошибок для серий 5.x и 6.x.

👩‍💻 JoomShopping: Самый полный курс по созданию интернет-магазина на CMS Joomla.

👩‍💻 JoomShopping: Самый полный курс по созданию интернет-магазина на CMS Joomla.

В открытый доступ выложен видео-курс Дмитрия Гончарова по созданию интернет-магазина на связке Joomla + JoomShopping. Видеоуроки содержат пошаговые инструкции от регистрации хостинга до особенностей вёрстки, настройки способов оплаты и доставки.

В видео фигурирует JoomShopping 4 и Joomla 3, однако JoomShopping довольно консервативный компонент и многие способы и подходы в нём не менялись годами, поэтому данные видео могут быть по прежнему полезны.

Смотреть видео-курс

@joomlafeed

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

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
Просмотров: 4095 		Последний ответ 13.02.2024, 17:01:12
от Vastriet
Не работают стили CSS в html

Автор ВикуЛя

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

Автор THeCMeX

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

Автор Good_user

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

Автор kunsaid

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