Создание новой темы. Часть четвертая: CSS-only

Сейчас уже настало время сделать то, что написано в заголовке - создать новый шаблон. Как мы это сделаем?
Очень просто - создаем папку внутри темы Bluemarine:
\themes\bluemarine\newtheme\

И создаем там пустой файлик style.css.

Все. Поздравляю - мы создали новую тему ;)
Наша тема появилась в списке ?q=admin/build/themes. Включаем ее и ставим по дефолту.

Вах. Что мы видим? Никакого стиля (практически). Заглядываем в исходник странички и находим там список подключаемых файлов .css:

<style type="text/css" media="all">@import "/modules/node/node.css";</style>
<style type="text/css" media="all">@import "/modules/system/admin.css";</style>
<style type="text/css" media="all">@import "/modules/system/defaults.css";</style>
<style type="text/css" media="all">@import "/modules/system/system.css";</style>
<style type="text/css" media="all">@import "/modules/user/user.css";</style>
<style type="text/css" media="all">@import "/themes/bluemarine/newtheme/style.css";</style>

Если сравнить с оригинальной темой Bluemarine, то изменения всего лишь в последней строчке - вместо /themes/bluemarine/style.css вызывается /themes/bluemarine/newtheme/style.css, то есть наш файлик.

Теперь у нас два выхода - если хотелось слегка поправить исходную тему - то можно скопировать style.css. Если хочется создать "с нуля", то начинаем наполнять пустой файлик.

Поскольку Друпал ищет логотип в каталоге темы, то скопируем \themes\bluemarine\logo.png себе в каталог.

Вначале настройки по умолчанию для некоторых элементов;

h1, h2, h3, h4 {
	margin: 0;
	padding: 0;
}
a {
	text-decoration: none;
}
tbody {
	border: 0px;
}

Не люблю подчеркнутые ссылки (везде где ни попадя) и огромные отступы для заголовков по умолчанию.

Теперь раскидаем основные блоки.

Первым делом - заголовок.
Какой id у таблицы заголовка? Правильно, #header. А ячейка с логотипом? #logo

Пишем кусочек style.css:

#header {
	margin: 0px;
	padding: 0px;
	border: 1px solid black;
	width: 100%;
}
#logo {
	padding: 5px;
} 
#logo img{
	float: left;
}
#logo .site-name{
	float: left;
	margin: 15px 0px 0px 20px;
	padding: 0px;
}
#menu {
	vertical-align: bottom;
}
#menu li {
	width: 100px;
	margin: 5px 0px 0px 5px;
	border: 1px solid blue;
	padding: 5px;
	float: right;
	border-bottom: none;
}
#menu li.first {
	border-right: none;
}
#menu li a {
	display: block;
	text-align: center;
}

Заметив, что я все отступы и размеры элементов делаю в пикселах, некоторые могут мне попенять, типа "чему ты учишь, надо делать в em, чтобы при смене шрифта верстка не поползла". Дружно забьем на это (пока). Также кладется болт на всякие фоновые картинки - вставить их - дело пары строчек.

Следом под раздачу попадают два сайдбара (боковые панели, если говорить правильным языком). Почему два? Не забываем, что у нас может появиться правый, если мы накидаем ему блоков в /?q=admin/build/block. Рекомендую повключать блоки, чтобы видеть, что же у нас получилось. Также рекомендую добавить пару ссылок в меню "Primary links", которое у нас в заголовке.

Обратите внимание, что Primary links отображаются в обратном порядке. Задание на дом - объяснить почему.

#content {
	width: 100%;
}
#sidebar-left {
	width: 200px;
	vertical-align: top;
	padding-right: 5px;
}	
#sidebar-right {
	width: 200px;
	vertical-align: top;
	padding-left: 5px;
}	

Ну и наконец обведем рамочками блоки и основное содержимое.

.block {
	margin: 5px 0px;
	padding: 0px;
	border: 1px solid black;
}	
#main {
	margin: 5px 0px 0px 0px;
	padding: 0px;
	border: 1px solid black;
}	

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

Опубликовано НовичОК в пн, 09/04/2007 - 11:16.

Супер! Реально полезное дело!!!

• Для комментирования войдите или зарегистрируйтесь

Опубликовано KBH в пн, 09/04/2007 - 19:06.

Автору мегареспект! Осталось эти сливки намазать на хлеб и употребить.

• Для комментирования войдите или зарегистрируйтесь

Опубликовано panda в ср, 20/06/2007 - 08:28.

заголовки блоков не отображаютса(
вернее начинают отображаться если их заново переписать)

• Для комментирования войдите или зарегистрируйтесь

Опубликовано Tremor (гостевой логин) в вс, 04/11/2007 - 15:37.

Наша тема появилась в списке ?q=admin/build/themes. Включаем ее и ставим по дефолту.
Не появилась:( в чем может быть дело?

• Для комментирования войдите или зарегистрируйтесь

Опубликовано vadbars@drupal.org в вс, 04/11/2007 - 15:51.

Тема может не соответствовать версии Drupal. В частности для Drupal 5 необходимо наличие файла имятемы.info

• Для комментирования войдите или зарегистрируйтесь

Опубликовано run в вт, 08/01/2008 - 07:48.

Помогите!!!

Где и как установить размер боковых колонок в фиксировоной и "резиновой" темах?

• Для комментирования войдите или зарегистрируйтесь

Опубликовано PVasili в вт, 08/01/2008 - 09:54.

конечно в CSS ;-)

• Для комментирования войдите или зарегистрируйтесь

Опубликовано run в вт, 08/01/2008 - 15:20.

Да, конечно в CSS я даже подозревал что там, но окончательное доказательство нашел в Создание новой темы. Часть вторая: page.tpl.php. там даже вот про что сказано:
.....

Тут начинается самое интересное - таблица контента. С понятным id.
<?php if ($sidebar_left) { ?>
<?php print $sidebar_left ?>

<?php } ?>
Сайдбар - это столбики слева и справа от основного тела сайта. Туда выводятся разные блоки.

......

А теперь интересно стало что именно и как написать нужно: слово какое волшебное, циферки иль проценты. Кто знает как или ссылку, где есть ответ.

• Для комментирования войдите или зарегистрируйтесь

Опубликовано Dan в вт, 08/01/2008 - 16:01.

> Тема может не соответствовать версии Drupal. В частности для Drupal 5 необходимо наличие файла имятемы.info
Нет, для 5-ки ещё не нужно. А вот для версии 6 уже надо

• Для комментирования войдите или зарегистрируйтесь

Опубликовано Ambrase в ср, 30/04/2008 - 09:27.

И создаем там пустой файлик style.css.
Все. Поздравляю - мы создали новую тему ;)

не так быстро :-(
+ для 6-ой сработало , если перекинуть файл инфо... более того, получилось прийти к результату еще и переименовав инфо.
может я туплю, а может нет, но...
все уехало влево по порядку, несмотря на подключенный правый столб.
изменилась админка в части admin/build/block ... остальная в норме.
ну и геморр...
а не существует вариантов попроще ?!

• Для комментирования войдите или зарегистрируйтесь

Опубликовано steel.ne в пн, 05/05/2008 - 05:14.

Это писалось еще для пятерки, в шестерке некоторые вещи поменялись. Например то же инфо.

Будет время - опишу шестерку. Сейчас немного не до этого )

• Для комментирования войдите или зарегистрируйтесь

Опубликовано aster в вт, 27/05/2008 - 16:27.

#logo {
padding: 5px;
}

тут я бы указал жесткую ширину, потому что если ушей справа больше 2-3, они начинают выводиться в два ряда и прижимаются слева дивом #logo;

• Для комментирования войдите или зарегистрируйтесь