Как установить шаблон на uCoz. Пошаговая инструкция. Шаблоны и Скрипты для ucoz Как создать шаблоны для ucoz

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

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

Загрузка файла с шаблоном

Итак, загружаем архив с шаблоном:

Внутри архива находятся несколько вложенных папок:

• папка с изображениями (images, img);
• папка со скриптами (js);
• папка со стилями (css);
• папки с кодами Глобальных блоков, Информеров и т.д.

Также в архиве, как правило, присутствуют:

• инструкция.txt (ReadMe.txt) - настоятельно рекомендую обязательно прочитать;
• конструктор шаблонов.txt (tmpl.txt) - общий код каркаса;
• таблица стилей.txt (css.txt, style.txt) - файл с набором стилей;
• вид материалов.txt - содержит код вида материалов;
• и др. текстовые файлы с кодами, которые нужны для полной установки шаблона.

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

Делаем резервную копию текущего шаблона

Прежде чем приступить к установке нового шаблона рекомендую сделать бэкап текущего шаблона (на всякий случай)

Для этого - заходим в "Панель управления" своего сайта - "Дизайн" - "Резервное копирование шаблонов":

Нажимаем в правом верхнем углу кнопку "Создать резервную копию", после чего вы увидите появившийся резервный архив с вашим текущим шаблоном вида "1372338464.zip" с датой создания в скобках:

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

Пошаговая инструкция по установке шаблона на uCoz:

Установка шаблона делается согласно той инструкции, которая находится внутри вашего архива с шаблоном . Как я уже говорил в рамках этой статьи я буду показывать установку шаблона DesktopChaos .

Шаг-1.

Загружаем папку с изображениями images к себе на сервер. Это можно сделать двумя способами.

Первый способ - через FTP-клиент, например, FileZilla. Скачиваем и устанавливаем программу: http://filezilla.ru/get/ .

После этого, на главной странице Панели Управления жмем и задаем новый пароль:

После этого открываем ftp-менеджер FileZilla, в самом верху вводим Хост, Имя пользователя и Пароль, нажимаем "Быстрое соединение":

В левой части менеджера находим папку с картинками своего шаблона, жмем на ней правой кнопкой мышки, в появившемся меню нажимаем "Закачать на сервер". Готово. Теперь картинки находятся на нашем сервере.

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

Второй способ - загрузка изображений через Файловый менеджер . Переходим на главную страницу ПУ и нажимаем на "Файловый менеджер":

В право верхнем углу жмем Создать папку, вводим название images и нажимаем Enter:

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

Таким образом закачиваем на сервер все картинки из папки images.

Шаг-2.

Устанавливаем (если нужно) значение тега . Заходим в "ПУ (Панель Управления)" - "Настройки" - "Общие настройки" и в соответствующее поле вставляем код:

Шаг-3.

Устанавливаем Таблицу стилей. Для этого, находим в архиве файл "Таблица стилей.txt", открываем и копируем из него весь код (Ctrl+A, Ctrl+C) и вставляем его вместо старого кода в "ПУ" - "Дизайн" - "Управление дизайном (CSS)" - "Таблица стилей (CSS)":

Шаг-4.

Устанавливаем код из файла "Конструктор шаблонов". Открываем файл из архива "Конструктор шаблонов.txt", копируем все содержимое и вставляем его в "ПУ" - "Дизайн" - "Конструктор шаблонов", нажимаем кнопку "Создать шаблоны":

Шаг-5.

Теперь, аналогичным образом переносим содержимое файла "Вид материалов.txt" в вид материалов модулей: "Новости сайта", "Блог", "Каталог файлов", "Каталог статей". Идем в "ПУ" - "Дизайн" - "Управление дизайном (шаблоны)":

Код из файла "Вид комментраиев.txt” аналогично копируем в "Комментарии" - "Вид комментариев".

Шаг-6.

Создаем Глобальный блок. Переходим в "ПУ" - "Дизайн" - "Управление дизайном (шаблоны)" - "Глобальные блоки":

В правом верхнем углу жмем "Добавить блок", в появившемся поле пишем названия блока INFO и нажимаем "Добавить":

Находим в архиве папку "Глобальные блоки" и открываем файл "INFO.txt", копируем содержимое файла и вставляем в только что созданный глобальный блок INFO, сохраняем:

Шаг-7.

Устанавливаем необходимые значения:

• Название информера: Последние новости;
• Раздел: Новости сайта (либо "Блог", либо "Каталог файлов", либо "Каталог статей");
• Тип данных: Материалы;
• Способ сортировки: Дата добавления материала D;
• Количество материалов: 5;
• Количество колонок: 1.

Жмем "Создать".

После этого чуть ниже появляется блок с созданным нами информером, справа в нем видим иконки, выбираем первую из них "Управление дизайном информера" и в появившееся окно вставляем из папки "Информеры" содержимое файла "Последние новости", сохраняем:

Код данного информера $MYINF_1$ вставляем в созданный нами ранее глобальный блок INFO .

Информер для форума создается похожим образом.

На этом установка шаблона DesktopChaos завершена.

К стати, если вы так и не разобрались с установкой нового шаблона на свой сайт, то в официальном магазине uTemplate.pro можно заказать услугу по установке шаблона.

Вы создали собственный сайт на хостинге Ucoz.ru? Тогда вы должны ознакомиться с параметрами ведения сайта - с настройками. Все мы знаем, что оригинальность портала в первую очередь решает его внешний вид. Для изменения облика сайта вам понадобятся готовые схемы. Можно воспользоваться стандартными, но шаблон сайта Ucoz не станет вашей фишкой. А если вы хотите подчеркнуть уникальность своего узла, то необходимо создать собственный дизайн схемы. Но и для неискушенных разработкой стиля пользователей Ucoz есть шаблоны, предоставленные любителями или веб-мастерами. Располагаются они на сайтах или форумах, которые вы с легкостью отыщете в поисковиках всемирной сети.

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

Не всегда их создатели предусматривают тот факт, что пользователь не знает, как поменять шаблон на Ucoz, и не утруждают себя вложением в архив инструкции, потому и открываю вам сию тайну. Итак, мы устанавливаем шаблон на вашем сайте. Для начала нажмем на кнопочку «файловый менеджер». Файлы, которые были скачены ранее, понадобятся для наполнения корня сайта. То есть, файл, а точнее - папка, содержащая изображения для вашего веб-сайта, должна быть в файловом менеджере. Посмотрите содержание архива. Там должны присутствовать 2 блокнота с кодами и папка для файлового менеджера. «Конструктор шаблонов» - это то место, в которое нужно ввести один из кодов в блокноте. Другой же содержит CSS-код сайта (он обычно бывает расширения.css), которым следует заменить все содержимое с «Таблицы стилей CSS», находящейся в Админ. Панели.

Папка в файловом менеджере, в которую вы «зальете» папку с шаблоном, нужно назвать аналогично второй. Удобнее будет установить схему с помощью FTP, а главное - это сэкономит ваше время. Благодаря FTP можно поместить большое количество файлов. Если же ни один из представленных вариантов дизайнерских схем вас не устроит, то всегда можно создать индивидуальный шаблон. Кроме схем обычного типа существуют также вида DLE и PSD, которые вы можете установить в том случае, если вам понравится именно такой дизайн. Установить его будет немного сложнее.

На Ucoz PSD-формата? Изначально его нужно преобразовать и сверстать в HTML-схему. Для этого вам понадобятся две программы: PhotoShop и Dremweaver. Изменяем PhotoShop Document (PSD) в PhotoShop. Сверстать файл нужно будет в Dremweaver, для того, чтобы получить схему HTML. Подробности об этих операциях можно найти на сайтах, которые специализируются по этим темам. Далее нужно изменить текст вашего сайта с помощью Вы можете просто изменять текст, который предоставлен в шаблоне, на свой, так будет легче сориентироваться и немного вникнуть в обозначения, а также узнать, что некоторые коды содержат в себе еще один. Для более глубокого изучения можно обратиться в форум технической поддержки. Заполняем таблицу CSS, вводим код каркаса сайта и заполняем им файловый менеджер. И дизайн вашего сайта готов.

Теперь можно рассмотреть установку DLE-шаблона. Также грузим папку с картинками и CSS-кодом, и остальные. После открываем mailn.tpl с помощью блокнота. Копируем все, что вышло в блокноте, после чего вставляем в отдел редактирования страниц, находящийся в пункте «Страницы сайта». Затем заходим в быструю замену участков шаблона. Там, убираем {THEME} и оставляем пустое нижнее поле, а верхнее заполняем - {THEME}. Ну и, наконец, редактируете схему благодаря кодам.

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

Установка нестандартного шаблона

Лучший способ установить нестандартный шаблон, это воспользоваться инструкцией по установке, которая поставляется вместе с шаблоном. Если ее нет, то воспользуйтесь нашей универсальной инструкцией.

Установка шаблона состоит из нескольких шагов:

Загрузка файлов на сайт

Первым делом нужно загрузить на сайт файлы, которые поставляются с шаблоном. При этом важно соблюдать вложенность файлов в папки. Так, все изображения могут находиться в папке img , а скрипты - в js .

Чтобы создать папку, воспользуйтесь , кнопка «Добавить папку»:

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

Установка каркаса сайта

Позволяет сгенерировать однородную структуру для всех разделов сайта. Обычно он поставляется в.txt файлах и может иметь произвольное название ("Каркас.txt", "Конструктор шаблонов.txt" и т.д.).

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

Каркас сайта имеет свои уникальные переменные, которые помогут отличить его среди других файлов шаблона:

Попробуйте выполнить поиск строки или . Если они найдены в тексте, то скорее всего это файл каркаса.

Чтобы установить каркас, перейдите в раздел «Дизайн», в меню слева выберите пункт «Каркас», вставьте код из текстового файла, нажмите на кнопку «Установить» и подтвердите действие:

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

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

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

Шаблоны поставляются в текстовых файлах и для их размещения на сайте, нужно просто скопировать содержимое файла в редактор шаблона соответствующего модуля. Перейдите в раздел «Дизайн», в меню слева выберите пункт «Редактор». Найдите шаблон, код которого хотите добавить и скопируйте его в редактор. Сохраните изменения.

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

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

Настройка модулей и расширений

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

Ucoz предлагает 246 оригинальных дизайнов на выбор, но обычно выбирают из 10-20 особенно удачных, соответственно уже приглядевшихся и надоевших. А давно известно, что для того, чтобы осуществить успешное продвижение своего сайта, следует создать свой оригинальный и привлекательный дизайн сайта, к которым, разумеется, нельзя отнести шаблонный дизайн. Ну так меняем дизайн Ucoz Юкоз на свой или выбираем шаблоны для uCoz . Если сперва сложно сделать дизайн с нуля, предлагаю изменить уже существующий.

Заходите в редактор страниц, выбираете пункт "общие настройки”. Нажимаете напротив строки "Дизайн сайта:” – "выбрать дизайн” , открывается окно выбора дизайна. Выбираете тот дизайн Ucoz Юкоз , который вам наиболее приглянулся, устанавливаете на сайт и начинаете редактировать.

Для примера расскажу, как изменить картинку шапки сайта. Все графические изображение, используемые в дизайне, описаны в файле стилей style.css , либо в html-шаблоне страниц. Рассмотрим два варианта:

1. Картинки прописаны в CSS. В верхней панели выбираете "Дизайн” – "Управление дизайном (CSS)”. В окне ниже откроется собственно сам файл стилей. Находим в нем строчку вида: #header {background:url(‘/ee.jpg’) no-repeat;height:182px; ……} – это адрес вашей шапки сайта. (в разных шаблонах по разному, вам придется найти, какая картинка к чему относится)

2. Картинки прописаны в Html-шаблоне. Там же в верхней панели выбираете "Дизайн” – "Управление дизайном (шаблоны)”. В окне ниже выбираете "верхняя часть сайта”, ищете строчку вида: Опять же придется определить, какую именно картинку вы хотите поменять.

Чтобы узнать, какая именно картинка вам нужна, перейдите по адресу вида: "адрес вашего сайта/адрес картинки из шаблона” – откроется картинка, найдете нужную вам.

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

Аналогично поступаем со всеми картинками дизайна вашего сайта или создаем сразу новый дизайн для всей страницы и прикручиваем его к вашему сайту.

Замечание: если после этого вы смените шаблон сайта, выберете новый шаблон, то все ваши изменение в html и css кода, разумеется, пропадут.

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

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

Для начала нужно убедится, что конструктор активирован - это можно проверить, зайдя в Панель управления, Главная » Общие настройки. Если нужна опция активирована, переходим к настройке дизайна. Для этого нужно зайти в Панель управления, Управление дизайном » Конструктор шаблонов, и в при помощи подсказок оформить будущий каркас должным образом. Принцип создания каркасов прост - существующая структура страницы делится на определенные зоны по смыслу и назначению. Например, мой трехколоночный дизайн, разбитый на подобные зоны для создания каркаса, схематически будет выглядеть так:

Итак, как можно видеть на рисунке, каркас состоит из таких основных частей:
- в этом блоке я размещу верхнюю часть (шапку) сайта.
- здесь будет вся средняя часть сайта, в том числе левая и правая колонки и средняя часть, в которой будет отображаться основной контент. - здесь будет нижняя часть сайта - счетчики, копирайты и прочее. Отдельно бы хотелось остановится на описании кода
В использовании этого кода есть определенные ньюансы, которые необходимо знать. В частности, это связано с использованием модуля "Форум". В моем случае, если мне понадобится использовать этот модуль - моя структура каркаса предполагает, что модуль будет располагаться на всю ширину страницы, так как блоки container у меня включены в блок middle. При генерации шаблона для модуля "Форум" система смотрит, как расположен блок middle и всю область, которую он занимает, отводит под вывод форума. В случае если я вынесу код container правой колонки за границы блока middle - то форум будет занимать место левой и центральной колонки, а правая останется на месте. Если я вообще не использую код middle - то форум будет размещен в том же месте, где выводится остальной контент.

Результат: дизайн разбит на три больших части, каждая из которых имеет свое значение. Но - для того чтобы я мог управлять блоками и сгенерировать шаблоны для всех модулей мне нужно рассказать системе о том, как будут выглядеть блоки, и где они будут расположены.
Так как основная часть сайта (колонки) размещена в блоке
- добавим в него нужные коды.
При помощи кода я определяю в моем дизайне область, в которой будут содержаться блоки, например "Опросы", "Календарь", "Поиск" и другие. При помощи этих кодов я точно указываю системе, где разрешено размещать новые блоки. В моем случае это левая и правая колонка средней части страницы. Прописываем коды в дизайн, например вот так:
Теперь мне нужно как то рассказать системе, как будет выглядеть мой будущий блок. При генерации шаблонов система сгенерирует шаблоны с учетом этой информации, и все новые блоки будут сразу же добавляться в нужном мне дизайне. Самое замечательное в этом то, что мне достаточно описать дизайн блока только один раз - все остальное система сделает сама. Добавляю блок в контейнер:

Отдельно хотелось бы остановится на зарезервированных кодах каркаса. Их несколько - вот они:
- : заголовок страницы
- : путь к файлу с css-стилями
- : основная часть страницы
- : копирайт системы uCoz

У меня всплывающие окна по стилю будут такими же, как и блоки - поэтому добавляю такой код:

Напомню, в данной статье речь шла о нестандартных дизайнах (созданных вами). Режим конструктора поддерживают все стандартные