Меняем вид списка категорий Редактируем шаблон Разбиваем список на колонки
Просмотры: 31737 Обновлено 21.08.2024 13:59 Создан: 12.01.2011 18:02
< < |
---|
Нередко стандартные методы оформления в Joomla заставляют нас задуматься о других способах расположения и дизайна контента на сайте. Не исключением стал и шаблон списка категорий. Эта статья поможет Вам изменить внешний вид шаблона списка категорий, на ее основе Вы сможете расположить список категорий в одну, две или даже в три колонки.
Благодаря изменениям в файлах шаблона списка категорий и правки css шаблона сайта, будет убран "фильтр" и "количество строк" в заголовке таблицы. Изображения категорий станут кликабельным и по ним можно будет попадать сразу в категорию.
Сосредоточились? Вперед!
За оформление и формирование контента материалов отвечает стандартный компонент com_content. Чтобы реализовать задуманное, необходимо будет изменить некоторые файлы шаблона. С подробным описанием стандартного компонента com_content можно ознакомиться здесь.
Файл, в котором нам потребуется изменить скрипт лежит в корневой папке сайта:
components\com_content\views\section\tmpl\default.php
Небольшое замечание: Иногда при использовании некоторых шаблонов для сайта файл default.php может лежать в папке самого шаблона. К примеру в templates\папка шаблона\html\com_content\section\default.php
Перед началом правки сделайте обязательно резервную копию файла!
1. Меняем код файла default.php на следующий:
<?php // no direct access
defined('_JEXEC') or die('Restricted access');
$cparams =& JComponentHelper::getParams('com_media');
?>
<?php if ($this->params->get('show_page_title', 1)) : ?>
<div class="componentheading<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>">
<?php echo $this->escape($this->params->get('page_title')); ?>
</div>
<?php endif; ?>
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="contentpane<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>">
<tr>
<td valign="top" class="contentdescription<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>" colspan="2">
<?php if ($this->params->get('show_description_image') && $this->section->image) : ?>
<img src="/<?php echo $this->baseurl . '/' . $cparams->get('image_path') . '/'. $this->section->image;?>" align="<?php echo $this->section->image_position;?>" hspace="6" alt="<?php echo $this->section->image;?>" />
<?php endif; ?>
<?php if ($this->params->get('show_description') && $this->section->description) : ?>
<?php echo $this->section->description; ?>
<?php endif; ?>
</td>
</tr>
<tr>
<td colspan="2">
<?php if ($this->params->get('show_categories', 1)) : ?>
<ul id="category-list">
<?php foreach ($this->categories as $category) : ?>
<?php if (!$this->params->get('show_empty_categories') && !$category->numitems) continue; ?>
<li>
<a href="/<?php echo $category->link; ?>" class="category">
<?php echo $this->escape($category->title);?></a>
<?php if ($this->params->get('show_cat_num_articles')) : ?>
<span class="small">
( <?php if ($category->numitems==1) {
echo $category->numitems ." ". JText::_( 'item' );}
else {
echo $category->numitems ." ". JText::_( 'items' );} ?> )
</span>
<?php endif; ?>
<?php if ($this->params->def('show_category_description', 1) && $category->description) : ?>
<br />
<a href="/<?php echo $category->link; ?>" title="<?php echo $this->escape($category->title);?>">
<?php echo $category->description; ?>
</a>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</td>
</tr>
</table>
Сохраняем.
2. Открываем файл шаблона CSS. Вы сможете его найти в панели администратора в меню Extensions (Расширения) | Templates (Шаблоны).
В конец файла добавляем следующие строки:
ul#category-list li {float:left}
ul#category-list {list-style:none; padding:0; font-weight: bold;}
ul#category-list li {float: left; width: 42%; text-align: center; height: 160px}
Сохраняем.
Можете поэкспериментировать со значениями width: 42% и height: 160px, это повлияет на количество колонок и их размер.
3. Ну и наконец, избавимся от "фильтра" и "нумерации строк":
Для этого будем менять содержимое файла
\components\com_content\views\category\tmpl\default_items.php
Перед началом правки сделайте обязательно резервную копию файла!
Меняем на следующий код:
<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<script language="javascript" type="text/javascript">
function tableOrdering( order, dir, task )
{
var form = document.adminForm;
form.filter_order.value = order;
form.filter_order_Dir.value = dir;
document.adminForm.submit( task );
}
</script>
<form action="<?php echo $this->action; ?>" method="post" name="adminForm">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<?php foreach ($this->items as $item) : ?>
<tr class="sectiontableentry<?php echo ($item->odd +1 ) . $this->escape($this->params->get('pageclass_sfx')); ?>" >
<td align="center">
<?php echo $this->pagination->getRowOffset( $item->count ); ?>
</td>
<?php if ($this->params->get('show_title')) : ?>
<?php if ($item->access <= $this->user->get('aid', 0)) : ?>
<td>
<a href="/<?php echo $item->link; ?>">
<?php echo $this->escape($item->title); ?></a>
<?php $this->item = $item; echo JHTML::_('icon.edit', $item, $this->params, $this->access) ?>
</td>
<?php else : ?>
<td>
<?php
echo $this->escape($item->title).' : ';
$link = JRoute::_('index.php?option=com_user&view=login');
$returnURL = JRoute::_(ContentHelperRoute::getArticleRoute($item->slug, $item->catslug, $item->sectionid), false);
$fullURL = new JURI($link);
$fullURL->setVar('return', base64_encode($returnURL));
$link = $fullURL->toString();
?>
<a href="/<?php echo $link; ?>">
<?php echo JText::_( 'Register to read more...' ); ?></a>
</td>
<?php endif; ?>
<?php endif; ?>
<?php if ($this->params->get('show_date')) : ?>
<td>
<?php echo $item->created; ?>
</td>
<?php endif; ?>
<?php if ($this->params->get('show_author')) : ?>
<?php endif; ?>
<?php if ($this->params->get('show_hits')) : ?>
<?php endif; ?>
</tr>
<?php endforeach; ?>
<?php if ($this->params->get('show_pagination')) : ?>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td align="center" colspan="4" class="sectiontablefooter<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>">
<?php echo $this->pagination->getPagesLinks(); ?>
</td>
</tr>
<tr>
<td colspan="5" align="right">
<?php echo $this->pagination->getPagesCounter(); ?>
</td>
</tr>
<?php endif; ?>
</table>
<input type="hidden" name="id" value="<?php echo $this->category->id; ?>" />
<input type="hidden" name="sectionid" value="<?php echo $this->category->sectionid; ?>" />
<input type="hidden" name="task" value="<?php echo $this->lists['task']; ?>" />
<input type="hidden" name="filter_order" value="" />
<input type="hidden" name="filter_order_Dir" value="" />
<input type="hidden" name="limitstart" value="0" />
<input type="hidden" name="viewcache" value="0" />
</form>
Сохраняем, обновляем страницу сайта и наслаждаемся результатом.
До новых встреч!
- JComments Бесплатный компонент комментариев к статьям для Joomla
- GeSHi Бесплатный плагин подсветки синтаксиса программного кода для Joomla и Kunena
- Easy Syntax Highlighter Оформление в статье Joomla листинга программного кода
У нас программы можно скачать по прямой ссылке, бесплатно и без регистрации! |
Комментарии и отзывы
Не удалось найти указанных файлов в этих папках.
ul#category-list {list-style:none; padding:0; font-weight: bold;}
ul#category-list li {float: left; width: 42%; text-align: center; height: 160px}
очень нужно, спасибо!
RSS лента комментариев этой записи