Приветствую всех пользователей/посетителей блога gtalk.kz. Сегодня я хочу поделиться с вами полезным разделом, открытый мой – css snippets (css сниппеты).

В данном разделе я буду собирать интересные и полезные коды css и html.

Что такое сниппеты и зачем они нужны вы можете прочитать на той же странице. Добавляйте ее в закладки, подписывайтесь на обновления. Будем добавлять самое полезное и интересное. И не только просто код, а также описание и руководства к ним или туториалы (сейчас так модно руководства называть ).

Кстати, подобную статью я уже писал. Можете почитать ее  –  20 невероятно полезных css сниппетов (только сейчас будет раздел)

До скорых встреч. Надеюсь теперь появляться чаще.

з.ы. многие хорошие вещи будем брать тут (англ.)

Сегодня новая интересная подборка. Из заголовка понятно, что я вам предлагаю бесплатные социальные иконки на ваш сайт. От самых простых до странных и интересных. Выбирайте то, что вам по нраву. Кстати, все ссылки ведут к авторам и в формате PSD.

Рекомендую прочитать лицензию распространения авторов иконок и кнопок.

Кстати, эти статьи, скорее всего, будут вам интересны:

Как добавить социальные кнопки на свой сайт Часть 1

Как добавить социальные кнопки на свой сайт Часть 2

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

Итак, приступим к обзору. Для лучшего чтения нажмите F11

1. Social Media Icons

2. Web 2.0rigami

Иконки в стиле оригами

3. Stitched Social Icon Set

4. Social media icons

5. Old Bottle Crowns Icon Set

Иконки социальных сетей в стиле крышек.

6. Mono DC – 30 Monochrome Social Icons

7. Nurture Social Icon Set

Природные социальные иконки.

8. Social Icons Made of Wood

Социальные кнопки из дерева.

9. DC Social Icons – Set of 20 Clean Icons

20 простых социальных иконок.

10. Cheers: A Free “Social” Icon Set

Иконки в виде стаканов.

11. HANDYCONS

12. Hand Drawn Social Icons

13. Social Media Bookmark Icon

14. Social Media Circles Icon Set

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Настройка модуля «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 ?>">

<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=\'\';" />';

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

<a href="index.html">

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

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

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

Это продолжение статьи Лучший пост об ID Host.

Сейчас я покажу как заказать бесплатный хостинг или Id Host Free. Считайте, это инструкция по заказу бесплатного хостинга, а о том как оплатить услуги в idhost читаем здесь.

Сразу к делу.

Переходим на сайт компании и выбираем  «Виртуальный хостинг → Специальный хостинг» .

Жмем «Купить».

Вы попадаете в раздел  «Регистрация домена» . Для того чтобы зарегистрировать домен введите его название и нажмите «Поиск домена».

Если домен свободен, то он добавится в корзину и нажмите «Продолжить». Если не свободен, попробуйте еще раз.

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

Если получите следующее, то все прошло успешно:

Отлично, теперь проверьте почту и можете войти в систему.

Дождитесь ответа на почту о предоставлении услуг и пользуйтесь на здоровье.

Вот так выглядит система по управлению хостингом.

После уведомления на почту можно пользоваться услугами. И вы можете сделать сайт какой захотите

Вот такой сайт у меня получился в итоге:

На сайт

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

с/у УтБ

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

Наверное, вы уже прочитали или знали, что для ускорения индексации сайта, можно как способ использовать rss агрегаторы и добавления rss ленты с помощью Rss adder.

Кстати, программа помогает работать и немного автоматизирует рутинную работу.

Итак, для вас я собрал актуальные 72 ресурса, куда вы можете добавить свой сайт. На некоторые из них требуют регистрацию. Я их в конце списка расположил – последние 7 ресурсов + некоторые временно не работали (как они утверждают), поэтому не удивляйтесь, но таких парочку.

Можно скачать txt файл в конце статьи.

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

А теперь маленький подарок. Все данные ресурсы я сделал в формате для RssAdder. Скачайте программу, добавьте файл мой RssAdder.ini и приступайте к добавлению своего ресурса.

Для удобства отредактируйте мои данные:

[BLOG]
URL=http://gtalk.kz
TITLE=Верстка, создание и продвижение сайтов
RSSURL=http://feeds.feedburner.com/gtalkkz
EMAIL=mail@mail.ru
KEYS=верстка сайтов, продвижение сайтов, создать сайт с нуля
DSC=Блог о том, как создать и начать продвижение сайта.

Введите свои данные и потом запускайте RssAdder.

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

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

с/у УтБ

___

Услугу ликвидация ооо необходимо доверять профессионалам своего дела.

Как же я скучаю по этому сериалу

Вот и я решил написать о великом и могучем … Dropbox’e. Думаю, уже многие знают, что это и как пользоваться данным сервисом. Учитывая это, я сделал интересный тур по дропбоксу на основе Dropbox tour.

Именно с данной презентации мы и начнем. Переходим на русский гид по Dropbox и возвращаемся назад. И так, что такое и суть его вы уже знаете. Надеюсь, вы уже нажали на кнопку скачать Dropbox на предыдущей странице, если нет, то тогда ссылка(реф). Что необходимо сделать:

• Зарегистрироваться на сайте;
• скачать приложение для вашей операционной системы;
• в появившуюся папу «Dropbox» можно положить все что угодно (ограничиваясь 300 Мб), и все тут же появится на сайте Dropbox.com. Вас ограничивает 2 Гигабайта памяти.

Вот и все. Теперь на работе произведете то же самое (кроме регистрации п.1) и будут вам «все, что угодно» из дома.

Как увеличить объем на дропбоксе?

Возможно, вы не знали, но бесплатно можно расширить свой объем памяти до 16 Гб. У меня сейчас (4,5 Гб). Добавить себе памяти можно следующими способами:

• Пригласить друга – 500 Мб/друг;
• Набрать рефералов – 500 Мб + 250 Мб зарегистрированному, т.е. регистрируясь по моей реферальной ссылке, вы получаете 2 Гб + 250 Мб. Выгодна и мне и вам Так, что не стесняемся. Ссылку для своих рефералов ищите здесь
• Выполнить мелкие задания:
  • Посмотреть Dropbox tour;
  • Установить программу сервиса на компьютер;
  • Загрузить фалы в папку;
  • Установить дропбокс на другом компьютере;
  • «Расшарить» папку для друзей/коллег, т.е. открыть общий доступ для них; Для своих посетителей я сделал такую – вот. Там подарочек
  • Пригласить друзей (твитнуть и отправить сообщение в facebook);
  • Установить  мобильное приложение сервиса.
• Следить за новостями компании, так как они часто делают подарки.

Мобильный Dropbox

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

• Android;
• Iphone;
• Ipad;
• BlackBerry;
• KindleFire.

Говорить можно много, но пока сам не пощупаешь, не поймешь, что есть что.

 Зарегистрироваться в Dropbox 

Удачного использования ресурса. Надеюсь, информация полезная.

UPD: Если вам интересно, то я сделал Сравнительную таблицу Dropbox и Яндекс Диска

с/у УтБ

__

Каждая заботливая мама должна знать, что умеет ребенок 11 месяцев.

Полезные советы первомамочкам! Сегодня на десерт песенка про мера города Камызяк:

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

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

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

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

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

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

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

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

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

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

Данный процесс занимает 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" />

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

<!-- insert your sidebar items here -->
 <h3>Latest News</h3>
 <h4>New Website Launched</h4>
 <h5>January 1st, 2010</h5>
 <p>2010 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
 <h4>New Website Launched</h4>
 <h5>January 1st, 2010</h5>
 <p>2010 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>

 <h3>Useful Links</h3>
 <ul>
 <li><a href="#">link 1</a></li>
 <li><a href="#">link 2</a></li>
 <li><a href="#">link 3</a></li>
 <li><a href="#">link 4</a></li>
 </ul>

 <h3>Search</h3>
 <form method="post" action="#" id="search_form">
 <p>
 <input type="text" name="search_field" value="Enter keywords....." />
 <input name="search" type="image" style="border: 0; margin: 0 0 -9px 5px;" src="style/search.png" alt="Search" title="Search" />
 </p>
 </form>

Вставляем новую позицию (назовем 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" />

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

<!-- insert the page content here -->
 <h1>Welcome to the colour_green template</h1>
 <p>This standards compliant, simple, fixed width website template is released as an 'open source' design (under a <a href="http://creativecommons.org/licenses/by/3.0">Creative Commons Attribution 3.0 Licence</a>), which means that you are free to download and use it for anything you want (including modifying and amending it). All I ask is that you leave the 'design from HTML5webtemplates.co.uk' link in the footer of the template, but other than that...</p>
 <p>This template is written entirely in <strong>HTML5</strong> and <strong>CSS</strong>, and can be validated using the links in the footer.</p>
 <p>You can view more free HTML5 web templates <a href="http://www.html5webtemplates.co.uk">here</a>.</p>
 <p>This template is a fully functional 5 page website, with an <a href="examples.html">examples</a> page that gives examples of all the styles available with this design.</p>

 <h2>Browser Compatibility</h2>
 <p>This template has been tested in the following browsers:</p>
 <ul>
 <li>Internet Explorer 8</li>
 <li>Internet Explorer 7</li>
 <li>FireFox 3.5</li>
 <li>Google Chrome 6</li>
 <li>Safari 4</li>
 </ul>

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

<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 уроке.

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

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

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

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

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

с/у УтБ

Скачать шаблон [Download not found]
__

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавьте 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 (рекомендую тестировать шаблоны на локальном хостинге, например, денвер). Откройте «Менеджер расширений» и установите наш шаблон.

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

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

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

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

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

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

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

с/у УтБ

Скачать шаблон:  [Download not found]

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

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

Из названия думаю понятно, что речь пойдет о статье на тему вордпресс. Именно так и есть!

Почему же я решил вам сообщить именно об этом конкурсе?! Читайте дальше – там халява

Условия конкурса:

– Все достаточно просто необходимо написать статью на тему: «Wordpress.Вот она CMS моей мечты».

– Опубликовать на своем сайте/блоге/на форуме webmasters.ru

– Сообщить организаторам о своей интересной статье и ждать одобрение.

Если вашу статью одобрят, то вы получаете гарантированный приз – шаблон WordPress от мирового бренда TemplatesMonsters.

Ограничений на статью по сути нету. Необходимо только:

– написать не менее 25000 символов

– добавить не менее 2 картинок

– добавить 2 ссылки

А те, кто напишет на первые три места, получат:

  Первое место: сертификат, $100, шаблон TM в подарок.
Второе место: $70, шаблон TM в подарок.
Третье место: $50, шаблон TM в подарок.
Остальные места: Все остальные любой из шаблонов категории CMS WordPress в магазине TemplateMonster Russia в подарок + поддержка в техслужбу.

Такую рыбу такой подарок я не могу упустить (шаблон для верстальщика всегда пригодиться), поэтому уже продумываю новую статью. Чего и вам советую, так как конкурс не вечен, и продлиться до 15 сентября 2012 года.

Посмотреть список работ и отправить свою работу и почитать подробнее можно здесь.

Призываю всех к написанию, да бы проигравших не будет!!

с/у УтБ

Не могу не добавить видео, давшее название конкурсу:

Итак, продолжаем уроки по шаблонам 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, показано на картинке.

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

<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 – надежное качество и приемлемая цена.

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