Joomla


Урок 5. Как создать шаблон для Joomla 2.5: Готовый шаблон

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

Кто к нам только присоединился, начните читать с первого урока Введение: структура шаблона Джумла 2.5

Теперь к делу. Что мы имеем?

Мы установили шаблон и увидели примерно следующее:

Создание шаблона для Джумла 2.5

Теперь давайте сделаем так, чтобы наш шаблон был как на картинке или здесь

Как должен выглядить наш шаблон

Что не хватает:

  • меню;
  • сайдбара с тремя модулями;

Модуль меню для Joomla

Создайте меню, если его у вас нету. И переходите в  Менеджер модулей -> Создать модуль -> Модуль «Меню» .

Введите как на картинке:

Меню сайта joomla 2.5

Введите заголовок
Показать заголовок – Скрыть
Позиция – topmenu (именно эту позицию мы создали в 4 уроке)
Состояние – Опубликовано

Получаем такой ужас:

Как сделать шаблон Joomla 2.5

Берем себя в руки и не пугаемся. Возвращайтесь в «Менеджер модулей» и добавьте ID Menumenu (как на картинке)

Настройка модуля меню Joomla 2.5

Теперь все отлично. Переходим к модулям в сайдбаре.

Модули Joomla в сайдбаре

Для начала создайте 3 модуля:

  • Модуль «Материалы – Новости»
  • Модуль «Html-код»
  • Модуль «Поиск»

Настройка модуля «Материалы – Новости»

Настройте как на картинке:

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

Позиция – right (именно ее мы добавляли ранее в уроках);

В правой колонке «Основные параметры»
Показать заголовок – ДА
Заголовок как ссылка – Нет
Уровень заголовка – h4
Ссылка «Подробнее…» – Показать
Количество материалов – 3

*все параметры выбраны исходя из исходного шаблона

Настройка модуля «Html-код»

По мне так это самый удобный способ добавить ссылки. Создаем модуль «Html-код» и делаем список ссылок как на картинке и все.

Модуль html код

Модуль «Поиск»

Самое интересное оставил напоследок. :)

Необходимо подготовиться:

  • Картинку  search.png  переделать в  searchButton.gif  в папке images вашего шаблона;
  • Создать папку html с пустым  index.html  файлом в корне вашего шаблона;
  • Добавить в папку html шаблон mod_search (скачайте в конце статьи);

Если просто создать модуль, то будет следующее:

Настройка модуля Поиск

Давайте сделаем как в примере. Для этого создадим шаблон модуля «Поиск».

Мы уже подготовились, поэтому сразу будем править код файла  default.php :

В строку (у меня 13 строка):

<form action="<?php echo JRoute::_('index.php');?>" method="post">

Добавим класс search_form:

<form action="<?php echo JRoute::_('index.php');?>" method="post" class="search_form">

Заменим строку:

<div class="search<?php echo $moduleclass_sfx ?>">

На тег <p>

Не забудьте закрыть, т.е. поменять </div> на </p>.

Добавим класс search в строку (16):

<input name="searchword" id="mod-search-searchword" maxlength="'.$maxlength.'"  type="text" size="'.$width.'" value="'.$text.'"  onblur="if (this.value==\'\') this.value=\''.$text.'\';" onfocus="if (this.value==\''.$text.'\') this.value=\'\';" />';

Отлично с кодом все. Давайте настроим сам модуль:Настройка модуля последние новости джумла

Заголовок поля – оставьте пустым (Если будем появляться надпись Искать, поставьте пробел)
Ширина поля – тут на вкус.
Кнопка поиска – Да
Позиция кнопки – справа
Изображение кнопки поиска – Да
Вот и все.

Сохранитесь и смотрите на свой сайт.

Для того, чтобы изображение лупы на поиске было по середине, добавьте в css файл:

.search_form .button {vertical-align: bottom;}

Не забудьте изменить свой файл  templateDetails.xml  в шаблоне. Мы это делали во втором уроке.

Можете запаковать все файлы и попробовать установить их ;)

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

с/у УтБ

З.ы. кстати, моя ошибка (из прошлого урока) – замените в файле  index.php  ссылку на логотипе:

Вместо:

<a href="index.html">

Сделайте:

<a href="<?php echo $this->baseurl ?>">

Чтобы ссылка была на текущий домен.

Можете скачать уже готовый шаблон и разбираться:

Готовый шаблон jf_colour_green (1533)

Ipad может поцарапаться и если вам нужны чехлы для iPad 3 обращайтесь в интернет-магазин hotstore, большой выбор и качество.

Интересное видео: мужику дали 156 секунд в магазине и забрать все что хочет :)

Установка Joomla 3.0 на Денвер

В данной статье вы узнаете как устанавливать Joomla 3.0 на локальный сервер – Денвер. По сути, установка джумла разных версий от 1 до 3 схожа, основное отличие в внешнем оформлении.

Подготовка к установке Джумла

Что вы уже должны были сделать:

Сейчас пройдите денвер и создайте в папке home новую папку, например, site.kz (можете свое хоть site.loc) с вложенной папкой www.

Теперь разархивируйте joomla 3.0 в данную папку (www). У вас получится следующее:

Как установить joomla 3.0

Запустите Денвер и введите свой адрес сайта. У меня это site.kz

Если Денвер был уже запущен, то перезапустите его (Restart).

Установка Joomla 3.0

Теперь непосредственно сама установка Joomla.

Откройте браузер и введите адрес нашего сайта. У меня это site.kz. Видим такую картину:

Как установить joomla на денвер шаг 1

Конфигурация сайта.

Вводим данные:

  1. Название вашего сайта – обязательно
  2. Описание сайта (description) – необязательно
  3. Ваша электронная почта – обязательно
  4. Логин администратора – обязательно, по умолчанию admin, можно изменить
  5. Пароль администратора – обязательно
  6. Повторите пароль еще раз – обязательно
  7. Нажмите «Далее»

Конфигурация Базы данных.

Как установить джумла 3.0 на локальный сервер шаг 2

Первые две строчки Тип базы данных и «Имя сервера базы данны», как говорится, в 99 из 100 случаев не изменяем.

  1. Имя пользователя – root, не требует пароля;
  2. Пароль – не нужен если пользователь root;

Если вы хотите добавить пользователя и задать ему пароль, то для начала создайте «Нового пользователя БД» в phpmyadmin.

  1. Имя БД – придумайте имя для вашей базы данных, латинскими буквами;
  2. Префикс для таблиц – изменять необязательно.
  3. Жмем «Далее»

Действие с уже имеющимися таблицами (если вы устанавливаетев базу данных, где есть какие-то данные, то с ними (данными) можно) – переименовать или удалить!

Обзор

Как установить джумла 3.0 на локальный сервер шаг 3

Завершаем установку Joomla 3.0

  1. Установка Демо-данных – необязательно:
    1. Нет – сайт будет пустым, т.е. без статей;
    2. Остальные Демо-данные будут в выбранном стиле, например, Блог – в стиле блога
    3. Обзор – выберите «Да». И на ваш mail отправятся конфигурация сайта. (Рекомендую! Всегда думайте о безопасности и бекапе данных!)
    4. Нажмите «Установка»

Внизу «Обзора» вы можете посмотреть конфигурационные данные и рекомендуемые настройки сервера.

После завершения установки:

  1. удалите папку installation, нажав на оранжевую кнопку;
  2. Взгляните на полученный сайт и админку сайта.
Завершение установки joomla на денвер

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

Не стесняйтесь, задавайте вопросы в комментариях или на форуме о joomla.

с/у УтБ

конкурс от seocafe под интересным названием SEOCAFEstateinost

Не знаю как вам, а меня веселит этот кореец PSY :)

Руководство: Как установить шаблон или компонент на Joomla: 4 способа

Ранее в моих уроках, я учил вас делать самим шаблон для Joomla 2.5 . В данной статье для новичков, использующих joomla, я расскажу, как можно  установить тему или шаблон на cms несколькими способами.

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

Внимание! При установке шаблона убедитесь, что он совместим с данной версией шаблона!

Joomla 2.5 Установка шаблона

Я покажу, как поставить шаблон на joomla версии 2.5 (последняя версия на данный момент), но суть в общем одна. Данными способами можно установить не только шаблон, но и компоненты, модули и плагины джумла. Я буду показывать примеры на шаблонах. ;)

1 способ: автоматическая установка – Загрузить файл пакета:

У вас есть заархивированный шаблон на компьютере, назовем  Tt_tmp.zip 

    1. Войдите в панель управления сайтом по адресу: site.kz/administrator
    2. Пройдите в «Менеджер расширений»Как установить шаблон на Joomla 2.5
    1. В разделе «Загрузить файл пакета» выберите свой файл (Tt_tmp.zip) на компьютере и нажмите «Загрузить и установить»Как установить шаблон на Joomla 2.5
    2. Если шаблон установлен, то вы увидите надпись описывающую шаблон, либо просто не будет ошибок как на картинке:Как установить шаблон на Joomla 2.5

Возможные распространенные ошибки:

Не удалось найти XML-файл установки

JInstaller: :Install: Не удалось найти XML-файл установки

Ошибка «говорит», нам о том, что XML файл отсутствует и скорее всего, вы устанавливаете НЕ шаблон для joomla. Откройте свой архив, возможно, необходимо вначале разархивировать его и затем выбрать сам шаблон.

    1. Теперь перейдем в раздел «Менеджер шаблонов»Как установить шаблон на Joomla 2.5
    1. Найдите установленный шаблон и нажмите на серую звездочку справа, для того чтобы сделать шаблон по умолчанию для сайта.Как установить шаблон на Joomla 2.5
  1. Войдите на сайт и радуйтесь своему шаблону.

Возможные распространенные ошибки:

Некоторые страницы имеют другой шаблон: что делать?

Обратите внимание в разделе «Менеджер шаблонов» на зеленые галочки. Это значит, что данный шаблон назначен шаблоном для определенных страниц.

Как установить шаблон на Joomla 2.5

Решение: нажмите на шаблон и в разделе «Привязка к меню уберите галочки».
Как установить шаблон на Joomla 2.5

2 способ: установка в ручную – Установить из каталога.

  1. Загрузите свой шаблон в папку tmp вашего сайта на Joomla. Внимание НЕ архив, а папку с вашим шаблоном;
  2. Пройдите в «Менеджер расширений»;
  3. Введите название вашего шаблона (папки в tmp) в разделе «Установить из каталога» и нажмите «Установить»;Как установить шаблон на Joomla 2.5

Возможные ошибки:

Пожалуйста, укажите каталог пакета

Скорее всего, вы указали не папку, а например zip файл. Укажите папку, в которой уже распакован ваш архив.

3 способ: автоматическая установка – Установить из URL

  1. Вы нашли в интернете шаблон, скопируйте ссылку на скачивание шаблона, НЕ скачивайте шаблон;
  2. Войдите в «Менеджер расширений»;
  3. В разделе «Установить из URL» вставьте ссылку на скачивание шаблона;
  4. Нажмите кнопку «Установить»;

Возможные ошибки:

Неизвестный тип архива

Введите правильный url для скачки. Возможно кнопка на сайте «Скачать шаблон» ведет на другой сайт.

4 способ: «быдло способ».

  1. Разархивируйте свой шаблон и скопируйте в папку templates вашего сайта либо скопируйте архив, а затем разархивируйте в папку templates;
  2. Откройте раздел «Менеджер шаблонов»;
  3. Ваш шаблон должен появиться в списке;

Надеюсь, вам поможет данная информация. Повторять в каждом способе не стал, о том как поставить шаблон по умолчанию. (описано в 1 способе)

А вы каким способом пользуетесь? делимся :)

с/у УтБ

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

На десерт сегодня видео о том, как правильно упаковывать вещи в дорогу :) никогда не получалось))

Урок 4. Как создать шаблон для Joomla 2.5: добавления позиций для модулей

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

Сегодня я постараюсь объяснить как сделать, чтобы модули и компоненты джумла отображались на сайте.

Лиричное отступление: Позиции модулей

В начале, разделим шаблон по следующей схеме:

позиции модулей в joomla

Картинка побольше.(кликните на картинку)

Пару слов к картинке:

Логотип и слоган – будут просто текстом. (Обычно это позиция, либо данная опция в настройках к шаблону – реализуем в дополнительных уроках, так как это посложнее).

Модули  будут выводиться в сайдбаре и меню, т.е. добавим 2 позиции.

Копирайт – просто текст (поняв, как добавляется позиции, вы с легкостью можете и здесь ее разместить).

В общем, логическое разделение нашего html шаблона:

Joomla модули

Данный процесс занимает 1-2 минуты и должен возникать у вас в голове при просмотре html шаблона и учитывается при составлении технического задания к сайту.

Добавление позиции модулей

Позиция модуля в joomla добавляется с помощью переменной:

<jdoc:include type="modules" name="left">

Где:

type=”modules – тип переменной, т.е. мы вставляем модуль;

name=”left – имя позиции. Можно придумать любое, но существуют перечень, которыми обычно называют определенную позицию.

Отлично, вставляем позиции, как мы нарисовали на картинке. Получается следующее:

Вместо меню:


<ul id="menu">
 <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
 <li class="selected"><a href="index.html">Home</a></li>
 <li><a href="examples.html">Examples</a></li>
 <li><a href="page.html">A Page</a></li>
 <li><a href="another_page.html">Another Page</a></li>
 <li><a href="contact.html">Contact Us</a></li>
</ul>

Используем:

<jdoc:include type="modules" name="topmenu" />

Вместо сайдбара:

Исходный код

Вставляем новую позицию (назовем right):

<jdoc:include type="modules" name="right" style="xhtml" />

Что-то новое? Что за style=”xhtml” ? Читаем далее.

Стили вывода модулей Joomla

Как вы уже догадались style=”xhtml” – стиль модуля. Всего существует 5 основных стилей:

  • none – вывод содержимого модуля, без оформления и заголовка
  • table – вывод модуля в виде таблицы
  • horz – вывод модуля в теге <td> другой таблицы
  • xhtml – вывод модуля в теге “div” и заголовка модуля в теге “h3″
  • rounded – вывод модуля в 4-х “div”, в основном используется для вывода модуля с закругленными углами
  • outline – используется для отладочной информации

Интересное Подробнее о данных стилях модулей читайте в статье Стили вывода модулей.

В этой же статье написано о том, как оформить стиль каждого модуля. (например, стиль для модуля поиска, модуля авторизации и т.д.) Все это происходит в папке html куче файлов ней.  Именно благодаря им вывод материалов, категорий, контактов, модулей можно оформить по-своему. В статье выше описано как это делается. Но это уже для наведения красоты и соответствия исходному шаблону, а у нас задача другая – понять, как делать шаблоны.

Вывод содержимого сайта

В центральной части сайта нам необходимо выводить статьи/контент. Для данного вывода используется конструкция:

<jdoc:include type="component" />

Заменим ею центральную часть нашего шаблона:

Исходный код

Над контентом обычно выводится ошибки о неудачной авторизации, системные сообщения, которые выводятся так:

<jdoc:include type="message" />

Добавьте ее до вывода текста в центральном блоке.

Вот и все, мы вывели все основные позиции. У нас получилось следующее:


<?php
/**
 * Template for Joomla by talgautb
 * @author talgautb
 * @copyright Copyright (c) 2012, www.gtalk.kz
 * @license GNU GPL
 */
defined('_JEXEC') or die('Restricted access');
?><!DOCTYPE HTML>
<html>
<head>
 <jdoc:include type="head" />
 <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/style.css"/>
</head>

<body>
 <div id="main">
 <div id="header">
 <div id="logo">
 <div id="logo_text">
 <!--, allows you to change the colour of the text -->
 <h1><a href="index.html">colour<span class="logo_colour">green</span></a></h1>
 <h2>Simple. Contemporary. Website Template.</h2>
 </div>
 </div>
 <div id="menubar">
 <jdoc:include type="modules" name="topmenu" />
 </div>
 </div>

<div id="site_content">
 <div class="sidebar">
 <jdoc:include type="modules" name="right" style="xhtml" />
 </div>
 <div id="content">
 <jdoc:include type="component">
 </div>
 </div>
 <div id="content_footer"></div>
 <div id="footer">
 Copyright &copy; colour_green | <a href="http://validator.w3.org/check?uri=referer">HTML5</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://www.html5webtemplates.co.uk">design from HTML5webtemplates.co.uk</a>
 </div>
 </div>
</body>
</html>

Теперь осталось подкорректировать файл templateDetails.xml. Так как у нас появилось 2 позиции. Добавим следующее:


<positions>
 <position>topmenu</position>
 <position>right</position>
</positions>

Сохраняйте все файлы и архивируйте.

Внимание! Не забудьте удалить прошлый шаблон, устанавливаемый во 2 уроке.

Установите наш шаблон и добавьте модуль в сайдбар. Для этого выберите необходимую позицию:

позиции модуля Joomla 2.5

Создайте меню и соответствующий модуль меню. Для модуля выберите позицию topmenu. Создайте пару материалов и взгляните, что они выводятся.

На красоту не обращайте внимание. Вывод меню будет некрасив =) Главное, что вы можете выводить информацию через модули в админке Joomla. В следующем и заключающем (из основных) мы наведем порядок.

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

Надеюсь, вам нравятся мои статьи. Если так, поделитесь с друзьями кнопками ниже. ;)

Следующий урок 5

с/у УтБ

Скачать шаблон urok_4-joomla-template (1166)
__

Профессиональный технадзор за строительством. Качество и цена выполненной работы.

На десерт сегодня видео: собака, встречающего своего хозяина из армиии

Урок 3.Создание шаблона из html и установка на Joomla 2.5

Итак, продолжим учиться делать шаблоны для джумла. К  сожалению, я пропадал. Но это связанно с личными обстоятельствами, не будем углубляться. :)

Для создания шаблона лучше использовать готовый html шаблон. Об этом я говорил ранее – Урок 1. Введение: структура шаблона. Шаблон простой, специально для начинающих.

Для дальнейших действий, необходимы знания из второго урока- Создание файла templateDetails.xml, прочитайте и возвращайтесь.

Структура html шаблона.

Подробно рассматривать не будет. Тем, кто не знает, что и как. Идем и читаем мои бесплатные уроки по верстке html шаблона для начинающих. А также те, кто решил делать из PSD шаблона. Вначале сверстайте, а затем читайте дальше.

Распакуйте html шаблон. Назовите папку с нашим будущим шаблоном по его названию. Например, сейчас это – colour_green, я переименовал в jf_colour_green. Это и будет названием шаблона.

Давайте внесем изменения. Мы имеем:

шаблон joomla из html шаблона

Переименуйте папку style на css. Добавьте папку images и переместите туда все картинки. Откройте index.html и измените ссылку на стили:

<link rel="stylesheet" type="text/css" href="css/style.css" />

Теперь откройте style.css и измените ссылки на картинки:

url(“logo.png”) на url(“../images/logo.png”)

Обычно я использую функцию “Заменить все”: url(“ на url(“../images/.

Добавьте template_preview.png и template_thumbnail.png . Пока можете добавить любые картинки или скачать их в конце статьи.

Сюда же можете скопировать файл templateDetails.xml, созданный нами во втором уроке. И удалите все html страницы, кроме главной страницы.

Шаблон joomla из html шаблона.

Открываем в текстовом редакторе (у меня Notepad++) главную страницу html шаблона – index.html .

Начинаем сверху вниз редактировать. Html теги трогать не будем (улучшать), все зависит от того, как сверстали из PSD.

Внимание! Не забудьте переименовать index.html в index.php

Перед доктайпом добавим следующее:

<?php
 /**
 * Template for Joomla by talgautb
 * @author     talgautb
 * @copyright  Copyright (c) 2012, www.gtalk.kz
 * @license    GNU GPL
 */
 defined('_JEXEC') or die('Restricted access');
 ?>

C помощью данной части, мы указали свои копирайты и запретили прямой доступ к файлу index.php с помощью (запомните ее просто):

defined('_JEXEC') or die('Restricted access');

Теперь стоит удалить:

<title>colour_green</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />

Так как это выведет следующая переменная:

<jdoc:include type="head" />

Глобальные конфигурации выводятся так (title, meta теги).

Далее необходимо настроить ссылку на css стили:

<link rel="stylesheet" type="text/css" href="css/style.css" />

Делаем следующее:

<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/style.css" />

Где:

<?php echo $this->baseurl ?> – глобальная переменная Joomla, есть ссылка на ваш сайт;

<?php echo $this->template ?> – переменная – название вашего шаблона.

По сути, ссылка на стили выглядит (в исходном коде):

<link rel="stylesheet" type="text/css" href="http://site.kz/templates/ jf_colour_green/css/style.css" />

Так же изменяем картинки, если они есть (например):

<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" width="100" height="100" alt="" border="0" />

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

Подправим templateDetails.xml

Так как в предыдущем уроке вы разобрались с файлом templateDetails.xml, и теперь сможете сами сделать для текущего шаблона (по крайне мере, я надеюсь :smile: ).  Вот как данный файл должен выглядеть (будем еще вносить изменения):

<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>jf_colour_green</name>
<creationDate>1.08.2012</creationDate>
<author>www.gtalk.kz</author>
<authorEmail>gtalk.kz@gmail.com</authorEmail>
<authorUrl>http://www.gtalk.kz</authorUrl>
<copyright>Copyright 2012 - www.gtalk.kz</copyright>
<license>GNU General Public License</license>
<version>1.0.0</version>
<description>It is my fist joomla template. Thanks talgautb.</description>
<files>
<folder>css</folder>
<folder>images</folder>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
<filename>template_preview.png</filename>
<filename>templateDetails.xml</filename>
</files>
<positions>
</positions>
</extension>

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

Установка шаблона.

Для того чтобы установить наш шаблон его необходимо заархивировать. Делаем архивацию, лучше если в zip формате.

Внимание! Если у вас есть вопросы по поводу установки joomla, настройки и т.д. Спрашивайте на форуме Joomlaforum.kz

Открой сайт на joomla (рекомендую тестировать шаблоны на локальном хостинге, например, денвер). Откройте «Менеджер расширений» и установите наш шаблон.

jf_colour_green Joomla шаблон

Перейдите в «Менеджер шаблонов», выберите наш шаблон  по умолчанию. Откройте сайт. Та-да!

Пока это еще html, но:

  • данный шаблон устанавливается на joomla 2.5 без ошибок (проверьте еще раз если это не так, так как у меня все ок)
  • взгляните на исходный код сайта (ctrl + U). Обратите внимание на то, что между тегами <head></head>

Что предстоит сделать:

  • добавления позиции для модулей;
  • вывод контента;
  • правка css для модулей и контента;

Чтобы не пропустить новые статьи, подписывайтесь на обновления блога. Скоро выйдут еще. Если вам понравилась статья не забудьте поделиться с друзьями, нажимайте слева на право. ;)

Следующий урок 4

с/у УтБ

Друзья, если Вам необходимы жалюзи на пластиковые окна, то в Санкт-Петербурге обратите внимание на LDstyle http://ldstyle.ru/product/zhaljuzi-na-plastikovye-okna

Скачать шаблон:  jf_colour_green (1404)

Отличное новое видео от одной из моих любимых групп Linkin Park:

Joomla: до любви 10 сайтов

Приветствую, пользователей моего блога и любителей популярной CMS Joomla! Да, сегодня я написал статью для еще одного конкурса «Joomla: от любви до ненависти и обратно», и конечно, речь пойдет о системе управления сайтом – Joomla!

Почему я решил написать о данной cms?

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

Во-вторых, я начинал бесплатный курс по созданию шаблона для Joomla, поэтому тема мне близка.

В-третьих, я являюсь активным участником казахстанского форума пользователей Joomla CMS.

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

В-пятых, это простая и банальная халява. Каждому участнику будет подарен бесплатный шаблон Joomla от TemplateMonster.

Данная статья всем тем, кто пишет, говорит, что «Joomla г**но», «как можно на таком делать сайты», «джумла для начинающих», в общем тем, кто сидит на друпал других системах и изливает желчь.

Хочу заметить, что я видел как много красивых и крутых сайтов на джумла, также много УГ.

Давайте начнем обзор отличных решений, хороших идей и «прямых» рук.

Сайт, показывающий, что надо иметь фантазию и не использовать стандартные шаблоны Joomla.

сайт на joomla школа музыки

Один из популярных каналов в мире. Сайт канала в Греции отдал предпочтение Joomla 1.5. Отличный медиа шаблон – яркий с множеством позиций для модулей и слайдеров.

сайт на Joomla mtv греции

Могу только добавить, что отличная группа с хорошими песнями. Обязательно послушайте их песни, и делайте сайты для музыкантов ссылаясь на них. ;)

сайты на Joomla: сайт Gorillaz

Обычный сайт футбольной команды с помощью Joomla 1.5 и компонента K2. Использовано множество модулей для вывода статистики, таблиц и т.д.

официальный сайт вильяреал

Знаете ли Вы официальный сайт самого посещаемого сооружения в мире? Можете взглянуть на сайт Эйфелевой башни. Как же высоко джумла забралась )) Символ Франци, теперь символ хорошего повода сделать сайт на джумла для достопримечательностей вашего города.

Официальный сайт эйфелева башня на joomla

ihop сайт на джумла

Просто красивый сайт американского ресторана. Еще один пример хорошего шаблона, с продуманным фоном.

Сайт с каталогом и пред заказом автотехники.  Просто, ничего лишнего. Подробный каталог товаров фирмы – все чтобы продвинуть фирму и увеличить продажи.

linux.com сайт о linux на joomla

Сайт на joomla, который доказывает, что система способна выдерживать любые нагрузки. Символично, что операционную систему Linux в интернете представляет Joomla – опен сорс. :)

Посещаемый онлайн ресурс в буржунете. А в рунете чаще используют вордпресс, смотрим и учимся ))

the hill сайт газеты на джумле

Наверное, самый мощный и посещаемый сайт на Joomla, PageRank которого достигал 10! Именно сюда должны стягиваться все любители системы J!

joomla.org

Вот собственно и все. Все зависит от вас. Делайте красивые шаблоны, а лучше покупайте их, и в бой!

Не забудьте поделиться с друзьями и поддержать меня в конкурсе!

с/у УтБ

UPD: Конкурс завершился. К сожалению, я не победил. Но зато получу бесплатно joomla шаблон от TM ;) комментарии закрываю

Урок 2. Как сделать шаблон для Joomla 2.5: создание файла templateDetails.xml

Итак, продолжаем уроки по шаблонам joomla. В предыдущем уроке мы ознакомились со структурой , и я немного рассказал о шаблонах joomla. Теперь давайте создадим важный файл templateDetails.xml для Joomla 2.5.

Если вы знаете, как создавать файл templateDetails.xml для Joomla 1.5, то вам необходимо прочитать статью различия между шаблонами разных версий (как адаптировать шаблон joomla 1.5 под версию Joomla 2.5) и вы увидите небольшие различия.

А теперь новичкам и малоопытным джумлаводам.

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

В начале разберемся, что есть что в данном файле. Вот сам файл для joomla 2.5

<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>Template name</name>
<creationDate>10.07.2012</creationDate>
<author>talgautb</author>
<authorEmail>mail@mail.kz</authorEmail>
<authorUrl>http://www.site.kz</authorUrl>
<copyright>Copyright 2012 </copyright>
<license>GNU General Public License</license>
<version>1.0.0</version>
<description> DESCRIPTION</description>
<files>
<folder>css</folder>
<folder>images</folder>
<folder>html</folder>
…
<filename>index.php</filename>
<filename>favicon.ico</filename>
<filename>templateDetails.xml</filename>
</files>
<positions>
<position>search</position>
…
<position>footer</position>
</positions>
<languages folder="language">
<language tag="en-GB">en-GB/en-GB.tpl_template_name.ini</language>
</languages>
</extension>

Многоточие я поставил, так как там может быть множество подобных строк.

Итак, начнем с доктайпа xml файла и «шапки»:

<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">

Просто запомните, как и при создании html шаблона. Во второй строке определяем версию joomla (version=”2.5″), тип – шаблон ( type=”template”) и для чего шаблон – для сайта, а не административного раздела ( client=”site”).

Идем далее, для чего поля name, version, creationDate и author, показано на картинке.

как сделать шаблон для joomla 2.5 бесплатные уроки

Остальные поля не составить труда заполнить:

<authorEmail> – email автора

<authorUrl> – ссылка на автора

<copyright></copyright> – копирайты

<license> – по какой лицензии распространяется шаблон

<description> – описание шаблона. (можно использовать html и стили)

Раздел files определяет какие файлы расположены в корне шаблона.

<files>
<folder>css</folder>
<folder>images</folder>
<folder>html</folder>
<filename>index.php</filename>
<filename>favicon.ico</filename>
<filename>templateDetails.xml</filename>
</files>

При этом

<folder>css</folder> это папка

<filename>index.php</filename> это файл

В новой версии joomla не нужно описывать все файлы, идущие в шаблоне.

Теперь раздел position.

В данном разделе необходимо вписать все существующие позиции модулей.

<positions>
<position>search</position>
<position>footer</position>
</positions>

В последнем разделе как видно из названия расположены языки для шаблона. С помощью данного раздела можно будет создавать мультиязычные шаблоны.

<languages folder="language">
<language tag="en-GB">en-GB/en-GB.tpl_template_name.ini</language>
</languages>

Также можно добавить раздел для параметров шаблона (цвет, какие-нибудь фишки). Будем рассматривать это позже. Но знайте, что параметры для шаблона задаются тут.

Заполните основные моменты: автор, mail, дату и т.д. Остальное заполним в следующем уроке, после создания основных файлов.

Если для вас это оказалось сложным (xml), то существуют готовые решения. Например, XML Template Generator RE — генератор xml файлов для шаблонов joomla. Актуальность генератора не слежу. Можете поискать в интернете.

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

Надеюсь, вы разобрались в данном файле, так как он важен и часто многие ошибки идут от него.

Следующий 3 урок

с/у УтБ

Сервис ремонта Ipad Apple – надежное качество и приемлемая цена.

На десерт сегодня другая команда КВН “Казахи” со своим видеоклипом:

Урок 1. Создание шаблона для Joomla 2.5. Введение: структура шаблона

Приветствую всех, любителей создавать сайты самостоятельно. Начинается новая серия полезных уроков. По названию вы поняли, что мы будем создавать шаблон для CMS Joomla версии 2.5, т.е. последней актуальной версии.

Серия статей написана специально для Казахстанского форума о Joomla.

Теперь по урокам создания шаблона: что необходимо знать?

Внимание! Обратите внимание на дату публикации статьи, и взгляните на актуальную версию Joomla!

В-первую, очередь мы будем использовать готовый html шаблон, из которого сделаем шаблон для джумла. (скачать искодники можно в конце статьи) Если вы хотитесвой скачайте в интернете по запросам: «скачать шаблон на html5», «бесплатный html5 шаблон» и т.д. Советую использовать html5. ;)

Также вы можете заказать дизайн и сверстать по мои урокам верстки сайта с нуля. А затем уже перейти к созданию непосредственно шаблона. Кстати, таким способом можно зарабатывать.  :neutral:

Хватит слов. Перейдем к структуре уроков. Серия уроков следующая:

  1. Введение. Что есть, что в шаблоне?
    Структура шаблона joomla 2.5
  2. Создание templateDetails.xml
  3. Создание шаблона из html и установка
  4. Добавление модулей
    Условия с позициями модулей
  5. Добавление css. Готовый шаблон.
  6. Фишки и плюшки
  7. Полезные ссылки.

Последние пункты будут добавлять по мере необходимости. В общем, в 5 уроков должны уложиться.

Внимание! В данной серии уроков (5-ти), вы узнаете только азы создания шаблона по Joomla. Вам также необходимы знания и понимания верстки сайтов.

Наш будущий шаблон (зеленый :-)  ) выглядеть будет так:

бесплатный html шаблон зеленый

Выбран этот html шаблон simplestyle_7 (посмотреть демо html шаблон):

  • Используется html 5 как нам и нужно;
  • Простота: обычный вывод статей с правым сайдбаром с оформленными модулями;
  • Есть простая типография (страница Example)
  • Лого и слоган можно сделать настраиваемыми.

С введением все. Подписывайтесь на обновления и будьте в курсе интересных материалов.

Структура шаблона Joomla 2.5

Если вы уже знакомы со структурой шаблона Joomla 1.5,  то можно пропустить данный урок.

Важно знать, что в joomla есть два вида шаблонов:

  • шаблон для сайта
  • шаблон для административной части

Шаблоны для админки находятся по пути:

   site.kz/administrator/templates/название_шаблона/

Шаблоны для сайта находятся по пути:

   site.kz/templates/название_шаблона/

Название шаблона регистр зависимое. Мы с вами рассмотрим структуру шаблона для сайта joomla.

Общая минимальная (базовая) структура выглядит следующим образом:

Структура шаблона joomla 2.5

css и images – это папки для отображения стилей и картинок соответственно. Их количество зависит от Вашей фантазии и дизайна сайта;

index.php основной файл шаблона – Главная страница сайта;

templateDetails.xml –  информационный файл – содержит данные о шаблоне, его авторе, всех файлов в шаблоне.

Но обычно структура простого шаблона такова.

Структура шаблона joomla 2.5

Папка html для настройки красоты и структуры модулей, компонентов.

Файл favicon.ico для иконки сайта.

template_preview.png  и template_thumbnail.png – превью и картинка шаблона, для отображения в «Менеджере шаблонов» в админке Joomla. В версии 1.5 была только одна картинка.

Это основные/базовые файлы шаблона joomla 2.5. Конечно, есть и другие, но сейчас в этом нет необходимости. После базового курса рассмотрим все более углубленно.

Если у вас какие-нибудь предложения по данным урокам, можете отписаться в комментариях, либо в специально созданной ветке в теме форума joomlaforum.kz.

Надеюсь, информация была полезной для вас. Не забываем делиться с друзьями и подписываться на блог. :-?

Следующий урок 2

Скачать Html шаблон

с/у УтБ

Если вы делаете ремонт, то не забудьте пластиковые окна москва – отличное решение!

На десерт сегодня популярное видео интернета: “Ты кто такой, давай до свидания”:

7 простых способов добавить социальные кнопки на сайт

Иногда прочитав интересный материал, Вы с удовольствием хотите поделиться с друзьями прочитанным, так? И когда на сайте отсутствуют социальные кнопки для комфортной отправки ценной информации – это плохо. Ко всему сказанному, надо добавить, что социальные сети очень неплохой источник трафика, если подходить с умом ;)

Ранее я уже рассказывал, как добавить социальные кнопки часть 1 и часть 2, в который мы использовали css спрайты. Сегодня же поговорим о сервисах и плагинах, облегчающие нам жизнь.

Пожалуй, начнем.

Social Media Widget

Social Media Widgetплагин wordpress имеющий 3 варианта размеров иконок  (16, 32, 64) социальных сетей, 4 анимации и 4 разных стиля.

social media widget социальные кнопки

Плагин поддерживает следующие соцсети:

  • Facebook
  • Google+
  • Twitter
  • MySpace
  • FriendFeed
  • Orkut
  • Hyves
  • LinkedIn
  • aSmallWorld
  • Flickr
  • Picasa Web Albums
  • YouTube
  • Skype
  • Digg
  • Reddit
  • Delicious
  • StumbleUpon
  • Tumblr
  • Buzz
  • Google Talk
  • Vimeo
  • Blogger
  • WordPress
  • Yelp
  • Last.fm
  • Pandora
  • UStream
  • IMDb
  • Hulu
  • Flixter
  • FourSquare
  • Meetup
  • Tungle.me
  • PlanCast
  • SlideShare
  • DeviantArt
  • iTunes Ping
  • Live365
  • Digital Tunes
  • Soundcloud
  • BandCamp
  • Etsy
  • Better Business Bureau
  • Merchant Circle
  • Ebay
  • Steam
  • RSS
  • E-mail

Думаю, заметен ориентир на западные сайты.

Easy buttons

Easy buttons еще один плагин социальных сетей для wordpress. Особенности:

  • 3 стиля кнопок
  • Выбор позиции Сверху (top) или снизу (bottom)
  • Социальные кнопки на выбор (некоторые можно скрыть)
  • Горизонтальная или вертикальная позиция
  • Атрибут Rel=«nofollow» в ссылках

Пример можно посмотреть на странице автора справа вверху плавающая панелька.

социальные кнопки на сайт

Share this

Share this – сервис публикации ваших статей. Имеется плагин для wordpress, joomla, друпал.

share this плагин социльных сетей wordpress

Addthis

Addthis -  сервис социальных кнопок для wordpress, joomla и других платформ. Чем то похоже с share this.

social buttons addthis социальные кнопки

Social Share Buttons for WordPress

Social Share Buttons for WordPress плагин социальные кнопки для wordpress имеет простые настройки, 9 соцсетей, 2 языка (русский и английский)

social share buttons кнопки социальных сетей добавить

Поделиться от Яндекс

Поделиться от Яндекскнопка поделиться с друзьями от Яндекс, включает в себя следующие социальные сети:

  • Я.ру
  • Вконтакте
  • Facebook
  • Twitter
  • Одноклассники
  • МойМир
  • Livejournal
  • Friendfeed
  • Мой круг

поделиться с друзьями кнопки соцсетей от яндекс

Share42.com

Share42.com – бесплатные сервис, который генерирует скрипт с выбранными Вами иконками социальных сетей и размерами. Очень

удобный и простой сервис в использовании: просто кликайте на необходимые иконки и размер. Инструкция по установке имеется на сайте. Советую если Вы хотите простой и удобный скрипт публикации ваших статей в социальных сетях.

share42.com сервис кнопок социальных сетей

Надеюсь, данные сервисы были Вам полезны. Используйте их с умом, обязательно добавляйте социальные кнопки. ;)

Всех девушек с наступающим 8 марта! Будьте также прекрасны как и весна!

УтБ поздравляет всех девушек с 8 марта

Постовой:Любите игры онлайн? Попробуйте casino онлайн.

На десерт сегодня презентация страны, в которой я живу  ;)

Loginza – социальное комментирование

Буквально недавно я обновил дизайн своего блога, поэтому некоторые вещи пришлось менять. Например, комментирование на блоге теперь осуществляется с помощью плагина loginza. Самые внимательные возможно помнят, что ранее на блоге была система из 3-х комментариев — вконтакте, фейсбука и стандартные комментарии вордпресса. Читать дальше