Biologii.Net - Как добавить суффикс CSS к модулю в Joomla

Во всех модулях Джумлы - как предустановленных, так и добавляемых, есть опция "суффикс класса 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:

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

 
 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), если надо, то что-то исправляем.

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

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

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

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

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

Написал Administrator
14.06.2009
Необходимые пояснения: 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, меняя его свойства на свой вкус. На этом сайте новые классы заданы для всех модулей с маркированными и немаркированными списками - каталога файлов (в подвале сайта), последних новостей и комментариев (на главной справа).
Последнее обновление ( 02.03.2010 )