1. Главная
  2. Блоги
  3. Блог steel.ne

Создание новой темы. Часть шестая: правим block.tpl.php

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

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

CSS-only - это конечно хорошо и просто. Но вот например рассмотрим ситуацию - дизайнер грохнул кулаком по столу: надо круглые уголочки. Верстальщик напряг все свои знания CSS. И так крутил, и так крутил. Либо не везде работает, либо четвертый уголок некуда втулить. И идет он жаловаться программисту - ты типо что хочешь делай, но всунь мне еще один div.

Программист чешет репу, и, чтобы не патчить ядро и не иметь геморроя с обновлениями, решает создать новую тему.

Как создать отдельную тему на PhpTemplate? Очень просто. Создаем новый каталог в папочке /themes/ и следим, чтобы там появился хотя-бы файл page.tpl.php.

Проследить за этим мы сможем очень просто - скопируем всю папку /themes/bluemarine с новым именем /themes/newmarine.
Файл style.css возьмем из наших прошлых уроков, чтобы сохранить последовательность. Как обычно, заходим в админку, меняем тему по умолчанию на нашу новую, смотрим - все оки. Страничка полностью такая же как в конце прошлого урока. Ну только пути немного поменялись к логотипу и файлу стилей, но это ерунда.

А теперь - круглые уголки. Я выбрал один из извращенных методов (задание на дом - разобраться в чудесах верстки).

Меняем block.tpl.php до такого состояния:

  <div class="block block-<?php print $block->module; ?>" id="block-<?php print $block->module; ?>-<?php print $block->delta; ?>">
        <b class="rtop"> <b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
        <h2 class="title"><?php print $block->subject; ?></h2>
        <div class="content"><?php print $block->content; ?></div>
        <b class="rbottom"> <b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
 </div>

Добавляем в файл style.css такие строчки:

.rtop, .rbottom {
        display:block;
        background: #fff;
}
.rtop *, .rbottom * {
        display: block;
        height: 1px;
        overflow: hidden;
        background: #ddd;
}
.r1 {
        margin: 0 5px;
}
.r2{
        margin: 0 3px
}
.r3{
        margin: 0 2px;
}
.r4{
        margin: 0 1px; height: 2px;
}

и убираем рамку у класса .block:

.block {
        margin: 5px 0px;
        padding: 0px;
        background: #ddd;
}      

Обновляем страничку - вуаля!

Комментарии

Аватар пользователя Valeratal Valeratal 12 апреля 2007 в 10:13

хм, так вот и просто, только с помощью CSS можно сделать закругленные края у блоков?

Хотя ничего не понял, надо вчитываться

Аватар пользователя колбаса колбаса (не проверено) 14 апреля 2007 в 23:52

А что значит:
class="block block-module" или class="block block-module-1" ?

Почему например не
class="blockstyle" или class="blockstyle1"

Что значит такой формат?

Аватар пользователя Dan Dan 15 апреля 2007 в 1:21

> class="block block-module" или class="block block-module-1"
Каждый модуль добавляет свой класс.
В твоём примере, в блок (а это - отдельная сущность, которая может располагаться в регионе), был добавлен модулем block, номер блока (так называемая delta) - 1

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

> class="block block-module" или class="block block-module-1"

перечисление классов через пробел означает, что данный элемент наследует свойства и класса block (например общее оформление всех блоков, рамка там или уголки скругленные) и класса block-module (например хочу выделить блоки search цветом или каким-нить внутренним оформлением).

Аватар пользователя колбаса колбаса (не проверено) 16 апреля 2007 в 17:44

Спасибо.
Вот уж недумал даже что так можно писать в атрибуте тэга.
Я токо в .css файле так видел.

Аватар пользователя SadhooKlay SadhooKlay (не проверено) 27 апреля 2007 в 23:26

На самом деле, достаточно просто самому проверить как это работает:

### css
.a1 {color: red;}
.b1 (text-decoration: underline;)

## html
<h1 class="a1">Test</h1>
<h1 class="b1">Test</h1>
<h1 class="a1 b1">Test</h1>

Аватар пользователя Гость Гость (не проверено) 7 ноября 2007 в 19:00

хорошие заметки
однозначно +.

можно также на пальцах рассказать, как сделать свои меню?
например слева пункты меню делаются тремя вложенными друг в друга дивами,
вверху меню - таблицей, а внизу лежит меню третьего типа (да хер с ними, пусть будет примари линкс - все равно как им стили то менять) ?
т е как (где?) вместо ul/li сделать

пункт

и тп?

заранее спасибо,
G.

Аватар пользователя steel.ne steel.ne 8 ноября 2007 в 0:45

Если уж совсем хочется переделать все меню, то тогда делаем финт ушами под названием "переопределение функций".
По-английски читаем http://drupal.org/node/55126 и http://api.drupal.org/apis/5/theme_menu.

В принципе для начал рассмотрим функцию theme_menu_item

function theme_menu_item($mid, $children = '', $leaf = TRUE) {
  return '<li class="'. ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) .'">'. menu_item_link($mid) . $children ."</li>\n";
}

Поскольку мы условились, что работаем с темами, основанными на PHPTemplates, то в каталоге с нашей темой должен быть файл template.php
В нем определяем функцию с названием

phptemplate_menu_item($mid, $children = '', $leaf = TRUE) {
...
}

А что написать внутри... Наверное уже и так понятно )

Аватар пользователя Гость Гость (не проверено) 8 ноября 2007 в 12:39

Спасибо за быстрый ответ! Smile

зачем плодить сущности - дело в том, что не всегда меню легко и просто сверстать li-ми
если есть сложный бэкграунд, тянущийся по размеру названия - навесить стиль на li тупо не получица
вот например кусок для одного(!) пункта (не считая общей обвязки)

<div class="li">
<div class="cBlue">
<div class="bgT"><div class="bgL"><div class="bgR"><div class="bgTL"><div class="bgTR">
<div class="txt">Инструменты</div>
<div class="rel"><div class="h1px abs"><div class="bgL"><div class="bgR"><div class="under"></div></div></div></div></div>
</div></div></div></div></div>
</div>
</div>

спасибо за ссылки, но к сожалению в англ, тем паче в техническом, я не особо, потому и ищу ответы на русских сайтах. Smile

вопрос был немного в другом, как Разным меню задать Разные виды на одной странице.
ведь все блоки выводятся одним (как я понял) темплейтом. как сделать их несколько?
чтобы (к примеру) для левого меню сайта задавать свой стиль, админское меню оставалось как есть, верхнее меню в принципе по другому сделано, внутри запросто могут быть закладки или чтото подобное..
т е должны быть разные обвязки для меню, и разные обвязки для пунктов....
возможно следует написать отдельный блок с пхп кодом, самостоятельно выводящим меню (гасящим-негасящим активный пункт, раскрывающимся или нет в принципе), но тут я в полной прострации - откуда чего тянуть...... Sad

функцию буду поковырять, но как я понял, ТО, что она возвращает, уже лежит в обвязке ul, если просто запихать туда например div - strict идет лесом )))))

спасибо за ответ,
G.

Аватар пользователя steel.ne steel.ne 8 ноября 2007 в 16:56

ТО, что она возвращает, уже лежит в обвязке ul,
Эти функции как раз и генерируют всю обвязку. Просто рассмотрена была функция, выводящая конкретный пункт меню. В других - другая обвязка.

Аватар пользователя Гость Гость (не проверено) 12 ноября 2007 в 13:22

всем спасибо за ответы, но если честно, понятно далеко не все :-]

можно ли всю эту информацию объединить воедино - по шагам, как задаем свою площадку, какие *.tpl.php для этого создаем, какие функции и почему именно их переопределяем.

например, есть блок left_m и top_m. в первом - меню, верстаное дивами, во втором - таблами.
создаем block-user-left_m.tpl.php и block-user-top_m.tpl.php? или можно обойтись только template.php ??
какие в них функции должны быть? phptemplate_menu_item? а еще какие? почему, зачем?

заранее спасибо за ответы Smile
G.

Аватар пользователя Ash_Ketchum Ash_Ketchum 8 мая 2008 в 17:22

Использую модуль views для нескольких блоков со списками и хочу шаблон одного из них подправить.
Как правильно определить дельту нужного мне блока со списком (сам определяю методом тыка)?

Аватар пользователя oleg2106 oleg2106 28 июля 2008 в 15:18

Нет в файле block.tpl.php набираешь:
<?php print_r($block); ?>
И смотришь в браузере на страничку с блоком, он тебе все выдаст...

Аватар пользователя Dark_kz Dark_kz 10 декабря 2008 в 9:23

Как можно в цикле обратиться к каждому элементу сайдбара?
Хочу вывести под каждым пунктом сайдбара фоновую картинку и убрать значки пунктов (т.е. чтобы не было ни li). Как это сделать? (К примеру, для вывода $primary_links использовал цикл foreach, а для $sidebar'ов не получается. Сделал отдельный блок для вывода сайдбара, но не знаю как переопределить вывод каждого отдельного элемента.

module; ?>" id="block-<?php print $block->module; ?>-<?php print $block->delta; ?>">
<?php print $block->content;?>

//Ведь вывод делается просто print $block->content

в css написал (получается очень криво и не эффективно)
#sidebar-new {
background-image:url(картинко.jpg);
background-repeat:repeat-y;
background-position:top; }

Неужели для этого мне нужно будет в темплейте переопределять какую-то функцию?

Аватар пользователя Aemeth Aemeth 12 апреля 2009 в 12:00

"Проследить за этим мы сможем очень просто - скопируем всю папку /themes/bluemarine с новым именем /themes/newmarine."

В админке новый шаблон не появляется. Что не так?

Аватар пользователя v1adimir v1adimir 12 апреля 2009 в 14:47

Aemeth wrote:
"Проследить за этим мы сможем очень просто - скопируем всю папку /themes/bluemarine с новым именем /themes/newmarine."

В админке новый шаблон не появляется. Что не так?

мм.. а ты bluemarine.info переименовал и отредактировал?

Аватар пользователя Aemeth Aemeth 12 апреля 2009 в 15:50

О есть контакт, благодарю. Просто я первый день с Drupal'ом копаюсь сегодня. Ещё столько нужно понять. Не ест русскую кодировку в описании шаблона, как можно пофиксить? Sry за офф.топ.

Аватар пользователя v1adimir v1adimir 12 апреля 2009 в 16:18

Aemeth wrote:
Не ест русскую кодировку в описании шаблона, как можно пофиксить? Sry за офф.топ.

в поле "name" русская кодировка... не уверен, но в "description" -- 100% можно пользовать, при условии, что это utf8 без BOM. хотя в php5 последнее условие может быть уже и не актуально.