Новости Joomla

Компонент "Жимолость" v.1.2.0 (ex

Компонент "Жимолость" v.1.2.0 (ex. Спам-оборона для Joomla) Бесплатный компонент работает под Joomla и позволяет защищать формы сайта от атак спам ботов.👩‍💻 v.1.2.0. Что нового?Компонент полностью поддерживает работу с Joomla 6 без необходимости использования плагина совместимости. При этом поддержка Joomla 4 прекратилась, поскольку уже к Joomla 5 отличия между четвертой и пятой версиями были заметны. Компонент бесплатный. Существует версия для Joomla 3. Разработчик - участник нашего сообщества Владимир Егоров (@sitogon)Страница расширения#joomla #расширения

VKGallery — плагин вставки альбомов VK для Joomla.VKGallery — расширение для Joomla 3.x–5

👩‍💻 VKGallery — плагин вставки альбомов VK для Joomla.VKGallery — расширение для Joomla 3.x–5.x, которое позволяет вставлять фотоальбомы ВКонтакте прямо в материалы сайта. Поддерживаются режимы: сетка, слайдер и кирпичная кладка (masonry). Мобильный UX и свайпы в комплекте.- 3 типа галерей: слайдер, сетка и masonry- Быстрая работа. AJAX-подгрузка, кэширование запросов, ленивая загрузка изображений.- Мобильный UX. Свайпы, оптимизация под сенсорное управление и адаптивный дизайн.Плагин использует шорткод {vkgallery type="album_grid"}album-123456789_987654321{/vkgallery}.Страница расширенияДемоРазработчик - участник нашего сообщества Сергей Парфёнов (@Aprol).@joomlafeed#joomla #vk #расширения

Swiper.js, документация на русском языке

👩‍💻 Swiper.js, документация на русском языке.Добавил переводы документации современного скрипта слайдера swiper.js на русский язык. Документация эта относится к плагину веб-ассета для Joomla WT JSwiper, который подключает скрипт нативным для Joomla 4+ способом - с помощью Web Asset Manager.Сегодня добавлены: - Модули: Autoplay- Модули: Grid- Модули: Free Mode- Модули: Manipulation- Эффекты: Затухание (Fade Effect)- Модули: Parallax- Модули: Lazy Loading- Эффекты: Перелистывание (Coverflow Effect)Читать документацию Swiper.js по-русски@joomlafeed#webdev #swiperjs #js #joomla

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

Mihanja80

  • Завсегдатай
  • 1918
  • 168 / 4
  • Всю жизнь учусь...
CSS спрайт Как?
« : 31.05.2010, 01:17:00 »
Залил архив с картинками шаблона на ru.spritegen.website-performance.org. (настройки по умолчанию)
Получил Изображение и коды:
Код
.sprite-Block-c { background-position: 0 0; width: 990px; height: 122px; } 
.sprite-Block-h { background-position: 0 -172px; width: 3000px; height: 10px; } 
.sprite-Block-s { background-position: 0 -232px; width: 10px; height: 10px; } 
.sprite-Block-v { background-position: 0 -292px; width: 10px; height: 3000px; } 
.sprite-BlockHeader { background-position: -3050px 0; width: 1096px; height: 30px; } 
.sprite-BlockHeaderIcon { background-position: -3050px -80px; width: 20px; height: 25px; } 
.sprite-Button { background-position: -3050px -155px; width: 407px; height: 81px; } 
.sprite-Footer { background-position: -3050px -286px; width: 1086px; height: 150px; } 
.sprite-Header { background-position: -3050px -486px; width: 1078px; height: 167px; } 
.sprite-Header { background-position: -3050px -703px; width: 1086px; height: 175px; } 
.sprite-MenuItem { background-position: -3050px -928px; width: 400px; height: 69px; } 
.sprite-MenuSeparator { background-position: -3050px -1047px; width: 2px; height: 23px; } 
.sprite-Page-BgGlare { background-position: -3050px -1120px; width: 500px; height: 338px; } 
.sprite-Page-BgGradient { background-position: -3050px -1508px; width: 102px; height: 1000px; } 
.sprite-Page-BgTexture { background-position: -6100px 0; width: 102px; height: 102px; } 
.sprite-PostBullets { background-position: -6100px -152px; width: 4px; height: 9px; } 
.sprite-PostQuote { background-position: -6100px -211px; width: 37px; height: 33px; } 
.sprite-Sheet-c { background-position: -6100px -294px; width: 50px; height: 50px; } 
.sprite-Sheet-h { background-position: -6100px -394px; width: 50px; height: 22px; } 
.sprite-Sheet-s { background-position: -6100px -466px; width: 22px; height: 22px; } 
.sprite-Sheet-v { background-position: -6100px -538px; width: 22px; height: 50px; } 
.sprite-edit { background-position: -6100px -638px; width: 20px; height: 20px; } 
.sprite-edit_unpublished { background-position: -6100px -708px; width: 20px; height: 20px; } 
.sprite-emailButton { background-position: -6100px -778px; width: 20px; height: 20px; } 
.sprite-livemarks { background-position: -6100px -848px; width: 30px; height: 32px; } 
.sprite-nav { background-position: -6100px -930px; width: 1086px; height: 23px; } 
.sprite-pdf_button { background-position: -6100px -1003px; width: 20px; height: 20px; } 
.sprite-printButton { background-position: -6100px -1073px; width: 15px; height: 12px; } 
.sprite-spacer { background-position: -6100px -1135px; width: 1px; height: 1px; } 
.sprite-subitem-bg { background-position: -6100px -1186px; width: 1px; height: 40px; }
Не забудьте добавить правило для ссылки на спрайт изображение. Например такое:
#container li {
   background: url(csg-4c02d3bed6106.png) no-repeat top left;
}

Подскажите как дальше действовать? Куда прописать #container li и как прописывать в таблице стилей?
Например есть код:
Код
body
{
	margin: 0 auto;
	padding: 0;
	background-color: #32250B;
	background-image: url('../images/Page-BgTexture.jpg');
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: top left;
}

Хочется немного оптимизировать но знаний мало...
Спасибо.
Записан
Я с мобильного, в основном...
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: CSS спрайт Как?
« Ответ #1 : 31.05.2010, 18:48:17 »
А подробней можно?
Не понял суть вопроса. В чем проблема?
Код
Код: css
#container li {
   background: url(csg-4c02d3bed6106.png) no-repeat top left;
}
Можете прописать в любое место CSS файла.
Записан
*

Mihanja80

  • Завсегдатай
  • 1918
  • 168 / 4
  • Всю жизнь учусь...
Re: CSS спрайт Как?
« Ответ #2 : 31.05.2010, 20:02:59 »
Как правильно заменить исходное изображение на спрайт?

Было:
Код
body
{
	margin: 0 auto;
	padding: 0;
	background-color: #32250B;
	background-image: url('../images/Page-BgTexture.jpg');
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: top left;
}

Надо сделать ТАК?
Код


#container li {
   background: url(csg-4c02d3bed6106.png) no-repeat top left;
}

body
{
	margin: 0 auto;
	padding: 0;
	background-color: #32250B;
	background-position: -6100px 0; width: 102px; height: 102px;
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: top left;
}


Так правильно? Нужно ли еще что-то дописывать?
Если не верно то покажите пример кода ка будет верно. Спасибо.

Получается в коде дважды background-position (top left; и позиция спрайта).... Как правильно?
« Последнее редактирование: 31.05.2010, 20:06:31 от Mihanja80 »
Записан
Я с мобильного, в основном...
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: CSS спрайт Как?
« Ответ #3 : 31.05.2010, 21:06:43 »
А спрайт для какого элемента применяется?
Так и не понял вопроса)
В чем проблема со спрайтом?
Записан
*

Mihanja80

  • Завсегдатай
  • 1918
  • 168 / 4
  • Всю жизнь учусь...
Re: CSS спрайт Как?
« Ответ #4 : 31.05.2010, 21:20:38 »
Спрайт применяется для шаблона сайта. Картинку сделал, код получил. Как теперь в CSS правильно подключить этот спрайт вместо картинок?
(то что получил в первом сообщении)

Код body взял из CSS шаблона для примера.

Я не знаю как исправить CSS что бы вместо отдельных ссылок на картинки background-image: url('../images/Page-BgTexture.jpg'); подключился этот спрайт.

Напишите пожалуйста пример?
Записан
Я с мобильного, в основном...
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: CSS спрайт Как?
« Ответ #5 : 31.05.2010, 21:57:13 »
Смысл спрайта в том, чтобы загрузить картинку 1 раз, а потом позиционировать ее, снижая этим запросы к сайту на загрузку кучи изображений

Вот так:
Код: css
background: url(csg-4c02d3bed6106.png) no-repeat top left;
картинка подгружается.

А так:
Код: css
background-position: -3050px -286px; width: 1086px; height: 150px;
она позиционируется.

Назначать картинку нужно тому элементу(там), которому(ым) будет применен этот спрайт.

Как пример:
Есть меню, реализованное с помощью списка.
У каждого пункта есть свой уникальный класс (item1, item2 и т.д.).
Чтобы применить к пунктам меню некий спрайт (скомпонованную картинку), в котором изображены все пункты меню картинками, мы назначаем на пункт меню (тег li) стиль с фоновой картинкой (0 0 = top left):
Код: css
#menu li{background: url(csg-4c02d3bed6106.png) no-repeat 0 0;}
Этот стиль распространится на все теги li в меню #menu.
При этом, у всех пунктов будет одна и та же часть изображения, который находится в левом/верхнем краю спрайта (из-за ориентации top left).

Теперь, чтобы распределить все изображения спрайта под соответствующий пункт меню, нам надо для каждого из пунктов спрайт (который является фоновым изображением) подвинуть на нужную величину.
К примеру, для второго пункта меню подвинем спрайт на 100 пикселей, чтобы для него показать нужную часть спрайта.
Код: css
#menu li.item2{background-position: 0 100px;}

И так можно пройтись по всем пунктам меню. Но в данном примере пункты меню должны иметь габариты, соответствующие своим частям спрайта, чтобы в каком-нибудь пункте меню не показалась часть изображения от другого меню.
При этом, для всех пунктов меню будет грузится только одна картинка.

Так же можно проделывать со многими элементами, компонуя их в спрайты и распределяя по нужным элементам, уменьшая количество запросов к сайту.
Записан
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Re: CSS спрайт Как?
« Ответ #6 : 31.05.2010, 22:20:38 »
Цитировать
...уменьшая количество запросов к сайту.
И добавляя геморрой на свою >|< О П У
imho такая техника только для высокопосещаемыхх ресурсов, где каждый байт(и даже бит) и запрос на счету
Записан
【Мегапак Virtuemart】:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

Mihanja80

  • Завсегдатай
  • 1918
  • 168 / 4
  • Всю жизнь учусь...
Re: CSS спрайт Как?
« Ответ #7 : 31.05.2010, 23:10:53 »
Провайдер достал, опять нет интернета... Пишу с телефона! Меня просто запутала подсказка :#container li {
   background: url(csg-4c02d3bed6106.png) no-repeat top left;
} которая вылезла на сайте после создания спрайта. Если правильно все понял то в каждом месте таблицы каскадных стилей нужно изменить ссылку и прописать позицию. Посмотрите правильно ли будет так: 


body
{background: url(csg-4c02d3bed6106.png) no-repeat top left;
 margin: 0 auto;
 padding: 0;
 background-color: #32250B;
 background-position: -6100px 0; width: 102px; height: 102px;
 background-repeat: repeat;
 background-attachment: scroll;
} извините за читабельность но лучше написать сложно. Там где была ссылка на картинку прописать загрузку спрайта и позицию: background: url(csg-4c02d3bed6106.png) no-repeat top left; background-position: -6100px 0; width: 102px; height: 102px; подставляя позицию из полученого списка. Так? А вот про проблемы интересно. Если большие сайты это используют то почему маленькие не могут? В чем проблемы? У меня только в шаблоне сайта 30 картинок, а если еще добавить 5 модулей с закруглемыми углами... То 30 человек сделают не мало запросов... Если есть известные проблемны этой технологии то поделитесь пожалуйста информацией. А можно загружать картинку что-то прописав в шаблоне? Так наверно еще лучше будет?
« Последнее редактирование: 31.05.2010, 23:25:43 от Mihanja80 »
Записан
Я с мобильного, в основном...
*

fedya

  • Захожу иногда
  • 463
  • 50 / 1
Re: CSS спрайт Как?
« Ответ #8 : 31.05.2010, 23:28:26 »
да нет никаких проблем...главное не переусердствовать...

вот спрайт от яндекса...в одном файле (при загрузке один запрос)....куча иконок...
а без спрайта было бы  30 29 запросов...

« Последнее редактирование: 31.05.2010, 23:31:33 от fedya »
Записан
Вместо того, чтобы доказывать истинность своих положений и опровергать аргументацию оппонента, демагог может обращаться к приёму ad hominem — критиковать не аргументы, а личность оппонента, пытаясь убедить зрителей, что оппонент — плохой, недостойный, не разбирающийся в вопросе, пристрастный или лицемерный человек.
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: CSS спрайт Как?
« Ответ #9 : 31.05.2010, 23:31:17 »
Ну тут мне сложно ответить.
Я так понимаю, что спрайт применяется ко внешнему виду всего сайта (тег body)?
При этом, задается width: 102px; height: 102px;
Просто я не вижу смысла делать спрайт под тег body, если это не какая-то отдельная страницы с небольшим блоком, роль которого выполняет тег body, по центру шириной и высотой 102 пикселя. Но тогда странно, что спрайт размером в -6100px.
Это, конечно, может специфика страницы и спрайта…
Но в целом, вроде, по коду все нормально, а глубже надо уже копать код страницы, ориентируясь на HTML и конечный результат.
Записан
*

Mihanja80

  • Завсегдатай
  • 1918
  • 168 / 4
  • Всю жизнь учусь...
Re: CSS спрайт Как?
« Ответ #10 : 01.06.2010, 00:43:23 »
так в коде background-repeat: repeat; сайт в профиле. Это фон на всю ширину экрана. Я сделал спрайт из всех картинок шаблона. Можно в шаблоне прописать загрузку спрайта? Как лучше? Если можно в шаблоне то как? Если интернет будет то завтра выложу картинку спрайта, там вертикальный градиент 102х1000рх, есть и 3000х10рх. От того и цифры позицырования большие...

« Последнее редактирование: 01.06.2010, 01:13:17 от Mihanja80 »
Записан
Я с мобильного, в основном...
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: CSS спрайт Как?
« Ответ #11 : 01.06.2010, 17:35:12 »
Думаю, что слишком уж фанатично вы подошли к этому делу.
Думаю, что нужно оптимизировать такое изображение, разбив на несколько спрайтов, если уж хочется их использовать.
И к чему все эти махинации со спрайтами? Ради оптимизации?
Решения в одну-две строки тут не дашь.
Чтобы качественно поработать над оптимизацией сайта, этим надо заниматься.
Записан
*

Mihanja80

  • Завсегдатай
  • 1918
  • 168 / 4
  • Всю жизнь учусь...
Re: CSS спрайт Как?
« Ответ #12 : 01.06.2010, 20:12:22 »
Цитата: gdX от 01.06.2010, 17:35:12
Думаю, что слишком уж фанатично вы подошли к этому делу.
Думаю, что нужно оптимизировать такое изображение, разбив на несколько спрайтов, если уж хочется их использовать.
И к чему все эти махинации со спрайтами? Ради оптимизации?

Цитата: fedya от 31.05.2010, 23:28:26
да нет никаких проблем...главное не переусердствовать...

вот спрайт от яндекса...в одном файле (при загрузке один запрос)....куча иконок...
а без спрайта было бы  30 29 запросов...



Ну так и пришел я к вам с просьбой, подскажите! Научите!

Зачем разбивать на несколько спрайтов? Чем это лучше чем один?
И никто так и не ответил Развернуто с моим примером...

Вот сегодня сам заметил ошибку:
body
{background: url(csg-4c02d3bed6106.png) no-repeat top left;
 margin: 0 auto;
 padding: 0;
 background-color: #32250B;
 background-position: -6100px 0; width: 102px; height: 102px;
 background-repeat: repeat;
 background-attachment: scroll;
}

Получается что в первой строке нужно убрать no-repeat?


Есть:
Код
.art-Block-tc, .art-Block-bc
{
	left: 5px;
	right: 5px;
	height: 10px;
	background-image: url('../images/Block-h.png');
}
.art-Block-cr, .art-Block-cl
{
	top: 5px;
	bottom: 5px;
	width: 10px;
	background-image: url('../images/Block-v.png');
}

Правильно ли будет так:
Код
.art-Block-tc, .art-Block-bc
{
	left: 5px;
	right: 5px;
	height: 10px;
	background: url(`../images/csg-4c02d3bed6106.png`) no-repeat top left;
        background-position: 0 -172px; width: 3000px; height: 10px;
}
.art-Block-cr, .art-Block-cl
{
	top: 5px;
	bottom: 5px;
	width: 10px;
	background: url(`../images/csg-4c02d3bed6106.png`) no-repeat top left;
        background-position: 0 -292px; width: 10px; height: 3000px;
}

Не получится ли с таким кодом что картинка подгружается дважды? Или все правильно написал?
background: url(`../images/csg-4c02d3bed6106.png`) Нужны ли здесь одинарные кавычки?

Спасибо что хоть частично объясняете.

как правильние?
background-image: url(`../images/csg-4c02d3bed6106.png`) no-repeat top left;
background: url(`../images/csg-4c02d3bed6106.png`) no-repeat top left;

 >:(
« Последнее редактирование: 01.06.2010, 20:40:56 от Mihanja80 »
Записан
Я с мобильного, в основном...
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: CSS спрайт Как?
« Ответ #13 : 01.06.2010, 20:42:48 »
Думаю, что скорее все background-repeat: repeat; лишний, так как спрайт не может иметь свойство повторения себя, как фоновой картинки.
background: url(`../images/csg-4c02d3bed6106.png`) Кавычки тут не обязательны.

На счет элементов, где применяется спрайт.
Для всех таких элементов должно быть прописано фоновое изображение, а также координаты его смещения иначе как же ему назначить то или иное место спрайта.
Прописывать позиционирование top left в указании фоновых изображений не нужно, лучше объединить его с позиционированием.

Т.е. такие строки:
Код: css
background: url(`../images/csg-4c02d3bed6106.png`) no-repeat top left;
background-position: 0 -292px;

заменяются на
Код: css
background: url(../images/csg-4c02d3bed6106.png) no-repeat 0 -292px;
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться