9 апреля 2007 в 15:11
Сейчас уже настало время сделать то, что написано в заголовке - создать новый шаблон. Как мы это сделаем?
Очень просто - создаем папку внутри темы Bluemarine:
\themes\bluemarine\newtheme\
И создаем там пустой файлик style.css.
Все. Поздравляю - мы создали новую тему 
Наша тема появилась в списке ?q=admin/build/themes. Включаем ее и ставим по дефолту.
Вах. Что мы видим? Никакого стиля (практически). Заглядываем в исходник странички и находим там список подключаемых файлов .css:
<style type="text/css" media="all">[user=import]import[/user] "/modules/system/admin.css";</style>
<style type="text/css" media="all">[user=import]import[/user] "/modules/system/defaults.css";</style>
<style type="text/css" media="all">[user=import]import[/user] "/modules/system/system.css";</style>
<style type="text/css" media="all">[user=import]import[/user] "/modules/user/user.css";</style>
<style type="text/css" media="all">[user=import]import[/user] "/themes/bluemarine/newtheme/style.css";</style>
Если сравнить с оригинальной темой Bluemarine, то изменения всего лишь в последней строчке - вместо /themes/bluemarine/style.css вызывается /themes/bluemarine/newtheme/style.css, то есть наш файлик.
Теперь у нас два выхода - если хотелось слегка поправить исходную тему - то можно скопировать style.css. Если хочется создать "с нуля", то начинаем наполнять пустой файлик.
Поскольку Друпал ищет логотип в каталоге темы, то скопируем \themes\bluemarine\logo.png себе в каталог.
Вначале настройки по умолчанию для некоторых элементов;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
tbody {
border: 0px;
}
Не люблю подчеркнутые ссылки (везде где ни попадя) и огромные отступы для заголовков по умолчанию.
Теперь раскидаем основные блоки.
Первым делом - заголовок.
Какой id у таблицы заголовка? Правильно, #header. А ячейка с логотипом? #logo
Пишем кусочек style.css:
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 отображаются в обратном порядке. Задание на дом - объяснить почему.
width: 100%;
}
#sidebar-left {
width: 200px;
vertical-align: top;
padding-right: 5px;
}
#sidebar-right {
width: 200px;
vertical-align: top;
padding-left: 5px;
}
Ну и наконец обведем рамочками блоки и основное содержимое.
margin: 5px 0px;
padding: 0px;
border: 1px solid black;
}
#main {
margin: 5px 0px 0px 0px;
padding: 0px;
border: 1px solid black;
}
Прицепляю файлик стилей и рисуночек того, что по идее должно было получиться.
| Вложение | Размер |
|---|---|
 tutor_4_style.css_.txt | 998 байт |
 tutor_4_1.GIF | 10.25 КБ |
Комментарии
Супер! Реально полезное дело!!!
Автору мегареспект! Осталось эти сливки намазать на хлеб и употребить.
заголовки блоков не отображаютса(
вернее начинают отображаться если их заново переписать)
Наша тема появилась в списке ?q=admin/build/themes. Включаем ее и ставим по дефолту.
Не появилась:( в чем может быть дело?
Тема может не соответствовать версии Drupal. В частности для Drupal 5 необходимо наличие файла имятемы.info
Помогите!!!
Где и как установить размер боковых колонок в фиксировоной и "резиновой" темах?
конечно в CSS
Да, конечно в CSS я даже подозревал что там, но окончательное доказательство нашел в Создание новой темы. Часть вторая: page.tpl.php. там даже вот про что сказано:
.....
Тут начинается самое интересное - таблица контента. С понятным id.
<?php if ($sidebar_left) { ?>
<?php } ?>
Сайдбар - это столбики слева и справа от основного тела сайта. Туда выводятся разные блоки.
......
А теперь интересно стало что именно и как написать нужно: слово какое волшебное, циферки иль проценты. Кто знает как или ссылку, где есть ответ.
> Тема может не соответствовать версии Drupal. В частности для Drupal 5 необходимо наличие файла имятемы.info
Нет, для 5-ки ещё не нужно. А вот для версии 6 уже надо
И создаем там пустой файлик style.css.
Все. Поздравляю - мы создали новую тему
не так быстро
+ для 6-ой сработало , если перекинуть файл инфо... более того, получилось прийти к результату еще и переименовав инфо.
может я туплю, а может нет, но...
все уехало влево по порядку, несмотря на подключенный правый столб.
изменилась админка в части admin/build/block ... остальная в норме.
ну и геморр...
а не существует вариантов попроще ?!
Это писалось еще для пятерки, в шестерке некоторые вещи поменялись. Например то же инфо.
Будет время - опишу шестерку. Сейчас немного не до этого )
#logo {
padding: 5px;
}
тут я бы указал жесткую ширину, потому что если ушей справа больше 2-3, они начинают выводиться в два ряда и прижимаются слева дивом #logo;