A- A A+

Марафет + фишки Joomla! 3

Модуль "Поиск"

РАСШИРЕНИЯ => МЕНЕДЖЕР МОДУЛЕЙ => СОЗДАТЬ => Поиск.

Марафет + фишки Joomla! 3

Даем заголовок и скрываем его. Выбираем позицию модуля - "position-0".

Марафет + фишки Joomla! 3

Включаем кнопку поиска и ниже вводим текст "Искать".

Марафет + фишки Joomla! 3

Смотрим форму поиска на сайте.

Марафет + фишки Joomla! 3

Модуль "Меню"

Теперь в менеджере модулей создаем модуль Меню.

Марафет + фишки Joomla! 3

Пишем понятное название меню ("Меню сверху"), так как модули со временем имеют свойство разрастаться, и тяжело будет ориентироваться в них. Определяем для верхнего меню позицию - "position-1".

Выбираем в строке Выбор меню - "Главное меню". Напротив Показывать подпункты меню отмечаем "Да".

Марафет + фишки Joomla! 3

После сохранения мы увидим, что меню вывелось в виде списка.

Марафет + фишки Joomla! 3

Это произошло потому, что модулю меню не заданы стили. Переходим на вкладку Дополнительные параметры и в строке Суффикс класса меню вписываем класс nav-pills. Обращаем внимание, что перед классом должен быть один пробел.

Марафет + фишки Joomla! 3

На сайте меню приобрело стильный вид.

Марафет + фишки Joomla! 3

Модуль "HTML-код"

Как видите под меню имеется красная линия. Для ее создания в менеджере модулей выбираем HTML-код.

Марафет + фишки Joomla! 3

Выбираем позицию такую же, как для модуля "Меню" (position-1). В редакторе модуля вставляем пустую красную таблицу с красным фоном.

Марафет + фишки Joomla! 3

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

Марафет + фишки Joomla! 3

Используя HTML-код создается баннер. В редакторе данного модуля необходимо вставить подготовленную заранее картинку и выбрать позицию.

Модуль "Навигатор сайта"

Данный модуль также называется как "Breadcrumbs" или "Хлебные крошки".

Марафет + фишки Joomla! 3

Как обычно задаем название и позицию, которая обычно устанавливается над статейными материалами (position-2).

Марафет + фишки Joomla! 3

Изображения и ссылки

Открываем материал в котором предварительно удалены все картинки. Переходим на вкладке Изображения и ссылки. Здесь указываются картинки для вступительного и полного текста материала.

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

Марафет + фишки Joomla! 3

На вкладке Изображения и ссылки справа расположены поля для вставок ссылок (А, В, С). Эти ссылки размещаются внизу статьи.

Марафет + фишки Joomla! 3

Рассмотрим вставку ссылок:

  • Ссылка А (В, С) - Указывается путь ссылки, при этом она может направлять на какой-нибудь ресурс или указывать адрес файла для скачивания.
  • Текст ссылки А (В, С) - Текст для ссылки.
  • Окно браузера - Выбираем "Открывать в новом окне", чтобы посетитель не уходил с вашего сайта.

Марафет + фишки Joomla! 3

Просмотр кода

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

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

В появившемся внизу браузера инструменте, мы видим выделенную строчку с адресом изображения. Над нею имеется блок с классом (div class="img-intro-left"), в котором расположена картинка.

Марафет + фишки Joomla! 3

Необходимо скопировать название указанного класса и найти файл с данным текстом. Открываем найденный файл (layout.css) и находим класс img-intro-left. Копируем этот класс вместе с другими классами, заключенными в блок комментария image float style.

Открываем файл templates.css шаблона Protostar и вставляем скопированные классы. Теперь обтекание картинок настроено правильно.

В следующем видео поменяем фавиконку.

 

Добавить комментарий

Защитный код Обновить

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

МОЙ TELEGRAM-КАНАЛ

ПОДПИСАТЬСЯ!


Перенос на хостинг

Перенос на хостинг

Бесплатный видео-курс по переносу готового сайта на одну из лучших хостинг-площадок РУнета.

Смотреть (бесплатно)

Бессмертный сайт

Бессмертный сайт

2 урока, 16 минут, и Ваш сайт - БЕССМЕРТНЫЙ!

Узнать подробности!