16 сентября 2009 в 21:21
Всем привет!
Делаю свой первый сайт на друпал.
Уже вроде как сделал, но заказчику в последний момент захотелось чтобы меню услуг было с закругленными углами по типу логотипа сайта, сейчас пункты меню просто отделяются прямой линией, а требуется чтобы каждый пункт меню был обрамлен прямоугольником с круглыми углами и чтобы между пунктами был небольшой разрыв.
Как сделать закругленную таблицу с нуля знаю -> фотошоп -> рисование закругленного прямоугольника с последующей вырезкой углов -> создание таблицы с несколькими доп. строками в которые и засовываются вырезанные углы.
Но вот как сделать это в моем случае не могу додумать. Ведь меню у меня - это список терминов taxonomy_list. Что и где там править не нашел 
Буду благодарен за любые идеи!
Заранее спасибо!
Комментарии
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
Сама технология понятна, но как её внедрить в друпал, ведь в taxonomy_list вроде как таблица генерируется соответствующим модулем.
Как туда засунешь дополнительные дивы или строки???
тематизация строк таблицы.
Наверное таки темизация пунктов меню.
Но в любом случае. Ставим модуль [module=devel]. Включаем в нем theme developer (сперва блок со ссылками в колонку сайта поставьте). Щелкаем в плавающем блоке галочку, потом выделяем нужное место в меню и получаем название функции темизации для которая выводит данный кусок кода. Рядом будут написаны названия функций, которыми можно перехватить этот вывод. Берем код исходной функции, обзываем его как рекомендовано и копипастим в файл темы template.php. Далее правим, как хотим, добавив несколько слоев для уголков.
Спасибо! Буду пробовать, не работал раньше с devel.
Делаю всё по инструкции: За вывод отвечает функция theme_table(), щелкаю по плавающему окну devel по названию этой функции -> меня переводит на сайт
http://api.drupal.org/api/function/theme_table/6, где расписана эта функция:
function theme_table($header, $rows, $attributes = array(), $caption = NULL) {
// Add sticky headers, if applicable.
if (count($header)) {
drupal_add_js('misc/tableheader.js');
// Add 'sticky-enabled' class to the table to identify it for JS.
// This is needed to target tables constructed by this function.
$attributes['class'] = empty($attributes['class']) ? 'sticky-enabled' : ($attributes['class'] .' sticky-enabled');
}
$output = '<table'. drupal_attributes($attributes) .">\n";
if (isset($caption)) {
$output .= '<caption>'. $caption ."</caption>\n";
}
// Format the table header:
if (count($header)) {
$ts = tablesort_init($header);
// HTML requires that the thead tag has tr tags in it follwed by tbody
// tags. Using ternary operator to check and see if we have any rows.
$output .= (count($rows) ? ' <thead><tr>' : ' <tr>');
foreach ($header as $cell) {
$cell = tablesort_header($cell, $header, $ts);
$output .= _theme_table_cell($cell, TRUE);
}
// Using ternary operator to close the tags based on whether or not there are rows
$output .= (count($rows) ? " </tr></thead>\n" : "</tr>\n");
}
else {
$ts = array();
}
// Format the table rows:
if (count($rows)) {
$output .= "<tbody>\n";
$flip = array('even' => 'odd', 'odd' => 'even');
$class = 'even';
foreach ($rows as $number => $row) {
$attributes = array();
// Check if we're dealing with a simple or complex row
if (isset($row['data'])) {
foreach ($row as $key => $value) {
if ($key == 'data') {
$cells = $value;
}
else {
$attributes[$key] = $value;
}
}
}
else {
$cells = $row;
}
if (count($cells)) {
// Add odd/even class
$class = $flip[$class];
if (isset($attributes['class'])) {
$attributes['class'] .= ' '. $class;
}
else {
$attributes['class'] = $class;
}
// Build row
$output .= ' <tr'. drupal_attributes($attributes) .'>';
$i = 0;
foreach ($cells as $cell) {
$cell = tablesort_cell($cell, $header, $ts, $i++);
$output .= _theme_table_cell($cell);
}
$output .= " </tr>\n";
}
}
$output .= "</tbody>\n";
}
$output .= "</table>\n";
return $output;
}
?>
Именно этот код копипастить? Я правильно понял? И подскажите пожалуйста что значит:
Странно как-то, у вас для вывода меню таблица применяется...
Там многоуровневый список обычно
А, понял. Ищите темизацию taxonomy-list-item или что-то в этом роде.
Таблицу темизировать не надо, а то у вас все таблицы будут с закругленными уголками
тематизировать надо не общие стили (таблицы, списки), а функцию вывода этого самого.
Теперь я совсем запутался
Так у меня при наведении курсора на блок меню "Услуги" в DEVEl отображается именно theme_table()
Так и не понял как определить именно таблицу которая относится к taxanomy_list, поэтому переопределил общую.
В общем пока дошел до этого:
// Add sticky headers, if applicable.
if (count($header)) {
drupal_add_js('misc/tableheader.js');
// Add 'sticky-enabled' class to the table to identify it for JS.
// This is needed to target tables constructed by this function.
$attributes['class'] = empty($attributes['class']) ? 'sticky-enabled' : ($attributes['class'] .' sticky-enabled');
}
$output = '<table'. drupal_attributes($attributes) .">\n";
if (isset($caption)) {
$output .= '<caption>'. $caption ."</caption>\n";
}
// Format the table header:
if (count($header)) {
$ts = tablesort_init($header);
// HTML requires that the thead tag has tr tags in it follwed by tbody
// tags. Using ternary operator to check and see if we have any rows.
$output .= (count($rows) ? ' <thead><tr>' : ' <tr>');
foreach ($header as $cell) {
$cell = tablesort_header($cell, $header, $ts);
$output .= _theme_table_cell($cell, TRUE);
}
// Using ternary operator to close the tags based on whether or not there are rows
$output .= (count($rows) ? " </tr></thead>\n" : "</tr>\n");
}
else {
$ts = array();
}
// Format the table rows:
if (count($rows)) {
$output .= "<tbody>\n";
$flip = array('even' => 'odd', 'odd' => 'even');
$class = 'even';
foreach ($rows as $number => $row) {
$attributes = array();
// Check if we're dealing with a simple or complex row
if (isset($row['data'])) {
foreach ($row as $key => $value) {
if ($key == 'data') {
$cells = $value;
}
else {
$attributes[$key] = $value;
}
}
}
else {
$cells = $row;
}
if (count($cells)) {
// Add odd/even class
$class = $flip[$class];
if (isset($attributes['class'])) {
$attributes['class'] .= ' '. $class;
}
else {
$attributes['class'] = $class;
}
// Build row
$output .= ' <tr'. drupal_attributes($attributes) .'>
<td height="13px "class="tl" > </td>
<td class="borderTop"> </td>
<td class="tr"> </td>
</tr>'
.' <tr'. drupal_attributes($attributes) .' >'
.'<td class="borderLeft"> </td>';
$i = 0;
foreach ($cells as $cell) {
$cell = tablesort_cell($cell, $header, $ts, $i++);
$output .= _theme_table_cell($cell);
}
$output .= '<td class="borderRight"> </td>'
.' <tr'. drupal_attributes($attributes) .'>
<td height="9px" class="bl"> </td>
<td class="borderBottom"> </td>
<td class="br"> </td>
</tr>'
.' </tr>'
.'<tr><td height="10px" width="100%" colspan=3></td></tr>';
}
}
$output .= "</tbody>\n";
}
$output .= "</table>\n";
return $output;
}
CSS
.br {background: url(images/corners/br.gif) 100% 100% no-repeat}
.tl {background: url(images/corners/tl3.gif) 0 0 no-repeat}
.tr {background: url(images/corners/tr2.gif) 100% 0 no-repeat}
.borderTop {background: url(images/corners/bd.gif) repeat-x}
.borderBottom {border-bottom: 1px solid}
.borderLeft {border-left: 1px solid}
.borderRight {border-right: 1px solid}
Всё получилось нормально, беда только теперь с шириной блока в котором выводится меню, ведь он стал на 20px больше т.к. при рисовании закругленных углов с каждой стороны добавилось по 10 px
Блин а в IE вообше лажа - в ФФ3 и опере бордер нормально прилегает к закругленным рисункам - а в IE отступы около 5 пикселей. ППЦ............
эх, ну заставил ты меня взглянуть на этот модуль.
перетематизируй theme_taxonomy_list_get_table
Вот и я про тоже...
Что не table там.
Но по моему надо искать темизацию отдельных пунктов.
Тоже посмотрел... Лучше все-таки темизировать theme_taxonomy_list_term.
В первую строчку добавить четыре div для обертки с классами .bl, .br, .tl, .tr, а в предпоследнюю четыре закрывающих div.
угу, так даже лучше. но всё таки table