Необходимые пояснения: 

1) Инструкция рассчитана на новичков - тех, кто только начал осваивать Джумлу.
2) Она написана для Joomla 1.0 (поскольку я работала только с ней, и насколько сильно отличается 1.5 - не знаю)
3) предполагается, что вы хотя бы в общих чертах представляете себе, что такое CSS (каскадные таблицы стилей) и умеете их использовать на обычных HTML-страницах.

Во всех модулях Джумлы - как предустановленных, так и добавляемых, есть опция "суффикс класса CSS". Она позволяет задать индивидуальный стиль для модуля или статьи контента.

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

Почему именно суффикс? Ведь если бы мы писали CSS для обычного сайта, то просто бы сделали новый класс. В сущности, мы это и делаем, добавляя суффикс - создаем новый класс с новым именем.  Отличие от обычного HTML-сайта - что в текстах, выводимых на экран этот класс прописываем не мы, а программа Джумлы. А эта программа так написана, что новый класс должен называться не как попало, а точно так же как старый - но с добавлением какого-то текста в конце его имени. 

Имя старого класса, т.е. класса всех модулей Джумлы по умолчанию - table.moduletable. Это класс, определяющий вид самой таблицы модуля. А есть еще отдельные записи в CSS файле для его заголовка -  table.moduletable th  и для ячейки таблицы внутри модуля - table.moduletable td.

Вот на основе их мы и должны создать свой индивидуальный стиль для модуля. 

Итак, что делать?

Все изменения удобнее вносить и тестировать на локальной копии сайта на Денвере. Только убедитесь, что вы правите нужный файл CSS - т.е., что он лежит в папке вашего локального шаблона. 

Шаг 1.  Идем в админку - модули сайта, открываем для редактирования нужный модуль. Добавляем любой суффикс - удобнее, когда он начинается с подчерка или дефиса, чтобы потом самим не путаться. В нашем примере я добавила _mylist.

Дальше там же отменяем кэширование или ставим время кэша 0 - это действие необходимо на время настройки стиля, иначе вы будете видеть кэшированный модуль, а не результат внесенных изменений.

Смотрим на сайт. Ничего не изменилось? А с чего бы ему меняться, если мы ещё не сделали самое важное - не добавили новый класс в файл CSS стилей шаблона. 

Шаг 2.  Идем в каталог папок джумлы и находим файл стилей. TEMPLATES - ВАШ ШАБЛОН - CSS - template_css.css.

Первое, что делаем перед всеми изменениями (это касается не только СSS, но и изменений в любых файлах, например index.php шаблона)  - сохраняем копию файла под другим именем, например template_css.txt. Теперь, если что-то вдруг получится не так, всегда можно вернуться к прежнему состоянию.

Другой, более радикальный путь подстраховаться - сделать бэкап всего сайта на сервере перед тем, как вы начнете там что-то менять. 

Шаг 3.   Открываем файл template_css.css на локальном компьютере в любом текстовом редакторе и вносим дополнения.

Сначала надо в нем найти то место, где определяется стиль модулей.

Оно выглядит так (привожу пример из своего шаблона, в других свойства будут другими, но шапка - селектор та же самая, например, table.moduletable: 

Cтандартный код

 
 /*#############  МОДУЛИ #############*/

 
 table.moduletable { /* Стиль таблицы модуля */
   margin: 0px 3px 10px 3px;  /* поля вокруг модуля - 
верх правое нижнее левое */
   width:  96%;  /* ширина таблицы модуля */
   border: 1px solid #5F6A79;   /* видимая черная рамка */
   background-color: #FFFFFF;  /* белый цвет фона */
   }

 
 table.moduletable th  {     /* Стиль заголовка модуля */
   color: #FFFFFF;        /* белый цвет шрифта */
   background-color: #5F6A79;  /* темный цвет фона */
   border-top: 1px solid #848E9C; /* цвет рамки сверху */
    }

 
 table.moduletable td  {   /* Стиль ячейки таблицы модуля */
 padding: 1px 1px 5px 2px; /* отступы текста от рамки */
    }

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

Зачем копировать? Но ведь старый класс - просто .moduletable безо всяких суффиксов - у вас тоже должен остаться! Впрочем, если вы хотите изменить вид  ВСЕХ модулей сайта - то надо менять свойства этого класса, а не заводить новый.

Даем скопированному закомментированный заголовок - чтобы потом не забыть, что вставляли.

Вот так:  /*  КОММЕНТАРИЙ - МОЙ КЛАСС ДЛЯ МОДУЛЕЙ СО СПИСКАМИ  */ 

Дальше к каждому селектору - для самого модуля, его заголовка и его ячейки, добавляем свой суффикс - в точности тот же, который вы проставили в настройках модуля в админке. В нашем примере это будет  _mylist  (раз в настройках я проставила с подчерком, то и здесь делаю точно так же) - см. пример ниже.

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

Не забудьте - в новом классе .moduletable_mylist все те свойства старого, которые мы хотим сохранить, должны быть оставлены! (для этого мы и создавали его копированием). Ведь для системы это просто ДРУГОЙ класс, он не наследует свойств нашей старой .moduletable. 

А вот ненужные свойства можно убрать или заменить. А также добавить любые новые - для тэгов внутри модуля, например тэга а или ul и li

Код своего стиля для таблиц с суффиксом _mylist

 
  /*#####  МОЙ КЛАСС ДЛЯ МОДУЛЕЙ СО СПИСКАМИ _mylist  #####*/

 
 table.moduletable_mylist {
   margin: 0px 3px 10px 3px;
   width: 100%;
   border: 1px solid #5F6A79;
   background-color: #FFFFFF;  
    }

 
 table.moduletable_mylist th  {
   color: #FFFFFF;
   background-color: #5F6A79;
   border-top: 1px solid #848E9C;
    }

 
 table.moduletable_mylist td  {
   padding: 1px 1px 5px 2px;
   float: left; 
    }

 
/* ДОБАВЛЯЮ ПРАВИЛА ДЛЯ СПИСКА ul ВНУТРИ МОДУЛЯ c cуффиксом _mylist */

 
 table.moduletable_mylist ul  {
   list-style: disc outside;    /* круглый выступающий маркер */
   padding: 0px 2px 0px 20px;   /* Отступы списка со всех сторон */
   margin-left: 5px;       /* Поле от левого края модуля */
    }

 
 table.moduletable_mylist li > ul {  /* правила для дочернего списка 
второго уровня */
   list-style  : circle outside; /* прозрачный маркер */
    }

Из примера видно, что в новом классе можно не только изменить описание тех свойств модуля, которые были заданы в исходном стиле, но и добавить новые правила - например, для списка ul внутри модуля.  

Шаг 4, последний.  Убедившись, что на локальном сервере все выглядит, как надо, проверяем вид в разных браузерах (они, конечно, у вас есть - как минимум, IE, FireFox и Opera), если надо, то что-то исправляем.

Копируем измененный файл стилей на сервер в папку своего шаблона (туда, откуда мы его взяли). Проверяем. Не работает? А вы не забыли дописать суффикс к нужным модулям через админку на сайте?

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

Если все равно ничего не получилось - все стираем, возвращаем на место старый файл стилей и идем читать учебники. Какие? Ну,  для начала такие:

Полезные ссылки:

Основы CSS  в учебнике Влада Мержевича

Очень многое вы найдете на его сайте

Просто о сложном в CSS - dikarka.ru

Ну, и специально для Джумлы - полное описание файла CSS шаблона Джумлы

 

И некоторые технические средства, сильно облегчающие жизнь

Если у вас браузер Mozilla FireFox (а он у вас должен быть, если вы делаете сайт), установите в нем Firebug. Открываем браузер, забиваем в адресную строку http://getfirebug.com/ видим Firebug 1.3 - и жмем кнопку "Установить". После чего перезагружаем браузер и находим Firebug в меню ИНСТРУМЕНТЫ - ДОПОЛНЕНИЯ. Кроме того в правом нижнем углу появился маленький жучок - это тоже он. Открываем жучка через меню или эту иконку и экспериментируем с кнопкой Inspect - щелкаем по ней мышью, после чего выделяем интересующий нас элемент на экране. Внизу вы увидите его html код, а в правом окне Firebug-a - относящиеся к этому элементу стили css.

 

Второй инструмент, позволяющий увидеть, например, границы всех таблиц и их ячеек в шаблоне сайта - это Web Developer. Устанавливается точно так же, как Firebug - через поиск дополнений на https://addons.mozilla.org/ru/firefox/.

 

Кстати, потренировавшись на создании модулей со своими суффиксами и изменении их вида, вы можете покуситься и на стандартный вид модулей, заданный в вашем шаблоне - т.е. на сам класс table.moduletable, меняя его свойства на свой вкус.

На этом сайте новые классы заданы для всех модулей с маркированными и немаркированными списками - каталога файлов (в подвале сайта), последних новостей и комментариев (на главной справа).