Новости 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

👩‍💻 SM WT CDEK аддон доставки для JoomShopping.

👩‍💻 SM WT CDEK аддон доставки для JoomShopping.

Способ доставки для интернет-магазина JoomShopping. Работает с API CDEK v.2. Считает стоимость доставки, позволяет выбрать пункт выдачи заказа CDEK на карте, отображает полную информацию о ПВЗ в заказе. Для работы аддона необходимо установить и настроить библиотеку WT CDEK.

👉 v.1.3.4. Что нового?
- Скидки на доставку. Добавлены настройки скидок на доставку в зависимости от суммы заказа. Также можно выбрать какую цену использовать: до применения купона или после.
- Фиксированная наценка. Добавлено поле для фиксированной наценки на доставку в интерфейс цены на доставку.
- Локализация. Сделаны файлы локализации. Русский и английский языки.
- Рефакторинг и чистка кода. Приблизили код к стандартам.

Страница расширения

@joomlafeed

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

dron

  • Завсегдатай
  • 1581
  • 16 / 10
Адаптивный фон
« : 03.01.2013, 16:29:10 »
День добрый! Ребята, нужно как-то малой кровью сделать адаптивный бэкграунд. Сам шаблон будет фиксированный, а вот фон сверху хочу что бы расширялся и сжимался. Как это сделать?

Заранее спасибо!
Записан
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Адаптивный фон
« Ответ #1 : 03.01.2013, 17:15:31 »
Разметка:
Код: html4strict
<body>
  <div id="all-all">
    <!--тут весь ваш сайт-->
  </div>
  <img src="bg.png" width="100%" height="100%" id="all-bg" />
</body>
Стили:
Код: css
html, body {width:100%; height:100%; min-height:100%;}
#all-all {position:relative; z-index:2;}
#all-bg {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}
Записан
*

Sliapy

  • Захожу иногда
  • 318
  • 48 / 4
Re: Адаптивный фон
« Ответ #2 : 03.01.2013, 17:32:57 »
И получим фоновое изображение с кривым соотношением сторон на некоторых разрешениях?
Записан
*

NightGuard

  • Живу я здесь
  • 2927
  • 378 / 7
  • вжжж-вжжж
Re: Адаптивный фон
« Ответ #3 : 03.01.2013, 17:49:18 »
Цитата: Sliapy от 03.01.2013, 17:32:57
И получим фоновое изображение с кривым соотношением сторон на некоторых разрешениях?
Ты бы вместо подколов поправил, а то что-то последнее время на троля стал похож.

Код: css
#all-bg {position:absolute; top:0; left:0; width:100%; z-index:1;}

Высота лишняя была, высота подгоняется на самом изображении.
Записан
Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма
*

Sliapy

  • Захожу иногда
  • 318
  • 48 / 4
Re: Адаптивный фон
« Ответ #4 : 03.01.2013, 17:57:34 »
Цитата: NightGuard от 03.01.2013, 17:49:18
Ты бы вместо подколов поправил, а то что-то последнее время на троля стал похож.
Я так ответил, потому что не был уверен.

Вообще, имхо, все это полумеры. Потому что, если нужно, чтобы фоновое изображение таки занимало всю высоту браузера, то придется или жить с деформацией (тогда тут Шустрый все правильно подсказал), либо делать через тот же jQuery и терять на некоторых разрешениях куски фона.
Записан
*

dron

  • Завсегдатай
  • 1581
  • 16 / 10
Re: Адаптивный фон
« Ответ #5 : 03.01.2013, 18:01:13 »
спасибо! высота как раз не нужна. jquery видел... не хотелось бы лишние скрипты цеплять...
Записан
*

NortonFox

  • Захожу иногда
  • 441
  • 43 / 0
Re: Адаптивный фон
« Ответ #6 : 03.01.2013, 19:17:27 »
Почитайте про @media (цсс) - это решит ваши проблемы.
Записан
Я знаю только то, что ничего не знаю
*

Sliapy

  • Захожу иногда
  • 318
  • 48 / 4
Re: Адаптивный фон
« Ответ #7 : 03.01.2013, 19:56:04 »
А как медиа поможет решить проблему с адаптацией фона под экраны с шириной от 1024 до, например, 1920?
Записан
*

dron

  • Завсегдатай
  • 1581
  • 16 / 10
Re: Адаптивный фон
« Ответ #8 : 03.01.2013, 21:07:15 »
кстати, нашел примерно то что искал: http://demo.hotjoomlatemplates.com/one_page/
« Последнее редактирование: 03.01.2013, 21:48:32 от dron »
Записан
*

dron

  • Завсегдатай
  • 1581
  • 16 / 10
Re: Адаптивный фон
« Ответ #9 : 03.01.2013, 21:44:36 »
Цитата: Shustry от 03.01.2013, 17:15:31
Разметка:
Код: html4strict
<body>
  <div id="all-all">
    <!--тут весь ваш сайт-->
  </div>
  <img src="bg.png" width="100%" height="100%" id="all-bg" />
</body>
Стили:
Код: css
html, body {width:100%; height:100%; min-height:100%;}
#all-all {position:relative; z-index:2;}
#all-bg {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}
к сожалению такой вариант не подошел... на фоне фотка, пропорции не сохраняются... на моем 22 дюймовом экране, например, она вытянутая (((

без jquery, видимо, не обойтись?
Записан
*

NightGuard

  • Живу я здесь
  • 2927
  • 378 / 7
  • вжжж-вжжж
Re: Адаптивный фон
« Ответ #10 : 03.01.2013, 22:04:15 »
Цитата: NightGuard от 03.01.2013, 17:49:18
Код: css
#all-bg {position:absolute; top:0; left:0; width:100%; z-index:1;}

Высота лишняя была, высота подгоняется на самом изображении.
Вы внимательно прочитали?
Записан
Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма
*

dron

  • Завсегдатай
  • 1581
  • 16 / 10
Re: Адаптивный фон
« Ответ #11 : 03.01.2013, 22:16:56 »
Цитата: NightGuard от 03.01.2013, 22:04:15
Вы внимательно прочитали?
естественно. так и сделал! но есть то что есть.
Записан
*

NightGuard

  • Живу я здесь
  • 2927
  • 378 / 7
  • вжжж-вжжж
Re: Адаптивный фон
« Ответ #12 : 03.01.2013, 22:30:27 »
Ссылку!
Записан
Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма
*

dron

  • Завсегдатай
  • 1581
  • 16 / 10
Re: Адаптивный фон
« Ответ #13 : 04.01.2013, 00:04:48 »
Записан
*

Sliapy

  • Захожу иногда
  • 318
  • 48 / 4
Re: Адаптивный фон
« Ответ #14 : 04.01.2013, 01:07:42 »
У Вас
<img height="100%" width="100%" id="all-bg" src="/templates/atomic/images/bg1.jpg">
Просто уберите высоту и отсюда.
Записан
*

NortonFox

  • Захожу иногда
  • 441
  • 43 / 0
Re: Адаптивный фон
« Ответ #15 : 04.01.2013, 04:19:56 »
То есть решение ваших проблем с @media вам не нравиться? Вы хоть почитали, что он делает?
Записан
Я знаю только то, что ничего не знаю
*

NightGuard

  • Живу я здесь
  • 2927
  • 378 / 7
  • вжжж-вжжж
Re: Адаптивный фон
« Ответ #16 : 04.01.2013, 06:16:23 »
Цитата: NortonFox от 04.01.2013, 04:19:56
То есть решение ваших проблем с @media вам не нравиться? Вы хоть почитали, что он делает?
http://htmlbook.ru/css/media

Цитировать
Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, КПК, монитор и др.

Цитата: dron от 03.01.2013, 16:29:10
Сам шаблон будет фиксированный, а вот фон сверху хочу что бы расширялся и сжимался.
Записан
Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма
*

NortonFox

  • Захожу иногда
  • 441
  • 43 / 0
Re: Адаптивный фон
« Ответ #17 : 04.01.2013, 06:43:03 »
Для общего понимания:

Код: css
/* Разрешения */
/* Начало 1280 на 1024 */
@media screen and (min-width: 1200px){
	.class{.....}
}

/* Начало 1024 на 768 */
@media screen and (min-width: 1000px) and (max-width: 1200px){
	.class{.....}
}

/* Начало 800 на 600 */
@media screen and (min-width: 10px) and (max-width: 900px){
	.class{.....}
}

Каждому элементу прописывается своя картинка для фона
(цифры подбирал сам, если есть лучший метод указания диапазона, то конечно используйте его)
Записан
Я знаю только то, что ничего не знаю
*

dron

  • Завсегдатай
  • 1581
  • 16 / 10
Re: Адаптивный фон
« Ответ #18 : 04.01.2013, 12:12:07 »
Цитата: NortonFox от 04.01.2013, 04:19:56
То есть решение ваших проблем с @media вам не нравиться? Вы хоть почитали, что он делает?
все смотрел, все читал. большое спасибо и вам! вот здесь, на сколько я понял, сделано именно так: http://demo.gavick.com/index.php?month=Oct&year=2012
очень интересный способ и его я тоже попробую.
смущает только поддержка ИЕ только с 9.0+
Записан
*

dron

  • Завсегдатай
  • 1581
  • 16 / 10
Re: Адаптивный фон
« Ответ #19 : 04.01.2013, 12:12:33 »
Цитата: Sliapy от 04.01.2013, 01:07:42
У Вас
<img height="100%" width="100%" id="all-bg" src="/templates/atomic/images/bg1.jpg">
Просто уберите высоту и отсюда.
точно! прошу прощения. моя невнимательность
Записан
*

NortonFox

  • Захожу иногда
  • 441
  • 43 / 0
Re: Адаптивный фон
« Ответ #20 : 04.01.2013, 12:21:38 »
Цитата: dron от 04.01.2013, 12:12:07
очень интересный способ и его я тоже попробую.

Он не просто интересный, такой способ дает полный контроль над ситуацией, но в замен съедает время для разработки. Зато в последствии когда будите переходить на мобильные устройства - будет проще адаптировать дизайн всего сайта таким образом.

Цитата: dron от 04.01.2013, 12:12:07
смущает только поддержка ИЕ только с 9.0+


Тут конечно да, но в ИЕ много что не работает, не отказываться же от создания сайтов ))). Я например не обращаю внимание на все версии ниже 9.0, ушло их время.
Записан
Я знаю только то, что ничего не знаю
*

Sliapy

  • Захожу иногда
  • 318
  • 48 / 4
Re: Адаптивный фон
« Ответ #21 : 04.01.2013, 13:01:47 »
Цитата: NortonFox от 04.01.2013, 06:43:03
Для общего понимания:

Код: css
/* Разрешения */
/* Начало 1280 на 1024 */
@media screen and (min-width: 1200px){
	.class{.....}
}

/* Начало 1024 на 768 */
@media screen and (min-width: 1000px) and (max-width: 1200px){
	.class{.....}
}

/* Начало 800 на 600 */
@media screen and (min-width: 10px) and (max-width: 900px){
	.class{.....}
}

Каждому элементу прописывается своя картинка для фона
(цифры подбирал сам, если есть лучший метод указания диапазона, то конечно используйте его)
И сколько "диапазонов" придется задать руками, чтобы попасть по ширине пиксель в пиксель? Если не попадать пиксель в пиксель, то какой смысл вообще этим заниматься (все равно картинка будет увеличиваться/уменьшаться, так же, как и с шириной 100%), при этом теряя кроссбраузерность?
Записан
*

beliyadm

  • Легенда
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Re: Адаптивный фон
« Ответ #22 : 04.01.2013, 13:07:26 »
Правильно понимаю, что требуется что-то вроде этого http://bavotasan.com/demos/fullbg/ (тянуть окно браузера)?
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

NortonFox

  • Захожу иногда
  • 441
  • 43 / 0
Re: Адаптивный фон
« Ответ #23 : 04.01.2013, 14:07:39 »
Цитата: Sliapy от 04.01.2013, 13:01:47
И сколько "диапазонов" придется задать руками, чтобы попасть по ширине пиксель в пиксель? Если не попадать пиксель в пиксель, то какой смысл вообще этим заниматься (все равно картинка будет увеличиваться/уменьшаться, так же, как и с шириной 100%), при этом теряя кроссбраузерность?
Попасть пиксель в пиксель чего?
О потере кроссбраузерности речи не идет, вы же не будите затачивать свой макет под Netscape 4 ?, так зачем уделять внимание чуть менее, но все же устаревшим браузерам? И да их еще используют.... - не значительная потеря трафика в замен на респонсив.
Записан
Я знаю только то, что ничего не знаю
*

NightGuard

  • Живу я здесь
  • 2927
  • 378 / 7
  • вжжж-вжжж
Re: Адаптивный фон
« Ответ #24 : 04.01.2013, 14:27:26 »
NortonFox, твое решение не
Цитата: beliyadm от 04.01.2013, 13:07:26
Правильно понимаю, что требуется что-то вроде этого http://bavotasan.com/demos/fullbg/ (тянуть окно браузера)?
Да, и самое простое, если не требуется точно выставлять изображение по центру экрана, задать ему ширину 100% и положить на один слой ниже.

NortonFox, ты не прав, прекращай, с @media будет больше проблем, чем пользы, начиная от кучи фонов, заканчивая избыточностью кода, в данном случае этого не требуется.
Записан
Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма
*

beliyadm

  • Легенда
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Re: Адаптивный фон
« Ответ #25 : 04.01.2013, 14:31:12 »
Нет решения кроме JS и jquery пророка его
Чистым хтмл+цсс не получится сделать ничего, кроме просто фиксированного фона, но оно же нам не подходит.
Потому только JS
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

NightGuard

  • Живу я здесь
  • 2927
  • 378 / 7
  • вжжж-вжжж
Re: Адаптивный фон
« Ответ #26 : 04.01.2013, 14:48:55 »
Цитата: beliyadm от 04.01.2013, 14:31:12
Чистым хтмл+цсс не получится сделать ничего, кроме просто фиксированного фона, но оно же нам не подходит.
Потому только JS
Так фон и так фиксируют в координатах 0;0, а дальше ставим ему 100% ширины - profit! Это в данном конкретном случае.

Цитата: dron от 03.01.2013, 16:29:10
фон сверху хочу что бы расширялся и сжимался
Ему требовалось только по горизонтали тянуть фон.
Записан
Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма
*

NortonFox

  • Захожу иногда
  • 441
  • 43 / 0
Re: Адаптивный фон
« Ответ #27 : 04.01.2013, 16:57:38 »
Цитата: NightGuard от 04.01.2013, 14:27:26
NortonFox, ты не прав, прекращай, с @media будет больше проблем, чем пользы, начиная от кучи фонов, заканчивая избыточностью кода, в данном случае этого не требуется.
Я просто предложил вариант, трудно угадать, что там действительно задумал ТС, чем больше возможностей тем лучше, а мне в ответ накидали про какие то "пиксель в пиксель" ))
Записан
Я знаю только то, что ничего не знаю
*

NightGuard

  • Живу я здесь
  • 2927
  • 378 / 7
  • вжжж-вжжж
Re: Адаптивный фон
« Ответ #28 : 04.01.2013, 17:19:54 »
NortonFox, а по сути верно "накидали" ;)
Записан
Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма
*

Sliapy

  • Захожу иногда
  • 318
  • 48 / 4
Re: Адаптивный фон
« Ответ #29 : 04.01.2013, 18:10:03 »
Как ни странно, "пиксель в пиксель" в ширину экрана. Чтобы не "обрезать" края изображения или не получить пустые куски справа и слева.

Для разрешения 1024х768 нужна картинка шириной 1024-30(?)пикселей. Для 1920 - 1920-30 пикселей и т.д. Для каждого разрешения задавать свой фон - смысла нет. И это не учитывая, что у некоторых людей (у меня в том числе) на широкоформатнике браузер открыт в примерно пол-окна => разрешение вообще может быть любое.

А если задавать для диапазона, то получим то же, что и просто при ширине 100%.

Единственный плюс - не так сильно ухудшается качество, если фоновое изображение мелкое, а разрешение высокое.

Про поддержку ИЕ ниже 9 опять же - зачем терять поддержку 8 и 7 версии и не выигрывать ничего, кроме понта "я юзаю CSS3"?

Так что, имхо, ширина 100% - самый простой и оптимальный вариант.

Если нужно ловить еще и высоту, то как сказал beliyadm - JS и jQuery.
« Последнее редактирование: 04.01.2013, 18:16:34 от Sliapy »
Записан
1 2  Все   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Нужна подсказка как сделать готовый шаблон адаптивный

Автор zyggano

 Ответов: 1
Просмотров: 1218 		Последний ответ 07.04.2015, 19:52:36
от ShfVD
Как выбрать бесплатный адаптивный шаблон под Joomla 2.5.19?

Автор borro

 Ответов: 2
Просмотров: 2160 		Последний ответ 18.03.2014, 10:02:24
от borro
Как убрать адаптивный шаблон yootheme Sync?

Автор zvi

 Ответов: 5
Просмотров: 2807 		Последний ответ 07.02.2014, 21:10:01
от zvi
Адаптивный шаблон

Автор 20dollars

 Ответов: 0
Просмотров: 1093 		Последний ответ 17.01.2014, 18:09:13
от 20dollars
Переделать в адаптивный шаблон

Автор Mick_20

 Ответов: 1
Просмотров: 1526 		Последний ответ 03.01.2014, 23:13:55
от kreker92