SLogin - всплывающая форма авторизации.
Часто спрашивают можно ли стандартные поля формы входа Joomla вывести во всплывающем окне, ответ — да, можно, но для этого потребуется сделать ряд доработок. Для модификации используем шаблон вывода — compact.php
Для вывода формы авторизации в lightbox применяем тот же принцип, что и в статье — Вывод модуля «Login» во всплывающем окне, т.е. для вывода используем mootools.
Что делать если Bootstrap и jQuery не нужен в Joomla 3?
На днях столкнулся с проблемой, при верстке шаблона для Joomla 3. Я не использовал Bootstrap, а jQuery хотел подгружать с CDN Яндекса. При начальной верстке все шло гладко, но потом стал замечать, что в секцию <head начали залезать джумловские jQuery и Bootstrap. По подсказке коллег с JF я начал копать в сторону модулей и выявил этих лазутчиков. Они находятся в модулях и компонентов и прячутся за коротенькой строчкой:
JHtml::_('bootstrap.tooltip');Я нашел эту строчку в модуле mod_breadcrumbs.
Сделал свой шаблон модуля, закомментировав эту строку. И вроде все хорошо, но после установки JoomShopping-а, меня опять встречали эти «незванные гости». Полазив по файлам нашел подобную строчку в файле components/com_jshopping/lib/factory.php на 167 строке и опять закомментировал.
JHtml::_('bootstrap.framework');Правда в ситуации с модулем я переопределил шаблон, но как быть с JS пока не знаю. Возможно при обновлении (а у меня версия 4.1.0) файл перепишется. Так что если к вам лезут гости — ищем в модулях, компонентах строку: JHtml::_('bootstrap.
Bootstrap c CDN Yandex
Недавно зашел на JS хостинг Яндекса (CDN) и увидел там Bootstrap.
Естественно, т.к. мы делаем в основном сайты для русскоязычного населения, то есть в России, то нам удобно использовать эту CDN для наших проектов. Ведь скорость работы серверов яндекса в большинстве случаев быстрее, чем скорость работы, наших с вами хостингов. Я думаю вы все сами знаете про это, и про кэширование, поэтому пропущу этот шаг.
Итак, заходим на CDN Яндекса и видим там… только JS бутстрапа (на момент написания статьи они уже добавили CSS). Но я ж дотошный — и начал вручную в адресную строку вбивать остальные составляющие бутстрапа, в итоге там присутствуют все составляющие, кроме LESS. Тоесть там есть и 2 файла CSS и 2 файла PNG с белыми и черными иконками.
Кстати, на момент написания поста я вставил код бутстрапа 2.2.2… но зайдя на бутстрап, увидел, что там уже 2.3.0 — исправил в коде — все работает.
Косячим: Главная страница
Добрый день. В данном топике я хочу рассказать вам об основных «косяках» при создании главной страницы вашего сайта. А именно, хочу предостеречь вас от создания очередного унылого сайта, которых с каждым днем становится все больше и больше.
Почему именно главная страница — да потому, что это главная страница, стартовая, начальная. Вообщем откуда посетитель входит на ваш сайт. Есть исключения, когда посетитель пришел по ссылке с сайта или поисковой системы на конкретную страницу, но все-равно в большинстве случаев он перейдет на главную.
Шапка сайта
В шапке сайта укажите название вашего ресурса. Если название абстрактное, например
«Стуслов и сотоварищи», то постарайтесь написать небольшую аннотацию к названию вашего ресурса, например:
«Стуслов и сотоварищи»
Меховое ательеЭто сразу даст вашему посетителю понятие о том, чем занимается г-н Стуслов
Косячим: Изображения
Я обращаю внимание, что зачастую вебмастера и контент-менеджеры очень наплевательски относятся к изображениям на сайте. Это заключается в том, что они берут фотографию и вставляют ее на сайт в исходном варианте. Потом ставят ширину (или высоту или и то и другое) и всё. Фотография на сайте вроде небольшая по размеру, но «вес» значителен, что неблагоприятно сказывается на скорости загрузки страницы.
Попытаюсь поставить таких людей на путь истинный.
Для примера я взял одну из своих фотографий. Оригинальный размер: 2816 × 2112, размер файла 2.6 MB. Много, не правла-ли? Попробуем вставить ее на сайт вышеупомянутым «рукотазым» методом.
<img src="original_photo.jpg" width="640" height="480">Все нормально, фото небольшое, но весит так-же как и раньше — 2.6 MB. Этого доспускать нельзя. Открываем графический редактор и меняем размер фото, потом сохраняем как JPG.
Размер изображения 640x480, размер файла 603 kb.
Возможно вы обратили внимание, что эта картинка открылась не сразу. Это потому, что размер файла все-равно велик. Уменьшаем дальше
Косячим: Верстка текста.
Основные ошибки при верстке текста (контента) на сайте.
Несемантическая верстка
- Списки
Неверно:
- Пункт один;<br><br /> - Пункт два;<br><br /> - Пункт три.<br><br /> <br><br /> 1. Пункт один;<br><br /> 2. Пункт два;<br><br /> 3. Пункт три.
Верно:
- Пункт один;
- Пункт два;
- Пункт три.
- Пункт один;
- Пункт два;
- Пункт три.
- Параграфы
Неверно:
Параграф один. <br><br>
Параграф два.
Верно:
Параграф один.
<code><br />
Параграф два.
Неверно:
<code><span style="text-size: 24px;">Заголовок</span><br />Подзаголовок
<code><br />Подзаголовок
Верно:
Заголовок<code><br />Подзаголовок
<code><br />Подзаголовок
Встречаются и другие ошибки, но эти зачастили. Советую загуглить запрос «семантическая верстка». Там конечно рассказано про CSS, но все те правила нужно использовать и при верстке текстов. Основной смысл такой — если делаем спискок, то делает его тегом списка, если делаем заголовок, то тегом заголовка и т.д.
Перенос предлогов
на новую строчку
- Используем непереносимый пробел
Ошибочно:
В чащах юга жил бы цитрус? да, но фальшивый экземпляр!
Грамотно:
В&nbsр;чащах юга жил&nbsр;бы цитрус? да, но&nbsр;фальшивый экземпляр!
Для этого есть специальные утилиты, например «Реформатор»
Картинки без отступов
У любой картинки в тексте должен быть отступ, поэтому нам необходимо создать всего-лишь одно правило на CSS. Если блок с вашим контентом имеет id="content", то правило будет выглядеть так:
- Отступы у картинки
#content img {margin: 20px;}
Тег readmore в неположенном месте
Если вы поставите тег readmore в случайном месте, то все открытые до него теги будут закрыты тегами верстки, что в свою очередь на 99% перекосит весь дизайн сайта, особненно если вы используете div в верстке текста.
- Тег readmore
Ошибочно:
В чащах юга жил бы цитрус?
да, но фальшивый экземпляр!
Грамотно:
В чащах юга жил бы цитрус?
да, но фальшивый экземпляр!
Делайте верно, и оно будет красивым.
P.S. Скопировали — вставили текс из WORD — бросьте в себя камень, бейте себя по рукам, наймите здоровенного мужика с волосатыми руками, который будет стучать вам по голове, когда вы делаете это. Так делать нельзя ни в коем случае.
Обработка изображений или фантазии дизайнера
Недавно заказали верстку каталога недвижимости, ничего сложного, кроме одного момента — формирование превью изображений в категории, материале и модулях, т.к. в качестве каталога использовался FLEXIcontent, то описание сделаю именно для него, хотя для com_content схема действий будет аналогичная.
Для работы данного решения потребуется библиотека GD2, по этому рекомендую заранее узнать стоит она у хостера или нет.
Изначально у меня было три превью и по клику на первый итем нужно было выводить в модальном окне нормальное изображение, т.е. возможность обработки изображения, и приведения к требуемому виду, до загрузки на сайт невозможна, а т.к. фон неоднородный, то возможность наложить сверху другое изображение отсутствовала, следовательно средствами css нужный результат не получить (один способ есть, но решение сложное и не кроссбраузерное). В итоге после консультаций и раздумий (да-да, собрали целый консилиум из-за создания одной картинки ;) ) принято решение обрабатывать
Ликбез по созданию и расширению меню
1) Создание меню.
- Создаем меню через менеджер меню в панели администратора ( Крестик «Создать», заполняем все поля, «Сохранить»).
- Выбираем в списке созданное меню, жмем «Создать», из списка выбираем нужный пункт, пишем заголовок, псевдоним, сохраняем.
- Создаем еще несколько пунктов.
В панели администратора заходим в менеджер модулей ( Расширения => модули ), над списком модулей находим кнопку «Новый» ( Крестик ). На открывшейся странице находим пункт «Меню», жмем на него. Слева в верхней строчке пишем название модуля, оно же будет заголовком, выводящимся на странице. Варианты включить и выключить для отображения заголовка ( показать или скрыть его на странице сайта ), включить или отключить модуль. Выбыраем из списка позицию шаблона, в которой будет выведено меню (например «top» или «left»). Ниже: выбор группы пользователей, для которых показывать меню, дополнительные стили для меню.
Справа видим выпадающий список со всеми меню, выбираем по
Ликбез по CSS спрайтам
CSS спрайты — это вывод отдельных элементов единого изображения на веб — странице. То есть одна большая картинка, либо несколько разных, но объединенных в один файл рядом друг с другом. Зачастую подобным образом группируют множество различных иконок. Разработчики называют подобный файл мастер сеткой. В качестве примера возьмем одну картинку, из которой нам нужно вывести в разных частях страницы различные ее элементы. Как вариант, порезать ее на куски и определять каждую часть отдельно, 1 элемент — 1 отдельный файл. Впрочем еще несколько лет назад именно так все и делали. Простейший вариант по своей сути. Но данный метод имеет один существенный недостаток, а именно — количество HTTP запросов, которые отсылает сервер браузеру. Одна картинка — это один запрос. Чем их больше, тем дольше будет загружаться страница. Посему CSS спрайты в первую очередь служат для сокращения количества этих самых запросов.Выше на картинке вполне четко показан принцип работы CSS спрайтов если представлять
Иконки для сайта посредством Font Awesome
Font Awesome: бесплатный иконочный шрифт в стиле Twitter Bootstrap.
Каждому разработчику шаблонов периодически приходится сталкиваться с нудной работой над детализацией интерфейса создаваемого шаблона — иконками. Это могут быть, как иконки социальных сетей, так и интуитивная графика для обозначения времени создания материала, полей ввода логина и пароля, оформления кнопок визуального редактора и т.д. Сайт может содержать в себе несколько десятков подобных изображений. Которые нужно правильно оптимизировать, собрать в спрайт-сетку, затем вычислить положение каждого изображения сетки, затем спозиционировать его в качестве фонового изображения к каждому элементу. Зачастую эта кропотливая и нудная работа занимает больше времени, чем верстка всего шаблона в целом.
