Иконка перед каждой строкой таблицы содержимого категории

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем Doga, 08.08.2007.

Статус темы:
Закрыта.
  1. Doga
    Offline

    Doga Недавно здесь

    Регистрация:
    24.04.2007
    Сообщения:
    7
    Симпатии:
    1
    Всем привет!
    Требуется перед каждой строкой таблицы содержимого категории поставить маленькую иконку, типа стрелочки, что бы содержимое категории (таблица) выглядело так же как и содержимое раздела (список). Пока удалось только поставить иконки в каждой ячейке таблицы, т.е. в строке несколько таких иконок - явный перебор. Возможно ли такое вообще, и, если возможно, то в какую сторону копать ?
     
  2.  
  3. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    629
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Иконка перед каждой строкой таблицы содержимого категории

    За время работы с CMS Joomla! убедился в том, что в плане тех вещей, которые отвечают за внешний вид страницы, в ней возможно абсоолютно все! Вопрос лишь в том, что конкретно тебе нужно организовать на странице, покажи визуальный пример, и, если это реализуемо при помощи правки кода HTML/CSS, обязательно помогу.
     
  4. Doga
    Offline

    Doga Недавно здесь

    Регистрация:
    24.04.2007
    Сообщения:
    7
    Симпатии:
    1
    Ответ: Иконка перед каждой строкой таблицы содержимого категории

    Всем привет!
    Пока удалось поставить одну стрелочку перед названием статьи. Но перед колонкой названий в таблице категории находится колонка с датой публикации, по этому стрелочка в середине таблицы смотрится коряво. Как эту стрелочку расположить в начале строки таблицы, или, хтя-бы поменять колонки местами?
    Иконку ставил бакграундом в CSS шаблона в классах .sectiontableentry1 a и .sectiontableentry2 a
    Картинка:
     

    Вложения:

    Последнее редактирование: 09.08.2007
  5. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    629
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Иконка перед каждой строкой таблицы содержимого категории

    Теперь все постепенно само-собой начинает вырисовываться. За вывод содержимого страниц сайта отвечает компонент com_content - это известный всем факт, которым не удивишь. Так вот, в 'content.html.php' со строки 285, по идее, начинается код вывода того, что ты используешь в работе своего проекта.
    Код (CODE):
    1. <tr class="sectiontableentry<?php echo ($k+1) . $params->get( 'pageclass_sfx' ); ?>" >
    2.     <?php
    3.     if ( $params->get( 'date' ) ) {
    4.         ?>
    5.         <td>
    6.         <?php echo $row->created; ?>
    7.         </td>
    8.         <?php
    9.     }

    Непонятно пока только то, каким именно образом классу sectiontableentry на конце присваиваются те или иные значения, ну, да, я думаю, и не проблема - с этим ты без труда сможешь разобраться впоследствие, проанализировав HTML-код сгенерированной в браузере страницы.

    Теперь непосредственно о самой реализации того, что тебе понадобилось. Через наследование тегом <td></td> свойств класса sectiontableentry, присвоенного тегу <tr></tr>, внутри которого как раз заключены ячейки с датой публикации и названием статьи - сделать это не получится, поэтому будем вносить изменения непосредственно в 'content.html.php'. Советую оставить, как есть, класс sectiontableentry у тега <tr></tr>, а тегу <td></td>, внутри которого выводится дата, присвоить свой собственный уникальный класс, например sectiontabledate. Код страницы и находящийся в файле каскадных таблиц стилей класс, определяющий внешний вид ячейки с датой публикации статьи будут иметь вид.
    Код (CODE):
    1. <tr class="sectiontableentry<?php echo ($k+1) . $params->get( 'pageclass_sfx' ); ?>" >
    2.     <?php
    3.     if ( $params->get( 'date' ) ) {
    4.         ?>
    5.         <td[COLOR="YellowGreen"] class="sectiontabledate"[/COLOR]>
    6.         <?php echo $row->created; ?>
    7.         </td>
    8.         <?php
    9.     }

    Код (CODE):
    1. td.sectiontabledate {
    2.     height: 16px;
    3.     background: url(../images/arrow.gif) no-repeat 0;
    4.     font-size: 12px;
    5.     line-height: 12px;
    6.     padding: 2px 0 2px 20px;
    7. }

    Изображение стрелочки 'arrow.gif' нужно будет загрузить в папку '/images/' используемого тобой шаблона, а затем в зависимости от того, какого размера у тебя шрифт страницы и размеры картинки, настроить класс td.sectiontabledate. Свой пример я писал для шрифта высотой 12px и изображения .gif 16x16. Желаю удачи!
     
    Последнее редактирование: 09.08.2007
  6. Doga
    Offline

    Doga Недавно здесь

    Регистрация:
    24.04.2007
    Сообщения:
    7
    Симпатии:
    1
    Ответ: Иконка перед каждой строкой таблицы содержимого категории

    Идею понял. Но иконки стрелок решил делать в специальной отдельной колонке, собственно которую и добавил в функцию вывода таблицы.
    Всё работает как надо! :D
    Спасибо AmmiAk!
     
  7. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    629
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Иконка перед каждой строкой таблицы содержимого категории

    Doga, как скажешь - на все твоя воля! :) За наводку - всегда пожалуйста.
     
Статус темы:
Закрыта.

Поделиться этой страницей

Загрузка...