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

Прислано: steel.ne

ср, 11/04/2007 - 16: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 в чт, 12/04/2007 - 06:13.

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

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


Опубликовано marazmus в чт, 12/04/2007 - 07:14.

Вот здесь очень большой список ссылок на разные методы создания загругленных углов для блоков. Язык английский.


Опубликовано колбаса (гостевой логин) в сб, 14/04/2007 - 19:52.

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

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

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


Опубликовано Dan в сб, 14/04/2007 - 21:21.

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


Опубликовано steel.ne в вс, 15/04/2007 - 07:08.

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

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


Опубликовано колбаса (гостевой логин) в пн, 16/04/2007 - 13:44.

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


Опубликовано SadhooKlay (гостевой логин) в пт, 27/04/2007 - 19: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>


Опубликовано Гость (гостевой логин) в ср, 07/11/2007 - 16:00.

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

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

пункт

и тп?

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


Опубликовано steel.ne в ср, 07/11/2007 - 21:01.

ul/li - это такие же блоки как и div, только называются по-другому. Зачем плодить сущности без надобности?


Опубликовано steel.ne в ср, 07/11/2007 - 21: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) {
...
}

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


Опубликовано Гость (гостевой логин) в чт, 08/11/2007 - 09:39.

Спасибо за быстрый ответ! :-)

зачем плодить сущности - дело в том, что не всегда меню легко и просто сверстать 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>

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

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

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

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


Опубликовано vadbars@drupal.org в чт, 08/11/2007 - 10:38.

ведь все блоки выводятся одним (как я понял) темплейтом.
Не совсем так. Вы можете переопределить шаблоны для блоков - http://drupal.org/node/104319


Опубликовано steel.ne в чт, 08/11/2007 - 13:56.

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


Опубликовано steel.ne в чт, 08/11/2007 - 14:01.

например, уже понятно что менять в функции? ))

function theme_menu_tree($pid = 1) {
if ($tree = menu_tree($pid)) {
return "\n

    \n". $tree ."\n

\n";
}
}


Опубликовано Гость (гостевой логин) в пн, 12/11/2007 - 10:22.

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

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

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

заранее спасибо за ответы :-)
G.


Опубликовано Valeratal в ср, 20/02/2008 - 20:08.

а можно ли простоым способом сделать заголовок блока другим цветом?


Опубликовано Ash_Ketchum в чт, 08/05/2008 - 13:22.

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


Опубликовано oleg2106 в пн, 28/07/2008 - 11:18.

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


Опубликовано Splinter в ср, 29/10/2008 - 08:58.

не знаю сколько бы я потратил время на создание своей первой темы, если бы не автор! Респект!


Опубликовано Dark_kz в ср, 10/12/2008 - 06:23.

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

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

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

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

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


Опубликовано Aemeth в вс, 12/04/2009 - 08:00.

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

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


Опубликовано Химический Али в вс, 12/04/2009 - 08:40.

Да, скорее всего, 6-й друпал :)


Опубликовано Aemeth в вс, 12/04/2009 - 08:42.

Ну разумеется)


Опубликовано v1adimir в вс, 12/04/2009 - 10:47.

Aemeth написал(а):

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

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

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


Опубликовано Aemeth в вс, 12/04/2009 - 11:50.

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


Опубликовано v1adimir в вс, 12/04/2009 - 12:18.

Aemeth написал(а):

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

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


Опубликовано Aemeth в вс, 12/04/2009 - 12:43.

Ну выходит что нельзя. :(


Опубликовано v1adimir в вс, 12/04/2009 - 13:39.

можно! я проверил, работает и для "name" и для "description".


Опубликовано Aemeth в вс, 12/04/2009 - 13:46.

Почему же тогда у меня не работает?


Опубликовано v1adimir в вс, 12/04/2009 - 14:00.

приатачь сюда зазипованный .info


Опубликовано Aemeth в вс, 12/04/2009 - 14:07.

Вот.


Опубликовано v1adimir в вс, 12/04/2009 - 14:28.

этот файл у тебя в кодировке cp1251, чтож ты от него хотел? невнимальтельно читаешь советы...


Опубликовано Aemeth в вс, 12/04/2009 - 14:32.

Прости, постараюсь больше не тормозить. Спасибо за помощь.


Новое на сайте

Ссылки партнёров