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

Главные вкладки

Аватар пользователя steel.ne steel.ne 9 апреля 2007 в 15:11

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

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

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

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

<style type="text/css" media="all">[user=import]import[/user] "/modules/node/node.css";</style>
<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 себе в каталог.

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

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;
}      

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

ВложениеРазмер
Иконка простого текстового файла tutor_4_style.css_.txt998 байт
Иконка изображения tutor_4_1.GIF10.25 КБ

Комментарии

Аватар пользователя Tremor Tremor (не проверено) 4 ноября 2007 в 18:37

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

Аватар пользователя run run 8 января 2008 в 18:20

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

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

<?php print $sidebar_left ?>

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

......

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

Аватар пользователя Dan Dan 8 января 2008 в 19:01

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

Аватар пользователя Ambrase Ambrase 30 апреля 2008 в 13:27

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

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

Аватар пользователя steel.ne steel.ne 5 мая 2008 в 9:14

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

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

Аватар пользователя aster aster 27 мая 2008 в 20:27

#logo {
padding: 5px;
}

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