Приветствую всех пользователей/посетителей блога gtalk.kz. Сегодня я хочу поделиться с вами полезным разделом, открытый мой – css snippets (css сниппеты).
В данном разделе я буду собирать интересные и полезные коды css и html.
Что такое сниппеты и зачем они нужны вы можете прочитать на той же странице. Добавляйте ее в закладки, подписывайтесь на обновления. Будем добавлять самое полезное и интересное. И не только просто код, а также описание и руководства к ним или туториалы (сейчас так модно руководства называть ).
Сегодня новая интересная подборка. Из заголовка понятно, что я вам предлагаю бесплатные социальные иконки на ваш сайт. От самых простых до странных и интересных. Выбирайте то, что вам по нраву. Кстати, все ссылки ведут к авторам и в формате PSD.
Рекомендую прочитать лицензию распространения авторов иконок и кнопок.
Кстати, эти статьи, скорее всего, будут вам интересны:
Мы установили шаблон и увидели примерно следующее:
Теперь давайте сделаем так, чтобы наш шаблон был как на картинке или здесь
Что не хватает:
меню;
сайдбара с тремя модулями;
Модуль меню для 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 :
Заголовок поля – оставьте пустым (Если будем появляться надпись Искать, поставьте пробел)
Ширина поля – тут на вкус.
Кнопка поиска – Да
Позиция кнопки – справа
Изображение кнопки поиска – Да
Вот и все.
Сохранитесь и смотрите на свой сайт.
Для того, чтобы изображение лупы на поиске было по середине, добавьте в css файл:
.search_form .button {vertical-align: bottom;}
Не забудьте изменить свой файл templateDetails.xml в шаблоне. Мы это делали во втором уроке.
Можете запаковать все файлы и попробовать установить их
Надеюсь, у вас все получилось, если нет, спрашивайте в комментариях и не забудьте поделиться с друзьями.
Сейчас я покажу как заказать бесплатный хостинг или Id Host Free. Считайте, это инструкция по заказу бесплатного хостинга, а о том как оплатить услуги в idhost читаем здесь.
Сразу к делу.
Переходим на сайт компании и выбираем «Виртуальный хостинг → Специальный хостинг» .
Жмем «Купить».
Вы попадаете в раздел «Регистрация домена» . Для того чтобы зарегистрировать домен введите его название и нажмите «Поиск домена».
Если домен свободен, то он добавится в корзину и нажмите «Продолжить». Если не свободен, попробуйте еще раз.
Теперь введите свои данные, чтобы зарегистрироваться в системе и получить доступ к панели управления сайтом.
Кстати, программа помогает работать и немного автоматизирует рутинную работу.
Итак, для вас я собрал актуальные 72 ресурса, куда вы можете добавить свой сайт. На некоторые из них требуют регистрацию. Я их в конце списка расположил – последние 7 ресурсов + некоторые временно не работали (как они утверждают), поэтому не удивляйтесь, но таких парочку.
Если вы нашли ресурс, куда также можно добавить свою 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 Мб. Выгодна и мне и вам Так, что не стесняемся. Ссылку для своих рефералов ищите здесь
«Расшарить» папку для друзей/коллег, т.е. открыть общий доступ для них; Для своих посетителей я сделал такую – вот. Там подарочек
Пригласить друзей (твитнуть и отправить сообщение в facebook);
Установить мобильное приложение сервиса.
Следить за новостями компании, так как они часто делают подарки.
Мобильный Dropbox
Продвинутые пользователи (например, как я:)), используют и мобильное приложение для даного сервиса – ссылка Поддерживаемые устройства:
Android;
Iphone;
Ipad;
BlackBerry;
KindleFire.
Говорить можно много, но пока сам не пощупаешь, не поймешь, что есть что.
Раньше я постоянно, использовал флешки для того, чтобы переносить информацию для завершения ее дома. Теперь все изменилось, я больше не кипячуиспользую Dropbox.
В третьем уроке, мы научились устанавливать шаблон, разобрались в нескольких тонкостях и, я надеюсь, уловили, как приступать к созданию шаблонов 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>
Что-то новое? Что за 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" />
Добавьте ее до вывода текста в центральном блоке.
Вот и все, мы вывели все основные позиции. У нас получилось следующее:
Внимание! Не забудьте удалить прошлый шаблон, устанавливаемый во 2 уроке.
Установите наш шаблон и добавьте модуль в сайдбар. Для этого выберите необходимую позицию:
Создайте меню и соответствующий модуль меню. Для модуля выберите позицию topmenu. Создайте пару материалов и взгляните, что они выводятся.
На красоту не обращайте внимание. Вывод меню будет некрасив =) Главное, что вы можете выводить информацию через модули в админке Joomla. В следующем и заключающем (из основных) мы наведем порядок.
Внимание! Не копируйте код из статьи, для этого можете скачать файл в конце статьи.
Надеюсь, вам нравятся мои статьи. Если так, поделитесь с друзьями кнопками ниже.
Итак, продолжим учиться делать шаблоны для джумла. К сожалению, я пропадал. Но это связанно с личными обстоятельствами, не будем углубляться.
Для создания шаблона лучше использовать готовый html шаблон. Об этом я говорил ранее – Урок 1. Введение: структура шаблона. Шаблон простой, специально для начинающих.
Подробно рассматривать не будет. Тем, кто не знает, что и как. Идем и читаем мои бесплатные уроки по верстке html шаблона для начинающих. А также те, кто решил делать из PSD шаблона. Вначале сверстайте, а затем читайте дальше.
Распакуйте html шаблон. Назовите папку с нашим будущим шаблоном по его названию. Например, сейчас это – colour_green, я переименовал в jf_colour_green. Это и будет названием шаблона.
Давайте внесем изменения. Мы имеем:
Переименуйте папку style на css. Добавьте папку imagesи переместите туда все картинки. Откройте index.htmlи измените ссылку на стили:
Думаю, смысл этих двух глобальных переменных ясен. Запомните их, они из категории часто используемых и для запоминания.
Подправим 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 для модулей и контента;
Чтобы не пропустить новые статьи, подписывайтесь на обновления блога. Скоро выйдут еще. Если вам понравилась статья не забудьте поделиться с друзьями, нажимайте слева на право.
Приветствую уважаемые пользователи. Вот я и вернулся, при чем с очень радостной новостью. Рад вам сообщить о новом в конкурсе от известных монстров шаблонов и популярного форума веб-мастеров.
Из названия думаю понятно, что речь пойдет о статье на тему вордпресс. Именно так и есть!
Почему же я решил вам сообщить именно об этом конкурсе?! Читайте дальше – там халява
Условия конкурса:
– Все достаточно просто необходимо написать статью на тему: «Wordpress.Вот она CMS моей мечты».
– Опубликовать на своем сайте/блоге/на форуме webmasters.ru
– Сообщить организаторам о своей интересной статье и ждать одобрение.
Если вашу статью одобрят, то вы получаете гарантированный приз – шаблон WordPress от мирового бренда TemplatesMonsters.
Ограничений на статью по сути нету. Необходимо только:
– написать не менее 25000 символов
– добавить не менее 2 картинок
– добавить 2 ссылки
создать сайт шаблоны WordPress
А те, кто напишет на первые три места, получат:
Первое место: сертификат, $100, шаблон TM в подарок. Второе место: $70, шаблон TM в подарок. Третье место: $50, шаблон TM в подарок. Остальные места: Все остальные любой из шаблонов категории CMS WordPress в магазине TemplateMonster Russia в подарок + поддержка в техслужбу.
Такую рыбу такой подарок я не могу упустить (шаблон для верстальщика всегда пригодиться), поэтому уже продумываю новую статью. Чего и вам советую, так как конкурс не вечен, и продлиться до 15 сентября 2012 года.
Посмотреть список работ и отправить свою работу и почитать подробнее можно здесь.
Призываю всех к написанию, да бы проигравших не будет!!
Если вы знаете, как создавать файл templateDetails.xml для Joomla 1.5, то вам необходимо прочитать статью различия между шаблонами разных версий (как адаптировать шаблон joomla 1.5 под версию Joomla 2.5) и вы увидите небольшие различия.
А теперь новичкам и малоопытным джумлаводам.
Внимание! Название файла обязательно выглядит как:templateDetails.xml(именной такой регистр) Данный файл xml, поэтому любая мелкая опечатка может привести к ошибкам при установке шаблона.
В начале разберемся, что есть что в данном файле. Вот сам файл для joomla 2.5
Просто запомните, как и при создании html шаблона. Во второй строке определяем версию joomla (version=”2.5″), тип – шаблон ( type=”template”) и для чего шаблон – для сайта, а не административного раздела ( client=”site”).
Идем далее, для чего поля name, version, creationDate и author, показано на картинке.
Остальные поля не составить труда заполнить:
<authorEmail> – email автора
<authorUrl> – ссылка на автора
<copyright></copyright> – копирайты
<license> – по какой лицензии распространяется шаблон
<description> – описание шаблона. (можно использовать html и стили)
Раздел files определяет какие файлы расположены в корне шаблона.
Также можно добавить раздел для параметров шаблона (цвет, какие-нибудь фишки). Будем рассматривать это позже. Но знайте, что параметры для шаблона задаются тут.
Заполните основные моменты: автор, mail, дату и т.д. Остальное заполним в следующем уроке, после создания основных файлов.
Если для вас это оказалось сложным (xml), то существуют готовые решения. Например, XML Template Generator RE — генератор xml файлов для шаблонов joomla. Актуальность генератора не слежу. Можете поискать в интернете.
Я же рекомендую, посидеть и разобраться один раз. Чтобы дальнейшие уроки по созданию шаблона для джумла не были такими сложными. Даю, вам время на разбор полетов.
Надеюсь, вы разобрались в данном файле, так как он важен и часто многие ошибки идут от него.