Для вывода формы авторизации в lightbox применяем тот же принцип, что и в статье — Вывод модуля «Login» во всплывающем окне, т.е. для вывода используем mootools.

Начнем с того, что добавим ссылку, активирующую вызов lightbox:

<a class="modal" href="#joomla-login-form" rel="{size:{x:300,y:250}}"><span class="joomlaslogin">&nbsp;</span></a>

<div id="slogin-buttons" class="slogin-buttons <?php echo $moduleclass_sfx?>">
  <?php if (count($plugins)): ?>
    <?php foreach($plugins as $link): ?>
      <a href="<?php echo JRoute::_($link['link']);?>" class="sl_boxed"><span class="<?php echo $link['class'];?>">&nbsp;</span></a>
    <?php endforeach; ?>
  <?php endif; ?>
  <a class="modal" href="#joomla-login-form" rel="{size:{x:300,y:250}}"><span class="joomlaslogin">&nbsp;</span></a>
</div>

Т.к. скрипт открытия окон авторизации привязан к тегу <a>, то при клике на кнопку вызова бокса будет открываться и сайт, чтобы этого не происходило добавляем к тегу вызова окон авторизации класс sl_boxed, к которому и будет обращаться скрипт.

Теперь нам требуется доработать скрипт открытия окон авторизации — mod_slogin/media/slogin.js , заменив обращение по имени тега, на обращение по классу (строка 6):

var elements = block.getElementsByClassName('sl_boxed');

Далее оборачиваем форуму авторизации в блок вывода lightbox и добавляем вызов плагина:

<?php if ($params->get('show_login_form')): ?>
<?php JHTML::_('behavior.modal'); ?>
<div id="joomla-login-form">
  <form action="<?php echo JRoute::_('index.php', true, $params->get('usesecure')); ?>" method="post" id="login-form" >
    ...
  </form>
</div>
<?php endif; ?>

Дорабатываем css (mod_slogin/tmpl/compact/slogin.css):

#joomla-login-form { display: none } /* скрываем блок с формой входа */
.slogin-buttons .joomlaslogin { background-position: -203px 0; }  /* указываем смещение для фона с пиктограммами *

Остается доработать внешний вид формы и нарисовать иконку.

В качестве образца прикрепляю архив с работающим модулем.

mod_slogin

JHtml::_('bootstrap.tooltip');

Я нашел эту строчку в модуле mod_breadcrumbs.

Сделал свой шаблон модуля, закомментировав эту строку. И вроде все хорошо, но после установки JoomShopping-а, меня опять встречали эти «незванные гости». Полазив по файлам нашел подобную строчку в файле components/com_jshopping/lib/factory.php на 167 строке и опять закомментировал.

JHtml::_('bootstrap.framework');

Правда в ситуации с модулем я переопределил шаблон, но как быть с JS пока не знаю. Возможно при обновлении (а у меня версия 4.1.0) файл перепишется. Так что если к вам лезут гости — ищем в модулях, компонентах строку: JHtml::_('bootstrap.

Естественно, т.к. мы делаем в основном сайты для русскоязычного населения, то есть в России, то нам удобно использовать эту CDN для наших проектов. Ведь скорость работы серверов яндекса в большинстве случаев быстрее, чем скорость работы, наших с вами хостингов. Я думаю вы все сами знаете про это, и про кэширование, поэтому пропущу этот шаг.

Итак, заходим на CDN Яндекса и видим там… только JS бутстрапа (на момент написания статьи они уже добавили CSS). Но я ж дотошный — и начал вручную в адресную строку вбивать остальные составляющие бутстрапа, в итоге там присутствуют все составляющие, кроме LESS. Тоесть там есть и 2 файла CSS и 2 файла PNG с белыми и черными иконками.

Кстати, на момент написания поста я вставил код бутстрапа 2.2.2… но зайдя на бутстрап, увидел, что там уже 2.3.0 — исправил в коде — все работает.

<script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script>
 <script src="http://yandex.st/bootstrap/2.3.0/js/bootstrap.min.js"></script>
 <link rel="stylesheet" href="http://yandex.st/bootstrap/2.3.0/css/bootstrap.min.css">
 <link rel="stylesheet" href="http://yandex.st/bootstrap/2.3.0/css/bootstrap-responsive.min.css">

Да… еще забыл упомянуть про иконки — они полноценно работают.

Основные плюсы: при обновлении бутстрапа — просто меняем циферки, например сейчас обновил 2.2.2 на 2.3.0 и не надо качать новый бутстрап и перезаливать файлы. Если пользователь до вас уже был на подобном сайте с бутстрапом от яндекса — то он вообще ничего качать не будет — все в кэше.

Почему именно главная страница — да потому, что это главная страница, стартовая, начальная. Вообщем откуда посетитель входит на ваш сайт. Есть исключения, когда посетитель пришел по ссылке с сайта или поисковой системы на конкретную страницу, но все-равно в большинстве случаев он перейдет на главную.

Шапка сайта

В шапке сайта укажите название вашего ресурса. Если название абстрактное, например
«Стуслов и сотоварищи», то постарайтесь написать небольшую аннотацию к названию вашего ресурса, например:

«Стуслов и сотоварищи»

Меховое ателье

Это сразу даст вашему посетителю понятие о том, чем занимается г-н Стуслов и его друзья. Но этого недостаточно. Если данный коллектив работает в г.Пенза, а посетитель сайта живет в г. Сыктывкар, то не надо заставлять его просмотреть пару страниц (или более) сайта… и затем открыв страничку «контакты» — плюнуть и грязно выругаться на то, что оказывается, все что надо, но, блин, в другом городе. Не поедет же он за шапкой за тыщу триста километров.

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

Телефон в шапке — он нужен. Как удобно, когда я открыл страничку каталога с фетровой шляпой в синюю клеточку — посмотрел наверх, набрал телефонный номер и говорю «Алло… это Стуслов и сотоварищи?… да… да… я бы хотел у вас заказать фетровую шляпу… что?… а… артикул ФШ-033… дада ...». Если телефон указывать только в разделе «контакты», то прийдется сначала открывать эту страничку, потом возвращатся на предыдущую. А пользователь компьютера, который не разбирается в «этих ваших интернетах» не умеет смотреть «назад» и ему это обернется такой морокой, что возможно он превратится из потенциального покупателя в недовольного посетителя.

Поэтому телефон должен быть на главной и остальных страницах. Всегда на виду.

Поле поиска по сайту — желательно на главной в шапке справа, т.к. это привычно. Если сайт небольшой, то поиск не нужен.

Что еще нужно в шапке? — ничего! Тут я хочу акцентировать ваше внимание… ничего больше не надо, не стоит болеть этой толи «жадностью», толи «булемией». Если у вас стоит вопрос: «что еще впихнуть?» — то я на него уже ответил. У меня, при создании сайтов всегда стоит вопрос — «что еще выкинуть из шапки, что неважно?» А большинство клиентов хотят туда запихать слайдер, карту, скидки и акции, все контакты (2 стационарных телефона, 3 мобильных, скайп, аська, группа в вконтакте и твитерр с 5 последними твитами), 18 пунктов меню и герб с флагом нашей страны.

Так все-таки, что оставить из всего того, что я перечислил? У нас есть название фирмы (или логотип), описание рода деятельности. 1 телефоный номер. Город.… ну… правильно «Скидки и акции» можно оставить — остальное ни в коем случае не пихать туда. Клиент всегда неправ, а если прав, то вы скоро проснетесь и все станет на свои места.

Итог:

«Стуслов и сотоварищи»                    (48431)3-28-99 г.Пенза

Меховое ателье                          Доставка во все регионы России

Далее у нас, под шапкой, будет горизонтальное меню или контент. В данном примере у меня будет горизонтальное меню, а уже после него контент. В горизонтальном меню у меня будет всего 3-5 пунктов меню, это:

«Главная», «Каталог продукции», «Доставка и оплата», «Контактная информация»

Хватит. Зачастую в меню пихают столько пунктов, что посетитель не дошел глазами до контента, а уже прочитал 1000 символов. Больше он читать не будет, поверьте мне на слово. Будьте лаконичны. Дав выбор из данных мною 4 пунктов (а на самом деле 3-х, т.к. главная уже открыта) посетитель без сомнения выберет только тот раздел, который ему нужен.

Область контента.

Тут обычно все еще хуже, чем в захламленной шапке и 12-ти пунктовом меню. Что там мы видим, это абсолютно бесполезные вещи:

• Погоду
• Мировое время
• Курсы валют
• Калькулятор
• Облако тегов
• Случайное фото
• Анекдоты
• ТОП 10 товаров >> Самое покупаемое >> Выбор покупателей >> Новинки
• Форма авторизации
• Наши плюсы (ну не менее 10 обычно)

Это не нужно. На главной странице надо сразу «зацепить» человека, а не давать ему думать и выбирать. Как зацепить? Это зависит от рода деятельности. В нашем примере есть несколько вариантов, например:

3 шляпа в подарок (акция длится еще месяц)

Почему Д.Билан покупает шляпы только у нас? 3 причины.

Эти дамские шляпки продаются в единственном экзэмпляре ...

Новая коллекция шляп. Тренд сезона. (старая коллекция со скидкой 25%)

Вообщем все зависит от фантазии, но главное «зацепить». Почему я пишу про три шляпы, три причины — да потому что больше не надо. Это болезнь. Если вы хотите на главной расписать плюсы вашей компании, то напишите 3 плюса. Настоящих, что действительно является плюсами, относительно конкурентов. Я часто, общаясь с заказчиками (перед встречей всегда смотрел на их конкурентов) спрашивал о их плюсах — так вот вам секрет — ни у кого настоящих плюсов нет. Все продают одинаковые товары по одинаковым ценам, одинаково просирают сроки выполнения работ, одинаково косячат и так до бесконечности. Поэтому найдите только 3 настоящих плюса. Я всегда находил. Например, недавно у одной компании выяснил один плюс и сделал из него три. Плюс был в том, что экспортная продукция всегда есть на складе, и поэтому доставка делается в день заказа. Поэтому отсюда я выделил: У нас самая быстрая доставка. У нас самый быстрый возврат по гарантии, вам не прийдется ждать. У нас дешевле, т.к. транспортные расходы минимальны. Читал сайт конкурентов — стотыщмильон плюсов 1. Мы внимательны 2. Спросите — ответим 3. Качество 4. Гарантия 5. Цены 6. ну и тд. Когда узнал у своего клиента, про основной критерий при выборе фирмы-поставщика продукции, то оказалось, что 80% его клиентов больше всего интересует сроки поставки (средние сроки месяц, у него неделя). Цены — вторичный вопрос, т.к. разница небольшая, а ждать долго. Да вы наверно сами знаете, что обычно на вопрос «К какому сроку вы хотите, чтобы мы сделали работу» всегда один ответ «Вчера».

От я заболтался. Что далее. Позле «зацепки» по идее посетитель уже перейдет на целевую страницу, а уж там вы его как хотите привлекайте.

Ниже этих цеплялок я советую дать информацию о вашей фирме, роде ее деятельности. Как никак — но продвигать главную страницу сайта в ПС надо и поэтому в тот текст можете хоть бред напичканный ключевыми словами написать (только первый абзац напишите нормальным, скучным текстом аля «наша компания была образована ...»)… вообщем как из анекдота про сеошников «Зашли 2 сеошника в бар выпить после работы, алкоголь, развлечения, спиртные напитки, круглосуточно, рядом с метро». Почему так? Да потому что этот текст никто читать не будет. Вся эта ваша писанина для поисковиков, а люди питаются картинками и малюсенькими заголовками и коротенькими абзацами.

Вот собственно и все. Хотите еще? — Это болезнь. Вы всегда хотите больше, чем нужно.

P.S. Данная статья носит рекомендательный характер для сайтов-каталогов фирм, деятельность которых заключается в предоставлении услуг или продаже товаров населению. Рекомендации для сайтов-портфолио, знакомств, социального характера и т.д. отличаются от вышеупомянутых.

Попытаюсь поставить таких людей на путь истинный.

Для примера я взял одну из своих фотографий. Оригинальный размер: 2816 × 2112, размер файла 2.6 MB. Много, не правла-ли? Попробуем вставить ее на сайт вышеупомянутым «рукотазым» методом.

<img src="original_photo.jpg" width="640" height="480">

Все нормально, фото небольшое, но весит так-же как и раньше — 2.6 MB. Этого доспускать нельзя. Открываем графический редактор и меняем размер фото, потом сохраняем как JPG.

Размер изображения 640x480, размер файла 603 kb.

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

Размер изображения 640x480, размер файла 79 kb (качество JPG: 40).

Многие скажут, что это таже-самая фотография, но размер файла тут гораздо меньше, но я попробую еще уменьшить:

Размер изображения 640x480, размер файла 49 kb (качество JPG: 10).

Неважный результат, много артефактов, размер файла небольшой, а может попробовать формат GIF а не JPG:

Размер изображения 640x480, размер файла 288 kb (256 цветов).

Хороший результат, качество нормальное, но размер файла бОльший, нежели мы делали JPG с таким-же качеством изображения, попробую… нет, пробовать не буду, а просто вам покажу пример в GIF, чтобы размер файла был не выше 100 kB:

Размер изображения 640x480, размер файла 105 kb (16 цветов).

Плохо. Качество никудышное, и размер файла все-равно больше 100 kB, но хуже уже только нецветное фото.

Вывод: уменьшаем размер фоток, далее экспортируем их в формат JPG и выбираем удовлетворительное качестро при минимальном размере.

Вроде пора и закончить, но возьмем не фотографию, а табличку, схему и т.д.

Размер изображения 480x640, размер файла 126 kb.

Уменьшаем с потерей качества:

Размер изображения 480x640, размер файла 52 kb (качество JPG: 50).

Отлично. А можно еще меньше?

Размер изображения 480x640, размер файла 39 kb (качество JPG: 10).

Плохо, много артефактов, буквы размытые. Исходя из примера с цветным фото, GIF уже не стоит пробовать, но не в данном случае:

Размер изображения 480x640, размер файла 32 kb (256 цветов).

Отлично, это лучшее качество GIF 256 цветов, и при этом размер файла меньше чем самый плохой JPG. Пробуем уменьшить кол-во цветов:

Размер изображения 480x640, размер файла 25 kb (64 цвета).

Отлично. Пробуем еще уменьшить:

Размер изображения 480x640, размер файла 11 kb (2 цвета).

Ерунда. Предыдущий вариант идеален.

Вывод: уменьшаем размер схем, таблиц, графиков, далее экспортируем их в формат GIF и выбираем удовлетворительное качестро при минимальном размере.

Ниже таблица промежуточных данных оптимизации фотографий. Жирным я выделил оптимальные настройки для данных изображений.

Общий вывод:

• Фотографии надо уменьшать в размерах (пиксели). Руками в фотошопе или автоматически в специальной утилите.
• Фотографии надо сжимать. Сжимать до такой степени, чтобы они выглядели еще хорошо, но размер был меньше. По опыту скажу, автоматические утилиты — дрянь, т.к. на одном фото сжатие наполовину дает отличный результат, а на другой — плохой. Поэтому если вам важно — то работайте индивидуально с каждой фотографией.
• Используем разные форматы GIF для таблиц, схем и т.д., JPG — для фотографий. (про PNG тут не говорил, но их используют если нужна прозрачность)
• Где можно обойтись без картинки (видел я сканы прайс-листов) — обходимся без картинки
• Если картинка изначально хреновая — то выкидываем ее. Всякие «улучшатели» — не более чем развод.
• Ну и читать всякие умные статьи дядек и тетек про подобное.

В данном топике я рассказал вам об общих случаях. Бывают частные случаи, когда фотографии лучше сжать в GIF чем в JPG и наоборот со схемами, но это всего-лишь частные случаи.

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

• Списки
  

  Неверно:

   - Пункт один;&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. Пункт три.
• Параграфы
  

  Неверно:

  Параграф один. <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 нужный результат не получить (один способ есть, но решение сложное и не кроссбраузерное). В итоге после консультаций и раздумий (да-да, собрали целый консилиум из-за создания одной картинки ;) ) принято решение обрабатывать изображение с помощью GD2, а чтобы не грузить каждый раз сервер, то сохранять изображение в той же папке, что и превью сгенерированное плагином FLEXIcontent, но с добавлением суффикса к изображению, а при загрузке проверять, есть нужное превью или нет, если есть, то грузим превью, если нету, то создаем его и загружаем.

Перейдем непосредственно к решению (field26 — поле типа image, в котором хранится первое выводимое превью):

  <?php
  $field26 = explode('src="', $item->fields['field26']->display);
  $field26_img = explode('" alt', $field26[1]);
  $field26_img_src = substr_replace($field26_img[0],"-home.png",-4);

  if (file_exists($field26_img_src)) {
  echo $field26[0].'src="'.$field26_img_src.'" alt'.$field26_img[1];
  } else {

    $res = imagecreatetruecolor(240,165);
    $img = imagecreatefromjpeg($field26_img[0]);
    $mask = imagecreatefrompng("templates/linkor/images/mask_small.png");

    imagecopy ($img,$mask,0,0,0,0,220,165);
    $color = imagecolorallocate($img,0,0,0);
    imagecolortransparent($img,$color);
    header('Content-Type: image/png');
    imagepng($img, $field26_img_src);
    imagedestroy($img);
    echo $field26[0].'src="'.$field26_img_src.'" alt'.$field26_img[1];
  }
  ?>

Если описывать в двух словах, то происходит наложение одноцветной маски на изображение, с последующим удалением пикселей определенного цвета, да решение тоже не идеальное, т.к. помимо маски могут быть удалены пиксели и с самого изображения, но оно кроссбраузерное и работает всегда, что и требовалось сделать, кроме того можно повторно наложить изображение на инвертированную маску, тогда пиксели на изображении можно вернуть обратно (вот пока писал понял где совершил недочет, полезно иногда мануалы писать ;) ).

Приведу образцы: исходного изображения, маску и результат обработки:

Кстати, проверку делать настоятельно рекомендую, т.к. GD2 создает нагрузку при обработке, а если каталог достаточно большой, то и нагрузка будет не маленькой.

Документация:

• Обработка изображений и GD (русский)
• Image Processing and GD (английский)

• Создаем меню через менеджер меню в панели администратора ( Крестик «Создать», заполняем все поля, «Сохранить»).
• Выбираем в списке  созданное меню, жмем «Создать», из списка выбираем нужный пункт, пишем заголовок, псевдоним, сохраняем.
• Создаем еще несколько пунктов.

В панели администратора заходим в менеджер модулей ( Расширения => модули ), над списком модулей находим кнопку «Новый» ( Крестик ). На открывшейся странице находим пункт «Меню», жмем на него. Слева в верхней строчке пишем название модуля, оно же будет заголовком, выводящимся на странице. Варианты включить и выключить для отображения заголовка ( показать или скрыть его на странице сайта ), включить или отключить модуль. Выбыраем из списка позицию шаблона, в которой будет выведено меню (например «top» или «left»). Ниже: выбор группы пользователей, для которых показывать меню, дополнительные стили для меню.

Справа видим выпадающий список со всеми меню, выбираем по названию созданное нами ранее. Ниже предоставляются варианты отображения, выбираем «Список». Можете поэкспериментировать с остальными вариантами. Разница в способах представления на уровне HTML разметки. Но чаще используется именно Список.Далее идут пункты «Начальный уровень» и «Последний уровень», «Всегда показывать подпункты» — это настройки уровней вложенности для пунктов меню, о них информация ниже. Расположение нового окна — параметры JavaScript — расположение всплывающего окна, например,

top=50,left=50,width=200,height=300

В дополнительных параметрах возможно указать интервал между пунктами горизонтального меню (показывать или нет), кэширование ( рекомендуется когда меню уже создано и отредактировано — кэширование позволяет оптимизировать работу сайта ). Ниже располагаются настройки:

• ID тега меню — CSS-идентификатор (id), назначенный для тега UL верхнего уровня (необязательный параметр).
• CSS-суффикс класса меню (здесь можно задать особый класс CSS для визуальной организации меню).
• CSS-суффикс класса модуля (здесь задается особый класс CSS для визуальной организации модуля (содержимого меню))

Через них возможно привязывать к меню собственные CSS стили. Например указав для суффикса класса меню

Код:

_main

Код:

<ul class="menu_main">

Код:

<ul class="menu">

Максимальный уровень вложенности меню по умолчанию стоит 10. То есть меню может содержать максимум 10 уровней вложенных подменю. Уровни больше этого числа будут игнорироваться. Если не показываются подпункты некоторого уровня, то увеличьте это число. В других настройках возможно настроить:

• Показывать значки меню — включает отображение значков меню. Формат значков зависит от конкретного шаблона.
• Расположение значков меню — задает расположение значков меню справа или слева.
• Ссылка на значок меню — значок сам по себе является ссылкой.
• Развернутое меню — задает, должен ли пункт меню всегда быть развернут, даже если нажатие происходит по другим меню. Активировать родительский пункт - активная ссылка присваивается родительскому пункту при переходе по ссылке в дочернюю категорию.
• Постоянная подсветка активных пунктов — выделение активной ссылки.
• Изображение отступа — задает значки, которые будут отображаться в дереве меню уровнем ниже. Можно задать использование значков из шаблона, значки Joomla по умолчанию, не использовать вовсе или задать каждому уровню вложенности своё изображение.
• Изображение отступа 1-6 — задает индивидуальный значок каждому уровню иерархии.
• Разделитель — задает разделитель пунктов вертикального меню.
• Разделитель по концам — задает разделитель пунктов в горизонтальных меню.

Жмем «Сохранить». На странице сайта появляется соданное нами меню. Таким образом мы создали простое меню, без всяких эффектов.

2) Расширяем меню.

Расширить свойства меню можно путем CSS, JavaScript и PHP. Существует множество готовых решений, но редко они соответсвуют требованиям конкретного сайта без необходимости их «допиливать». Эти решения мы не будем разбирать в данной теме, а разложим варианты, наиболее часто задаваемых вопросов в разделе.

Простое горизонтальное меню.

 ul.menu {
	padding:<span>0</span>;
	margin:<span>0</span>;
 
}
 ul.menu li {
	float: left; /* выравниваем ссылки по горизонтали */
	list-style-type: none; /* убираем маркеры списка*/	
	padding-left:<span>10px</span>; /* внутренний отступ слева */	
	padding-right:<span>10px</span>; /* внутренний отступ справа */	
	padding-bottom:<span>0px</span>; /* внутренний отступ снизу */	
	padding-top:<span>0px</span>; /* внутренний отступ сверху */	
	background-image: url(../images/menu_sep<span>.gif</span>) no-repeat right top; /* разделитель */	
	position:relative; /* позиционируем в блоке родителя */	
}
 
 ul.menu a {
	display: block; /* делаем кликабельной всю кнопку */	
	height: 22px; /* высота кнопки*/	
	padding: 0 10px; /* внутренний отступ справа и слева */	
	overflow: hidden; /* запрещаем обтекание */	
	color: #7a7a7a; /* цвет ссылки */	
	font-family:Grotic; /* название шрифта */	
	font-style:bold; /* жирность шрифта */	
	font-size: 11px; /* размер шрифта */	
	text-decoration:none; /* убираем подчеркивание ссылки */	
	padding-top:<span>3px</span>; /* внутренний отступ сверху */
}
 ul.menu li.active a, ul.menu li a:hover {
	color:#E8A03D; /* цвет ссылки при наведении и активной ссылки */	
}

Так же можно вместо разделителя задать цвет кнопки, или присвоить ей графику.

Аналогично

background-image: url(../images/menu_sep.gif) no-repeat right top;

возможно присвоить к 

ul.menu a 

и

ul.menu li.active a, ul.menu li a:hover

Простое вертикальное меню делается аналогично, за исключением отсутствия в

ul.menu li элемента float: left;

Можем несколько расширить наше простое меню в визуальном плане при помощи средств стандартной для Joomla библиотеки mootools. Например добавить анимацию при наведении на ссылку

В поле между тэгами

<head> </head>

Вашего шаблона, добавляем

<script type="text/javascript">
window.addEvent('domready', function(){
    var el = $$('#my_menu li'),
	 color = el.getStyle('backgroundColor', '#333');
       $$('#my_menu li').set('margin', 0).addEvents({
	     mouseenter: function(){
		 this.morph({'margin-left': 5,'background-color': '#676768'});},
		 mouseleave: function(){
		 this.morph({margin: 0,backgroundColor: color});
	}});
});
</script>

В строках

'background-color': '#...'

Редактируем цвет кнопок.

Ниже в шаблоне, позицию для модуля меню оборачиваем блоком

<div class="my_menu"></div>

То есть выглядеть это будет примерно следующим образом

<div id="my_menu">
    <jdoc:include type="modules" name="leftmenu" />
</div>

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

Создание выпадающего меню средствами CSS.

• В менемжере меню создаем новые пункты меню и присваиваем им родительский пункт.
• В настройках модуля меню Начальный уровень — 0, Последний уровень — 2 или более.

На странице сайта должны появиться дочерние пункты меню рядом с родительским.

В файл template.css шаблона добавляем строчки:

ul.menu {
	position: absolute;
	top: 78px;
	left: 172px;
	list-style-type: none;
	padding:<span>0</span>;
	margin:<span>0</span>;
 
}
 ul.menu li {
	float: left;
	list-style-type: none;
	padding-left:<span>10px</span>;
	padding-right:<span>10px</span>;
	padding-bottom:<span>0px</span>;
	padding-top:<span>0px</span>;
	background-image: url(../images/menu_sep<span>.gif</span>);
	background-position: right top;
	background-repeat: no-repeat;
	position:relative;
}
 
 ul.menu a {
	display: block;
	height: 22px;
	padding: 0 10px;
	overflow: hidden;
	color: #7a7a7a;
	font-family:Grotic;
	font-style:bold;
	font-size: 11px;
	text-transform: uppercase;
	text-decoration:none;
	padding-top:<span>3px</span>;
}
ul.menu li.active a, ul.menu li a:hover {
	color:#E8A03D;
}
ul.menu li a, ul.menu li.active ul li a  {
	color:#7a7a7a;
}
 
ul.menu li ul {
    display:none;
    position:absolute;
    top:<span>2em</span>;
    left:<span>0</span>;
    padding:<span>0px</span> 0px 7px;
    margin:<span>0px</span> 0px 7px;
    background-color:white;
    opacity:<span>0</span>.<span>75</span>;
}
ul.menu li:hover ul {
    display:block;
}
ul.menu li:hover ul li a{
    height:auto;
}

Вертикальное это меню или горизонтальное, сторону, в которой отображаются подпункты при наведении можно настроить в каскаде

ul.menu li ul

оперируя свойствами

  top:2em;
   left:0;
   padding:0px 0px 7px;
   margin:0px 0px 7px;

Из минусов данного метода можно выделить сложности с IE6 — не воспринимает :hover, лечится костылями на JS, Сложности с восприятием 4го и более уровней. То есть подобным методом корректно можно обработать вложениея лишь до 3го уровня включительно. Если нужно обработать больше вложений, рекомендую использовать средства JS.

Выпадающее меню на JS+CSS.

Создаем отдельный файл menu.js, в него заносим код:

window.addEvent('domready', function() {
 
var Element = $$('.moduletable_shop ul.menu li.parent').set({
    'events': {
        'mouseover': function(){ this.addClass('hilite') },
        'mouseleave': function(){ this.removeClass('hilite') }
    }
});
});

В CSS добавляем:

ul.menu li ul{
ul.menu li ul{
  display:block;
 
  z-index:<span>-2</span>;           /*Здесь прячем подпункты на нижние слои*/
  position:absolute;
  margin-left: 220px;  /*Отступ справа = ширина родительского пункта меню*/
  margin-top: -93px;   /*Отступ снизу = высота родительского пункта меню*/
 
 }
 ul.menu li.hilite ul{
   z-index:<span>100</span>;          /*Вот здесь класс hilite наш - выводим меню в верхние слои*/
 }

Оперируя свойствами

margin-left: 220px;
 margin-top: -93px;

добиваемся четкого отображения раскрывающихся категорий.

3) Устраняем недочеты.

В стандартном mod_mainmenu существуют несколько досадных недоработок.   Если на сайте используется несколько модулей меню на основе стандартного mod_mainmenu – мы получаем ошибку валидации – для каждого активного пункта меню UL LI создается id=«current» (в случае создания связанных меню, многоуровневых либо просто дублирование модуля) Лечится просто – в файле templates/шаблон/html/mod_mainmenu/default.php (что это такое и что делать если такого файла нет – объяснять не буду, читаем документацию по шаблонизации движка) находим строку примерно 71

$node->addAttribute('id', 'current');

и заменяем на

$node->addAttribute('id', 'current'.$id);

Теперь у нас к каждому current добавляется идентификатор itemid.

Для лучшей поисковой оптимизации к каждой ссылке на сайте рекомендуется добавлять атрибут title="" с описанием. В стандартном модуле его нет, но лечится весьма не сложно.

Копируем файл modules/mod_mainmenu/tmpl/default.php в папку шаблона, т.е. он должен размещаться по адресу templates/название_шаблона/html/mod_mainmenu/default.php

Открываем файл, находим строку

if (isset($path) && $node->attributes('id') == $path[0]) {

и перед ней вставляем код

   if ($node->name() == 'a') {
        $children = $node->children();
    foreach ($node->children() as $child)
    {
      if ($child->name() == 'span') {
                $node->addAttribute('title', $child->_data);
      }
    }
    }

Теперь у нас ссылки меню получают атрибут title="".

Код

<a href="http://december.com/html/4/element/div.html"><span><div</span></a> id="mushroom"><span></div></span>

Код

#mushroom{
    background: url(sprite<span>.gif</span>) no-repeat -36px 0px;
    height: 18px;
    width: 18px;
}

• Метод Николаса Галагера, cтилизация псевдо-элемента фоновым изображением:

Код

#first:before { 
	content: ""; 
	float: left; 
	width: 15px; 
	height: 15px; 
	margin: 4px 5px 0 0; 
	background: url(sprite<span>.png</span>) -15px 0; 
}

• Метод нового url()/clip, использование свойства content для вставки спрайта, подрезанного с помощью свойства clip:

Код

#second { 
	position: relative; 
	padding-left: 20px; 
	background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<img alt="" src="sprite.png">'+this.innerHTML); 
} 
 
#second:before, 
#second img { 
	content: url(sprite<span>.png</span>); 
	position: absolute; 
	top: 3px; 
	clip: rect(0 30px 15px 15px); 
	left: -15px;
	_left: -35px;
}

• Отображение при печати. В отличие от фоновых изображений, при печати они распечатаются в документе.
• Доступность. В отличие от фоновых изображений, они будут отображать в режиме high contrast или при контрастных CSS стилях.
• Работает в IE. Метод подходит для Internet Explorer 6 и 7.

Код

.more:after { 
	white-space:nowrap; 
	content: " <span>\00BB; /* » */
} 
.more { 
	white-space:nowrap; 
	background-image: expression(this.runtimeStyle.backgroundImage="</span>none",this.innerHTML = this.innerHTML+' »'); 
}

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

Работа с иконочными шрифтами технически напоминает работу с глифами. По сути это и есть глифы, но выполненные в едином современном стиле. Графические иконки сайта обычно выполнены в растровых форматах (.png, .gif, .jpg), которые сами по себе ограничены. Достаточно сложно сменить размер крупного растрового изображения до миниатюрости иконки так, чтобы картинка не потеряла своего качества. Пикселизация, ступеньки градиентов, смешение пиксекей и т.д. — это все растровые форматы. Но здесь нам на помощь приходит векторная графика. Шрифты — это вектор в чистом виде. Который можно увеличивать и уменьшать бесконечно, но при этом векторная картинка не потеряет своего качества и цветов.

Font Awesome, разработанный Дэйвом Ганди (Dave Gandy), выполнен в стиле глифовTwitter Bootstrap. На сегодняшний день коллекция Awesome содержит уже 220 иконок и постоянно пополняется новыми элементами. Из особенностей:

• Скриншот и описание элементов в PDF.
• Пиктография, применяемая в web.
• Обратная совместимость с Twitter Bootstrap 2.0.
• Сообщество на Font Awesome GitHub project.
• Бесплатен для коммерческого использования.
• Управление через CSS.
• Поддержка IE 7+.
• Поддерживает мобильные браузеры.
• Неограниченная масштабируемость.

Шрифт содержит большинство часто используемых элементов: иконки социальных закладок, иконки для текстового редактора, видео/аудиоплейера, и конечно же, большой ассортимент иконок для веб-приложений. Выполненные в современном стиле и с применением новейших технологий, они могут значительно облегчить труд разработчику и сэкомить время. В виду своей простоты и доступности через CSS подходят к любому дизайну.

Работать с Font Awesome достаточно просто:

1. Качаем архив.
2. Копируем шрифты из архива в проект.
3. Добавляем в наш css @import «font-awesome.css»; и @import «font-awesome-ie7.css»;
4. Ниже:

@font-face {
    font-family: 'FontAwesome';
    src: url('../font/fontawesome-webfont.eot');
    src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    url('../font/fontawesome-webfont.woff') format('woff'),
    url('../font/fontawesome-webfont.ttf') format('truetype'),
    url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
    font-weight: normal;
    font-style: normal;
    }

Далее добавляем к нужным нам элементом путем добавления класса css.

<i class="icon-glass"></i>

Справится даже новичок. Все это дело работает на вполне обычных элементах CSS, которые мы  с Вами применяем практически в каждом проекте.

[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
.icon-glass:before { content: "\f000"; }

И далее мы можем изменять внешний вид иконок средствами форматирования текста CSS: color, font-size, font-style и т.д., в зависимости от стилевых требований шаблона.

Сейчас Font Awesome взят на вооружение в демо-шаблоне Gantry. Вполне можно быть, что данный иконочный шрифт в будущем будет использован JUI.