18 ноября 2008 в 10:20
Здравствуйте.
Передо мной поставлена задача: есть друпал, есть две картинки (как должна выглядеть главная страница и как должны выглядеть остальные страницы сайта) - поднять движок и сделать у сайта такой дизайн, как на картинках.
Т.к. я не совсем дремуч (хотя сайтами никогда не занимался), хоть и услышал слово друпал три дня назад, но за полчаса на локальной машине поставил движок (6.6 с переводом на русский), как у вас, olk, сказано в правиле №4 (Друпал для "Чайников") - несколько часов бродил в админке, посмотрел все возможные настройки (до каких добрался), примерно понял возможно даже больше половины из того что посмотрел...
Отлично, но как мне хотя бы цвета поменять - не понятно. Хорошо, drupal.ru и куча уводящих от туда ссылок, много разрозненной информации предназначеной для тех кто давно знаком с друпалом - это ещё один день с утра до вечера.
Текущее состояние - думаю что мне нужно только создать свою тему, разобраться как её настраивать и этого будет достаточно, чтобы полностью сделать то что на картинках. Хотя, после чтения разных материалов по темизации - до сих пор не понятно с чего начать. Скопировал готовую тему bluemarine, вроде бы во всех файлах в новой папке переименовал bluemarine (и саму папку) - на новое название темы (test) - обновил сайт - куча ошибок - явно тему переименовать не удалось... В чём проблема не ясно.
Пожалуйста, очень прошу, посоветуйте общими словами шаги, которые нужно предпринять чтобы сделать на друпале, то что у меня на картинках...
Хочется услышать что-то типа:
1. создай свою тему (просто скопируй существующуй, переименуй в файлах ... имя темы на новое),
2. для того чтобы были горизонатальные меню установи модуль ... (нужно ли это или это создаётся в теме?)
3. для того что на хедере сделать кнопочки (главная, написать письмо и проч. - маленькие, сверху справа) - поставь модуль ... (это мои догадки)
4. почитай про темизацию, настрой тему в соответствии со своими картинками (этот пункт хотелось бы подробнее)
5. настрой в админке в разделах ... настройки ... , чтобы у тебя вид окончательно стал таким как нужно...
Наверняка я глубого заблуждаюсь, помогите, каковы на самом деле шаги для создания дизайна как на картинке?
Буду рад по мимо советов и ссылкам и пинкам.
Картинка - как должна выглядеть главная страница:
как остальные:
Большое спасибо.
Комментарии
Я сам сейчас пытаюсь с этим разобраться, так что могу быть не прав. Советую смотреть в сторону http://drupal.org/project/zen
Большое спасибо. Посмотрел.
Вы смогли настроить тему zen под свои требования?
Отпишитесь, пожалуйста, подробней.
Пока еще нет, говорю же сам пока разбираюсь
Руководствуясь readme создал собственную подтему zen и немного поменял настройки css для нее. Ща буду дальше курить мануал.
Хотелось бы услышать советы тех, кто уже собаку съел на этом деле.
Ок, я сейчас скопировал в sites/all/themes/ тему zen_classic и попытаюсь её изменить под то что мне нужно.
"Хотелось бы услышать советы тех, кто уже собаку съел на этом деле."
Да, очень хотелось бы.
А я бы все-таки советовал прочитать readme... Там есть специальная тема для создания своих тем, называется STARTERKIT, вот от нее и надо плясать. В ридми описано что с ней надо зделать.
<div id="имя_региона"><?php print $имя_региона; ?></div>"Настройкой" вам не обойтись. Вам придется верстать и прораммировать. Готовых рецептов для вашего сайта нкито не даст.
digital_sword, огромное спасибо.
Химический Али, ваше сообщение мне адресовано?
""Настройкой" вам не обойтись. Вам придется верстать и прораммировать. Готовых рецептов для вашего сайта нкито не даст."
Если мне то я просил помощи (общих советов, указаний) как раз таки в верстании и программировании.
Т.е. Вы предлагаете поработать за Вас?
Химический Али, разумеется нет, прочтите, пожалуйста, сообщение которым начата эта тема.
Yanzay, да, действительно. Как у вас продвигается процесс? Сделал "свою" тему, как сказано в readme zen'а, пытаюсь теперь привести её хотя бы к похожему на мои картинки виду.
digital_sword, подскажите пожалуйста, когда я захожу в админке в "блоки", выделяемые области с надписями "right sidebar", "left sidebar", "content top", "header" - это и есть регионы?
Т.е. в page.tpl.php у меня должен быть div c id="header"?
Видимо я где-то глубоко заблуждаюст, т.к. в page.tpl.php у div-ов идут очень странные названия...
В page.tpl.php я делаю тему с дизайном всех страниц, кроме главной... но у меня на главной странице должны быть совсем другие меню, как это сделать? Менять php-код в page.tpl.php, чтобы была проверка главная сейчас страница или нет?
Та я все никак не могу разобраться как правильно верстать на css
С таблицами все понятно - картинку порезал, в таблицу кусочки повставлял и все, а с css как-то непонятно все... Может кто линком в меня кинет где это все расписано по-человечески? Тока не предлагайте гуглить, пробовал уже - нахожу только туториалы как разметить страницу на блоки (top, right, mid, left и т.д.).
Посмотрите пособие htmlbook.ru, там про css коротоко, но вполне ясно.
Возьмите какую-нибудь тему оформления Drupal и попробуйте поменять ее, меняя код в файле style.css, подставляя свои изображения.
Пользуйтесь браузером Mozilla FireFox и плагином к нему FireBug, который в реальном времени позволяет наблюдать, как меняются элементы страницы при изменениях CSS
Тогда, думаю, с css и div'ами будет более понятно.
для главной можно создать
отдельный файл
page-front.tpl.php
такж вроде у главной к body добавляеться класс front или frontpage
чтото типа того
так что им можно пльзоваться описывая в сss элементы главной страницы
блоки и регионы это где
<?print $left_sidebar ?> а что вокруг него движку фиолетово
но если вы его поместите в
Yanzay, вот-вот и я так же. В табличном виде в html сделать шаблон сайта можно за полчаса, но вот разобраться с css и сделать в виде универсальной, настраиваемой темы друпала...
Уже день и только начал понимать как тут что.
Одного css не достаточно, чтобы сделать картинку во всю ширину страницы, у меня на фоне меню (Компания, услуги, цены) такая идёт?
Я к чему, т.е. нормально - при создании темы на drupal - делать "железные" изменения в page.tpl.php - например вставлять там картинки, писать какой-то конкретный текст?
Ничего более не трогая, указываю имя шрифта в layout.css, вот таким образом:
#site-name
{
font-family: Verdana;
}
Имя сайта выводится другим шрифтом, не зависимо от того что я меняю...
Интересно вообще, как бы кто-либо имеющий опыт работы с друпалом решал поставленную предо мной задачу... Скажите кто-нибудь, вы бы создавали свою тему? На основе zen'а? Кардинально меняли бы page.tpl.php? или достаточно небольших изменений + полное редактирование css?
Да, регионы и есть. Названия регионов и дивов не должны совпадать. Это я для простоты их одинаковыми написал в примере.
Вставлять в page.tpl.php картинки, конкретный текст - нормально. Важно, чтобы это редко изменялось только (а то у пользователей этот файл закешируется и изменения видны не будут)
digital_sword, спасибо большое.
Раз нормально, тогда можно сделать и "табличный" дизайн, без слоёв и без css.
Я раньше верстал таблицами, но сейчас div'ами верстаю. Думаю для CMS лучше ими.
Два первых шага:
1. Сверстать полностью дизайн - html css
2. Вставить в div'ы PHP-сниппеты какой-нибудь темы (можно garland), чтобы файлы tpl.php получились
А потом доверстывать уже получившуюся тему оформления, потихоньку наполняя сайт содержимым, добавляя функционал и т. д......
P.S.: Дизайн хороший. Рад за Вас, что Вы начинаете изучать Drupal с прикручивания такого дизайна.
AntonTau, спасибо.
Я постепенно пришёл к этому... Эх, если бы вы ответили часов на 6 раньше, возможно я бы уже дошёл до 2-го пункта...
Сейчас сверстаю на таблицах, без css. Потом попытаюсь осуществить ваш 2-ой пункт, только без div-ов...
Приятный он, не спорю, но сложный:)
AntonTau, спасибо. За ссылку отдельное спасибо.
Последний час я занимаюсь вод чем: снизу у сайта плавно должен цвет менятся. Я делаю это узенькую текстуру и устанавливаю её фоном строки таблицы, вот таким образом:
<tr height='378px' background=
<?php echo '"';
echo $directory;
echo '/footer.png"';
?>>
<td>
</td>
</tr>
</table>
Она должна быть всегда внизу страницы (какой длинно бы она не была) и за текстом.
Хорошо, заключаю эту таблицу в div, вот таким образом:
//здесь моя таблица
</div>
Да, она за текстом, она нужной ширины, но она не внизу страницы, если страница длинная, то она внизу того что влазит на экран, в моём случае это середина страницы...
Подскажите, как сделать чтобы слой был всегда внизу страницы?
Проблему слоя, который всегда должен быть снизу я решил следующим образом:
создал слой, в котором текст, вот так:
фишка в том что бы его сместить на слой снизу на нужное кол-во пикселей (top: 140px;)
<table width='100%'>
<tr>
<td>
Бла-бла-бла...
</td>
</tr>
</table>
</div>
Слой картинки, которая дожна частино лежать под ним:
(потому что она лежит под предыдущим слоем (он надвинут на неё) - у неё z-index на единицу меньше)
<table width='100%' height='100%'>
<tr height='378px' valign='top' background="footer.png">
<td>
</td>
</tr>
</table>
</div>
Но это ещё не всё! После такого верхний слой смешён на 140 пикселей, т.е. над ним 140 пикселей пустого пространства, теперь чтобы это компенсировать, засовываем оба слоя в слой с абсолютным позиционированием и помещаем его так чтобы его начало находилось над хедером (всё равно там 140 пикселей пустых, вот их и распологаем поверх хедера)
//Здесь слой с текстом
<div ...> ... </div>
//Здесь слой подкладываемой картинкой
<div ...> ... </div>
</div>
Вроде при разных размерах и окна и текста всё остаётся на каких и должно быть местах.
Фууууув.... Всё сделал полностью. Всё точно соответствует картинкам, все меню, материалы, блоки настраиваются из админки, добавлются новости и отображаются как нужно, работает поиск. В IE7, Opera 9, Mozilla 3 выглядить одинаково точно.
Сразу сверстал без css, потом переделал с использованием примитивного css.
Вобщем с момента как я узнал что существует Друпал - не многим более 50-ти часов чистой работы и я таки сделал этот сайт.
А взглянуть можно?
Нет, негде показать.
Мне не жалко, но технически он только у меня на локалке, я отдал закачкику - и что он дальше с ним делает я не в курсе и не знаю будет ли он когда-либо размещён в сети.