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.

Возможно вы обратили внимание, что эта картинка открылась не сразу. Это потому, что размер файла все-равно велик. Уменьшаем дальше

Косячим: Верстка текста.

Основные ошибки при верстке текста (контента) на сайте.

Несемантическая верстка

  • Списки

    Неверно:

     - Пункт один;&lt;br&gt;<br /> - Пункт два;&lt;br&gt;<br /> - Пункт три.&lt;br&gt;<br /> &lt;br&gt;<br /> 1. Пункт один;&lt;br&gt;<br /> 2. Пункт два;&lt;br&gt;<br /> 3. Пункт три. 

    Верно:

       
    • Пункт один;
    •  
    • Пункт два;
    •  
    • Пункт три.
    1. Пункт один;
    2.  
    3. Пункт два;
    4.  
    5. Пункт три.
  • Параграфы

    Неверно:

    Параграф один. <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.

Каждому разработчику шаблонов периодически приходится сталкиваться с нудной работой над детализацией интерфейса создаваемого шаблона — иконками. Это могут быть, как иконки социальных сетей, так и интуитивная графика для обозначения времени создания материала, полей ввода логина и пароля, оформления кнопок визуального редактора и т.д. Сайт может содержать в себе несколько десятков подобных изображений. Которые нужно правильно оптимизировать, собрать в спрайт-сетку, затем вычислить положение каждого изображения сетки, затем спозиционировать его в качестве фонового изображения к каждому элементу. Зачастую эта кропотливая и нудная работа занимает больше времени, чем верстка всего шаблона в целом.