ГлавнаяДрупалТемы друпал

Адаптивные темы для Drupal 6. Темы друпал


Адаптивные темы для Drupal 6

 Адаптивные темы для Drupal 6 представленны в довольно большом количестве, но к сожалению для любителей 6-ки они имеют ограничения в облуживании или раработке.

]]>Flexible]]> резиновая тема для Drupal.

тема FlexibleDrupal 6

Обслуживание: не поддерживается.

Развитие: активная разработка.

]]>Toasted]]> простой и гибкий шаблон

теиа ToastedDrupal 6

Обслуживание : НеизвестноРазвития: Неизвестно

 

]]>Sky Line Theme]]> очень простой и гибкий шаблон

тема Sky Line ThemeDrupal 6

Обслуживание : НеизвестноРазвития: Неизвестно

 

]]>Sproing Theme]]> красочная и гибкая тема для блога.

Sproing ThemeDrupal 6

Обслуживание: неизвестноРазвития: активная разработка

]]>Corky]]> адаптивная офисная тема

тематCorkyDrupal 6/7

Обслуживание: активно поддерживаетсяРазвития: только исправление

 

]]>Dossier]]> адаптивная тема

тема DossierDrupal 6/7

Обслуживание: активно поддерживаетсяРазвития: только исправление

 

Alphorn

]]>Alphorn]]> темная тема, доступена в 3 вариантах: по умолчанию, серых и зеленых тонах. Три варианта меню с гибкой планировкой и различными комбинациями. Цель общей конструкции состоит быть простой, но быть достаточно насыщенной. Это могут быть ваши личные домашние страницы, сайтв компаний или что-нибудь подобное.

 Drupal 6/7

Обслуживание: активно поддерживаетсяРазвитие: активная разработка

 

 

 

Hero Drupal Theme]]>Hero Drupal Theme]]> Отличный внешний вид., конструкция представляет собой сочетание ярких цветов и прозрачных со световыми эффектами вдоль макета.

Drupal 6

Обслуживание: активно поддерживаетсяРазвитие: активная разработка

Aim Drupal Theme]]>Aim Drupal Theme]]> с пастельными цветами палитры и чистым видом, конструкция представляет собой сочетание градиентов и сплошного цвета, производит ощущение тепла.

Drupal 6

Обслуживание: активно поддерживаетсяРазвитие: активная разработка

тема Fever]]>Fever]]> тема идеально подходит для новостей, спорта, игр, развлечений и т.д.

Drupal 6

Обслуживание: активно поддерживаетсяРазвитие: активная разработка

]]>Genesis

Genesis]]> простой, но мощный, гибкий и легкий, чтобы начинать строить сайт

Drupal 6/7.x-2.x HTML5

Обслуживание: активно поддерживаетсяРазвитие: активная разработка

]]>Tarski]]> 'то реализация Drupal одной из самых узнаваемых тем WordPress

Drupal 6/7

Обслуживание: не поддерживается.Развитие: активная разработка.

Marinelli ]]>Marinelli]]> гибкая система 3 колонки с 8 дополнительными складными регионами и "сверху слайд-поле". Вы можете перемещать контент с права или в середине.

Drupal 6/7

Обслуживание: активно поддерживаетсяРазвитие: активная разработка

 

 

Holy Grail theme]]>Holy Grail theme]]> Эта тема является реализация "Святой Грааль" макет, имеет адаптивный центр с фиксированной шириной боковых панелей.

Drupal 6

Обслуживание: активно поддерживаетсяРазвитие: активная разработка

 

A Sync Template]]>A Sync Template]]> 24 колонки, адаптивность,поддержка до трех столбцов макета, легко настраиваемые 16 областей.

Drupal 6/7  HTML5

Обслуживание: активно поддерживаетсяРазвитие: активная разработка

 

CTI Flex]]>CTI Flex]]> является гибкий и настраиваемый Дзен подтема со многими настраиваемыми стилей и цветов.

Drupal 6/7

Обслуживание: активно поддерживаетсяРазвитие: активная разработка

 

 

Ecobusiness Theme ]]>Ecobusiness Theme]]>

Drupal 6

Обслуживание: активно поддерживается                                Развитие: только исправление

 

Basic]]>Basic]]> чистая структура HTML5 с расширяемыми классами CSS и идентификатором для неограниченных возможностей тематизации, а также порядок загрузки сверху вниз для улучшения SEO. адаптивная, элегантная, простая и гибкая тема.

Drupal 6

Обслуживание: активно поддерживаетсяРазвитие: только исправление

 

Acquia Prosper]]>Acquia Prosper]]> является передовым тема Drupal по TopNotchThemes, она имеет беспрецедентную степень гибкости и возможностей.

Drupal 6

Обслуживание: активно поддерживаетсяРазвитие: активная разработка

 

 

Beach]]>Beach]]> тема имеет свою собственную историю, эта тема для всех, кто влюблен в Drupal.

Drupal 6/7   HTML5

Обслуживание: активно поддерживаетсяРазвитие: активная разработка

 

 

 

 

sozdaniesaitanadrupal.ru

Делаем свою подтему на базе темы Zen для Drupal.

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

  1. Переделать готовую тему.
  2. Сверстать на основе подтемы..
  3. Написать самому с ноля.

Что нужно знать для создания своей темы для Drupal.

Прежде чем решить какой вариант выбрать нужно оценить свои знания. В любом случае нужно знать HTML и CSS. Необязательно знать на зубок названия всех тегов, селекторов и прочего. Достаточно понимать общие принципы и уметь пользоваться поиском или спросите у меня:). Этих знаний хватит на два первых варианта. Зная что такое PHP можно пробовать делать полностью свою тему.

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

Делаем тему для Друпала на основе Zen.

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

От слов к делу. Скачивает тему https://drupal.org/project/zen и устанавливаем как обычно. Переходим в папку с темой zen sites/all/themes/zen. Здесь нам нужно найти папку STARTERKIT и скопировать её в sites/all/themes. Переименуем папку STARTERKIT например в newthemes - это будет названием вашей подтемы.

Теперь подкоректируем info файл. В паке подтемы находим файл STARTERKIT.info.txt и переименовываем его заменяя STARTERKIT на название подтемы, в моём случае это newthemes, и удалив из названия ".txt". В итоге получаем файл newthemes.info. Далее редактируем сам info файл. Нужно заменить name = Zen Sub-theme Starter Kit" на "name = newthemes" и изменить описание "description = Read..." на "description = описание новой темы". Следующее изменение будет касаться внешнего вида сайта. В нашей теме уже определены некоторые стили. Мы можем выбрать фиксированный размер сайта или резиновый. В разделе где прописаны CSS файлы для подключения нужно оставить строкуstylesheets[all][]   = css/layouts/responsive-sidebars.css для резинового илиstylesheets[all][]   = css/layouts/fixed-width.css для фиксированного.

Следующий шаг редактирование файлов template.php и theme-settings.php. Заменяем в них все встречающиеся STARTERKIT на название темы, в моём примере это newthemes.Подготовка темы закончена. Теперь её нужно включить по умолчанию и начинать экспериментировать.

Наша экспериментальная тема содержит 23 css файла. Не все эти файлы нам нужны.

Все не нужные css файлы можете смело удалять.

На последок несколько советов:

  1. Для изменения файлов шаблона (page.tpl.php и др.) переместите нужные файлы в папку templates.
  2. На время разработки тему отключайте сжатие и кэширование. Иначе сложно найти где какие стили прописаны.
  3. В дополнение к предыдущему пункту. на время разработки в настройках темы включите "перестраивать реестр темы при каждой загрузке страницы".
  4. Пользуйтесь аддонами или встроенными возможностями браузеров для просмотра/редактирование, например Fire Bug.

webonlife.ru

Создание своей темы в Drupal

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

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

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

Давайте назовём тему my_theme.Папку с темой помещаем в sites/all/themes.

В файле my_theme.info пишем.

  1. name = my_theme

  2. description = Моя первая тема

  3. core = 7.x

  4.  

  5. regions[content] = Content

  6. regions[sidebar_first] = Sidebar First

  7. regions[footer] = Footer

  8.  

  9. stylesheets[all][] = css/style.css

Таким образом, мы определим 3 региона и подключим 1 файл со стилями.

Далее создаем папки css и templates.

Теперь делаем шаблон страницы и ноды. Из курса темизации вы должны помнить, как они называются.

Создаем шаблон страницы. Называем его page.tpl.php

  1. <div>

  2. <header > <!-- Шапка сайта -->

  3. <?php if ($site_name || $site_slogan || $logo): ?>

  4. <!-- если задано имя сайта, слоган или лого выводим блок заголовков -->

  5. <hgroup>

  6. <?php if ($logo): ?> <!-- Если задан логотип - выводим логотип -->

  7. <a title="<?php print t('Home'); ?>" rel="home" href="<?php print $front_page; ?>">

  8. <img src="<?php print $logo; ? />" alt="<?php print t('Home'); ?>"/></?php></?php></a>

  9. <?php endif; ?>

  10. <?php if ($site_name): ?> <!-- Если заданно имя сайта - выводим -->

  11. <h2><a title="<?php print t('Home'); ?>" rel="home" href="<?php print $front_page; ?>">

  12. <?php print $site_name; ?></?php></?php></a></h2>

  13. <?php endif; ?>

  14. <?php if ($site_slogan): ?> <!-- Если задан слоган сайта - выводим -->

  15. <h3><?php print $site_slogan; ?></?php></h3>

  16. <?php endif; ?>

  17. </?php></?php></?php></?php></?php></?php></hgroup>

  18. <?php endif; ?>

  19. </?php></?php></header>

  20. <aside> <!-- Левая колонка c регионом sidebar_first -->

  21. <?php print render($page['sidebar_first']); ?>

  22. </?php></aside>

  23. <div > <!--Правая колонка-->

  24. <?php print $breadcrumb; /* Выводим "Выводим "хлебные крошки" */ ?>

  25. <?php print $messages; /* Выводим сообщения системы */ ?>

  26. <!-- Заголовок с суффиксом и преффиксом -->

  27. <?php print render($title_suffix); ?>

  28. <?php if($title): ?> <h2><?php print $title; ?></?php></h2><?php endif; ?>

  29. <?php print render($title_suffix); ?>

  30. <?php print render($tabs); /* Выводим табы */ ?>

  31. <?php print render($page['content']); /* Выводим регион "контент" */ ?>

  32. </?php></?php></?php></?php></?php></?php></?php></?php></div>

  33. <footer> <!-- подвал сайта с регионом footer -->

  34. <?php print render($page['footer']); ?>

  35. </?php></footer>

  36. </div>

О том, какие переменные можно использовать – можно посмотреть в файле  modules/system/page.tpl.php

Аналогично создаем node.tpl.php

  1. <div<?php print $attributes; ?>>

  2. <?php print render($title_prefix); ?>

  3. <?php if (!$page): ?>

  4. <h3<?php print $title_attributes; ?>>

  5. <a href="<?php print $node_url; ?>"><?php print $title; ?></?php></a>

  6.  

  7. <?php endif; ?>

  8. <?php print render($title_suffix); ?>

  9. <?php if($display_submitted || !empty($content['field_tags'])): ?>

  10. <div>

  11. <?php if ($display_submitted): ?>

  12. <span role="contentinfo">

  13. <?php print $submitted; ?>

  14. </?php></span>

  15. <?php endif; ?>

  16. <?php if (!empty($content['field_tags'])): ?>

  17. <?php print render($content['field_tags']); ?>

  18. <?php endif; ?>

  19. </?php></?php></?php></?php></?php></div>

  20. <?php endif; ?>

  21. <article <?php print $content_attributes; ?>>

  22. <?php

  23. hide($content['comments']);

  24. hide($content['links']);

  25. hide($content['field_tags']);

  26. print render($content);

  27. ?>

  28. </?php></article>

  29. <div>

  30. <?php print render($content['links']); ?>

  31. </?php></div>

  32. <?php if ($content['comments'] && $page): ?>

  33. <section>

  34. <?php print render($content['comments']); ?>

  35. </?php></section>

  36. <?php endif; ?>

  37. </?php></?php></?php></?php></?php></?php></h3<?php></?php></?php></?php></?php></div>

И block.tpl.php

  1. <div<?php print $attributes; ?>>

  2.  

  3. <?php print render($title_prefix); ?>

  4. <?php if ($block->subject): ?>

  5. <h3<?php print $title_attributes; ?>><?php print $block->subject ?>

  6. <?php endif;?>

  7. <?php print render($title_suffix); ?>

  8.  

  9. <div<?php print $content_attributes; ?>>

  10. <?php print $content ?>

  11. </?php></div>

  12. </?php></?php></?php></h3<?php></?php></?php></?php></?php></div>

 

Файлы block.tpl.php, page.tpl.php и node.tpl.php кладем в подпапку templates нашей темы.

Выглядеть это будет так.

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

И в папке css создаем файл style.css следующего содержания.

  1. #page_wrapper{

  2. margin: 0 auto;

  3. width:800px;

  4. }

  6. width:100%;

  7. background: #87d69e;

  8. }

  9. #left_column{

  10. float:left;

  11. width:200px;

  12. background: #d4b354;

  13. }

  14. #article_wrapper{

  15. margin-left:220px;

  16. padding:0 10px;

  17. }

  18. article {

  19. margin-right:25px;

  20. margin-left: 5px;

  21. }

  22. nav{

  23. text-align:center;

  24. margin: 10px;

  25. border-bottom: 1px solid #3399CC;

  26. }

  27. ul.main-menu{

  28. list-style-type: none;

  29. font-size: 30px;

  30. margin:0;

  31. padding:0;

  32. text-transform:lowercase;

  33. }

  34. ul.main-menu li{

  35. display: inline-block;

  36. margin:0;

  37. padding:0;

  38. }

  39. ul.main-menu li a{

  40. display:block;

  41. margin:0;

  42. padding:5px;

  43. text-decoration:underline;

  44. }

  45. ul.main-menu li a:hover{

  46. color: #3399CC;

  47. }

  48. ul.main-menu li a.active:hover{

  49. color:#444;

  50. }

  51. .breadcrumb {

  52. padding: 5px;

  53. margin:0;

  54. font-size: 8pt;

  55. font-style: italic;

  56. }

  57. .page_title{

  58. color: #01637E;

  59. }

  60. .node_title a{

  61. display:block;

  62. margin-right:25px;

  63. padding:5px 5px 0 10px;

  64. color: #01637E;

  65. background: rgba(102,153,204, 0.5);

  66. border-radius:8px;

  67. -webkit-border-radius:8px;

  68. -moz-border-radius:8px;

  69. -khtml-border-radius:8px;

  70. }

  71. .node_title a:hover{

  72. background: rgba(102,153,204, 0.9);

  73. }

  74. .field-type-taxonomy-term-reference {

  75. border-left: solid 1px #3399CC;

  76. display: inline;

  77. margin-left: 3px;

  78. padding: 0 0 0 3px;

  79. }

  80. ul.links li a{

  81. padding: 2px 4px;

  82. display:inline-block;

  83. font-size:10pt;

  84. background: rgba(102,153,204, 0.5);

  85. border-radius:4px;

  86. -webkit-border-radius:4px;

  87. -moz-border-radius:4px;

  88. -khtml-border-radius:4px;

  89. }

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

И напоследок поместим в папку темы логотип,  он должен называться logo.png .Размеры произвольны. Я взял уже готовый рисунок.

Теперь папка темы выглядит следующим образом.

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

Как видите – тема успешно работает. Стили, блоки и регионы есть. Но для того, чтобы тема была вменяемой – придется потратить на неё большое количество времени .

php-include.ru

Prostoy-Site | Все права защищены © 2018 | Карта сайта