Урок создания шаблона на базе Default

03-01-2012Время чтения ~ 1 мин.Roadmap 45261

На вики я добавляю основную информацию о Default-шаблоне. Надеюсь, кому-нибудь это пригодится. Вместе с тем, я понимаю, что нужен какой-то «глобальный» обучающий пример-урок, где я расскажу о создании шаблона с нуля. Должны быть все подробности и освещены нюансы. Примерно как я это делал с Twenty Ten. Отсюда пара предложений.

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

«Модный» дизайн, но без избытка графики. Желательно CSS3.
Фишки, вроде слайдера. То есть какие-то красоты.
Особый вывод записей на главной. Ну вроде трех колонок.
Шаблон должен быть фришный, желательно под открытой лицензией. Если не найдем, то будем придумывать сами.

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

Второе предложение. Предлагайте темы и вопросы, которые следует освятить в уроке. Лично мне всё понятно и я знаю где какой файл нужно использовать. Поэтому если сейчас «спартизаните», то после никаких претензий приниматься не будет. Принимаются все вопросы.

Комментарии (30) RSS

1 Андрей 2012-01-03 18:58:58

Вот вроде неплохие темы, может подойдёт что?

http://www.prelovac.com/vladimir/

http://www.paddsolutions.com/magasin/uno/

http://demo.colorlabsproject.com/arthemia-premium/

http://wpthemedesigner.com/demo/

http://www.wp-themes.der-prinz.com/branfordmagazine/

2 Константин 2012-01-04 10:37:18

Вот тут замечательная тема: http://blogstyle.ru/2546

Несколько дней пытаюсь ее прикрутить к MaxSite но из за отсутствия навыка плохо получается. Может покажете на ее примере как верстать темы для MaxSite?

3 Александр 2012-01-04 10:38:23

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

4 Александр 2012-01-04 10:44:29

А, и ещё... Я с 0.58 версии не обновлялся, поэтому, возможно, это уже есть, но всё же... Неплохо бы для каждого пункта меню генерировать отдельный класс для более удобной кастомизации, а не только first, last, selected.

5 Александр 2012-01-04 10:56:11

Извиняюсь за мультипостинг.

Тут http://www.problogdesign.com/wordpress/40-free-premium-quality-wordpress-themes/

и тут http://www.problogdesign.com/wordpress/40-free-premium-quality-wordpress-themes/

есть много качественных разных шаблонов. Что-то конкретное трудно выбрать - глаза разбегаются))

6 Катя 2012-01-04 14:33:26

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

7 Anonymous 2012-01-04 14:47:56

А мне по душе показался вот этот шаблон,

http://osc4.template-help.com/wt_30198/index.html

но у меня не получается ни один из всех уроков создать свой шаблон. Всё равно нужен полноценный полный урок для таких как я (начинающих(чайников)).:red:

8 proIT 2012-01-04 16:32:47

Приветствую! С Новым годом!

Вот интересный шаблон:

http://wp-templates.ru/xanadu/

Впрочем, он просто интересный, перенести его под MS не трудно, только вот со слайдами сложности.

Более нестандартен для MaxSite этот шаблон:

http://www.wpbot.ru/?p=1577

Такой шаблон было бы полезно рассмотреть, мне кажется.

Ну и предложу, пожалуй, то, что интересно мне самому.. Множество блоков с рубриками (каждая из которых разделена на 2 блока: слева блок с анонсом и крупной картинкой, а справа список записей из этой же рубрики). Пример:

http://www.autocentre.ua/news/

Я видел когда-то подобный шаблон для WP, сейчас найти не могу, поэтому привёл пример новостного сайта. Причём, в том шаблоне каждая рубрика была выделена своим уникальным цветом.

9 Anonymous 2012-01-05 11:13:10

А будет урок по созданию резиновых шаблонов?

Типа этого http://templates.max-3000.com/page/shablon-inblack#cut

10 Максим 2012-01-05 11:50:13 admin

Нет, я резиновые дизайны плохо воспринимаю, поэтому вряд ли. :)

11 Максим 2012-01-05 12:13:42 admin

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

1. http://demo.graphpaperpress.com/monochrome-pro/

2. http://demo.woothemes.com/?name=themorningafter

3. http://demo.woothemes.com/?name=flash-news

4. http://demo.woothemes.com/?name=premiumnews

12 Андрей 2012-01-05 12:56:48

Все варианты хороши, если голосование, то расставил бы в порядке убывания: 4, 1, 2, 3.

13 dark104 2012-01-05 13:54:35

За вариант 4

14 Александр Шиллинг 2012-01-05 14:01:53

4 интересный.

15 Alexand 2012-01-05 22:26:06

Да, четвёртый вариант самый подходящий из всех перечисленных.

16 Катя 2012-01-06 08:00:37

Четвертый неплохой. Но вот вариант, который предложил Андрей в первом посте посте посложнее/интереснее будет... Вот он http://demo.colorlabsproject.com/arthemia-premium/

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

Вот такой вопрос от меня для будущего мануала: допустим у нас в сайдбаре выводится последняя статья рубрики с картинкой и описанием (берется из начала статьи), как сделать чтобы описание автоматически ограничивалось по высоте картинки, а в конце ставилось троеточие?

И для просто обычных постов это было бы супер, то есть мы не ставим [cut], а текст ограничивается автоматом...

Макс, когда примерно ждать урок?:-)

17 Александр 2012-01-06 09:37:20

Пожалуй, тоже за 4.

18 Максим 2012-01-06 10:32:32 admin

Четвертый вариант в принципе меня тоже устраивает. Там простой дизайн, значит будет простой css. Два меню. Два слайдера и двухколоночный вывод на главной. Две колонки в сайдбаре меня несколько смущают - крайне непрактичная ширина. Поэтому может оставим все-таки один сайдбар. Подвал немного «слабоват», можно попробовать в нем прописать три или четыре колонки сайдбаров.

По срокам. Сейчас у меня в плане несколько изменений в default-шаблоне, будут версии 0.62X. Вот после этого и займусь уроком.

19 Андрей 2012-01-06 13:27:21

Да, подвал "усилить" было бы хорошо.

20 Катя 2012-01-06 17:16:22

Еще пара тем для урока...)))

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

2. Изменение формы поиска из стандартного вида на необычный...

:-)

21 Руслан Шакертов 2012-01-06 21:19:17

Раз - http://www.os-templates.com/free-website-templates/education-board

Два - http://www.os-templates.com/free-website-templates/news-magazine

Три - http://http-solutions.com/themes/corporate_html/corporate_works_html/index.html

22 Мюс 2012-01-07 13:36:32

Я бы почитала о том, как "видоизменять и персонализировать" шаблон, я предполагаю (знаю), что все это делается по средством type_foreach, но вот не всегда сразу доходишь какой файл за что отвечает, например если нужно изменить блок ифно записи (где заголовок, рубрики и метки), так же например, вывод на главной блоками в несколько колонок, как в предложенных выше шаблонах. В общем именно вывод так сказать элементов на страницы сайта, а оформление это уже дело css.

23 UzBeast 2012-01-08 15:00:48

http://www.uniq-themes.ru/index.php/wpthemes/elegantthemes.html вот хорошая подборка дизайнов, правда на wordpress, на базе их было бы не плохо разобрать создание шаблона

24 Александр 2012-01-08 17:47:32

Просьба к Максу. Не надо упрощать себе задачу.:-) Вариант http://demo.colorlabsproject.com/arthemia-premium/ намного интересней.

25 and 2012-01-08 21:49:56

Нет, я резиновые дизайны плохо воспринимаю, поэтому вряд ли.

Максим, поддержу просьбу arriah BH

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

Ширина сайта:

Установить ширину сайта (в пикселах или процентах). Например: 950px, 80%, 1240px.

вводишь в поле цифры и обозначение единицы измерения px - получаешь фиксированный по ширине шаблон. ввоишь % и получаешь резиновый.

p.s. из резинового всегда можно сделать фиксированый ;-).................

26 Рафаэль 2012-01-11 17:19:51

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

27 nikol 2012-01-11 20:09:18

поддерживаю тоже, хотелось бы видеть и реализацию резинового шаблона. спасибо.

28 nikol 2012-01-11 20:11:14

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

29 alix 2012-06-08 09:50:03

Не надо усложнять;), нужно думать о посетителях сайта: им не любуются, а пользуются. Лишняя "навороченность" отпугивает. Вот то, что нужно http://www.os-templates.com/website-templates/template-demos/free-website-templates/plusbusiness/, подвал тоже можно упростить. Простенько и функционально.

30 Владимир 2012-07-12 09:10:38

Существует программа для конструирования дизайна сайтов, написанных на популярных cms: http://www.artisteer.com/

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

В принципе, можно, наверное, использовать шаблоны, сгенерированные для WordPress.

Урок создания шаблона на базе Default

Проекты

Ссылки