Css класс заголовка модуля как изменить

0 Пользователей и 1 Гость просматривают эту тему.

<div class="custom<?php echo $moduleclass_sfx ?>" <?php if ($params->get('backgroundimage')) : ?> style="background-image:url(<?php echo $params->get('backgroundimage');?>)"<?php endif;?> >
	<?php echo $module->content;?>
</div>

echo "<h3 class="page-header">" . $module->title . "</h3>";

function modChrome_beezDivision($module, &$params, &$attribs)
{
	$headerLevel = isset($attribs['headerLevel'])? (int) $attribs['headerLevel'] : 3;
	if (!empty ($module->content)) { ?>
<div class="moduletable<?php echo htmlspecialchars($params->get('moduleclass_sfx')); ?>">
<?php if ($module->showtitle) { ?> <h<?php echo $headerLevel; ?>><span
	class="backh"><span class="backh2"><span class="backh3"><?php echo $module->title; ?></span></span></span></h<?php echo $headerLevel; ?>>
<?php }; ?> <?php echo $module->content; ?></div>
<?php };
}

.moyclass h3 {color:#f00}

.moduletable h3 {color"#333}

div.moyclass h3 {color:#f00}

echo '<pre>';
print_r($module);
echo '</pre>';

echo  jutility::dump($module);

В Joomla есть один очень мощный инструмент стилизации, о котором многие не знают. Он называется «Суффикс CSS-класса модуля». Звучит страшно, особенно для новичков. Но понимая, как работает этот механизм, в сочетании со знанием CSS-стилей, можно отображать модули на странице так, так душе угодно. В этой статье я подробно расскажу про работу с CSS-суффиксом модулей, а также приведу пример его использования в Joomla.

Прежде всего стоит упомянуть, что суффикс класса модуля одинаково может применяться как в Joomla 3, так и в более ранних версиях CMS. Мы рассмотрим пример в Joomla 2.5. В Joomla 3 и Joomla 4 всё работает точно также.

Начнем с постановки задания. Предположим, что заказчик хочет, чтобы модули в правой колонке сайта имели следующие особенности:

1. Располагались не друг под другом, а со сдвигом влево и чередованием;
2. Чередовались между прямыми и скругленными углами;
3. Заголовки модулей, как и рамки, обрамляющие их, должны соответствовать цветам радуги.

Если представить всё это схематично, то получится что-то вроде:

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

Для примера я взял стандартный шаблон Joomla. Вот его пример:

Для того, чтобы получить достаточное количество модулей, пришлось добавить несколько новых. Все добавленные модули – модули html, или, проще говоря, обычные модули с текстом. После их создания и публикации сайт стал выглядеть следующим образом:

Немного о CSS-классах.

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

CSS-стиль (свойство) – минимальная единица CSS. Размер или цвет шрифта, рамка, позиционирование – всё это CSS-стили.

СSS-класс – это контейнер для стилей.

Пример:

У нас есть html-блок DIV:

Мы хотим сделать текст в этом блоке 20 шрифтом и красным цветом. Для этого мы добавляет нашему блоку атрибут класса, например «myclass». В результате у нас получается:

<div class="myclass">пример</div>

Сейчас мы создали CSS-класс для блока. Но он пока пуст (не содержит стилей).

Теперь в любом, подключенном к шаблону CSS-файле,  мы добавляем строчку:

.myclass{font-size:20pt; color: red;}

Мы внесли в класс два CSS-стиля: font-size и color.

После этого наш блок будет содержать текст красного цвета 20 шрифтом.

Вообще, если вы всерьёз планируете заниматься сайтостроением, советую купить какой-нибудь хороший учебник по HTML и CSS. Эти технологии – основа основ. Освоив их по учебнику, в дальнейшем вы сэкономите очень много времени на верстке. 

Создание CSS-суффиксов для модулей.

Теперь нужно немного подумать о том, чем внешний вид наших модулей отличается и чем он схож. Понятно, что отличия – разные цвета, контуры цветов и положение. А «похожесть» в том, что некоторые контуры и положения повторяются.

Суффикс класса модуля устроен таким образом, что позволяет задавать для модуля неограниченное количество классов. Изначально в нашем шаблоне все модули имеют класс moduletable.

Здесь нужно уточнить, что наличие CSS-класса moduletable зависит от используемого шаблона Joomla. Его может не быть совсем, или мы можем изменить его в коде шаблона. Но для всех этих манипуляций требуется достаточно хорошее понимание принципов работы Joomla. В это же статье мы рассматриваем стилизацию модулей с точки зрения человека, который знает только CSS).

Задавая новые названия в поле суффикса класса модуля через пробел, мы получим для модуля множество новых классов. Звучит всё это сложно и страшно. Давайте посмотрим, как оно работает на практике.

Очевидно, для того, чтобы задать каждому модулю свой цвет, у каждого должен быть уникальный CSS-класс. Но контуров и положений, в отличие от цветов, всего по два. Следовательно для них понадобится всего четыре класса (два для контуров и два для положений). Также важно то, что цвет не должен пересекаться с контуром и положением в одном классе, иначе мы получим очень неприятную зависимость цвета от контура и положения.

Что мы в итоге делаем?

1) Создаем семь классов на каждый цвет радуги:

• color1 – красный
• color2 – оранжевый
• color3 – желтый
• color4 – зеленый
• color5 – голубой
• color6 – синий
• color7 – фиолетовый

2) Создаем два класса на каждый из контуров:

• squareblock – квадратный контур
• roundblock – контур со скругленными углами

3) Создаем два класса на каждое положение:

• normalpos – модуль в центре
• leftpos – модуль, сдвинутый влево

Если точно следовать исходному заданию, второй и третий пункты мы могли объединить, т.е. создать не четыре, а только два класса. При этом результат получился бы такой же, как и на картинке, но мы уже не смогли бы простым изменением суффикса получить, например, квадратный блок, сдвинутый влево. Поэтому, для максимальной гибкости наших модулей, мы разделим контур и сдвиг по разным классам.

Теперь необходимо определиться с тем, какому модулю какие суффиксы будут присвоены. Это легко. Просто смотрим модули по картинке сверху вниз:

• модуль1 – color1 squareblock normalpos
• модуль2 – color2 roundblock leftpos
• модуль3 – color3 squareblock normalpos
• модуль4 – color4 roundblock leftpos
• модуль5 – color5 squareblock normalpos
• модуль6 – color6 roundblock leftpos
• модуль7 – color7 squareblock normalpos

Вот и всё. Подготовительный этап завершен. Остается только задать CSS-суффиксы нашим модулям. Перед суффиксом обязательно должен стоять пробел, иначе он приклеется к базовому классу, т.е. будет выглядеть, как «moduletablecolor1 squareblock normalpos».

На рисунке показано, как задается суффикс для модуля1:

После того, как все суффиксы заданы, можно переходить к формированию CSS-стилей. С помощью веб-инспектора браузера подбираем необходимые стили:

/* Задаем цвета рамок */

.moduletable.color1 {border-color:#D2232A;} /* Задаем красный цвет */
.moduletable.color2 {border-color:#F7941E;} /* Задаем оранжевый цвет */
.moduletable.color3 {border-color:#FFDE00;} /* Задаем желтый цвет */
.moduletable.color4 {border-color:#40AE49;} /* Задаем зеленый цвет */
.moduletable.color5 {border-color:#00B2EB;} /* Задаем голубой цвет */
.moduletable.color6 {border-color:#23408F;} /* Задаем синий цвет */
.moduletable.color7 {border-color:#624099;} /* Задаем фиолетовый цвет */

  
/* Задаем цвета заголовков */

.moduletable.color1 h3 span{color:#D2232A;} /* Задаем красный цвет */ 
.moduletable.color2 h3 span{color:#F7941E;} /* Задаем оранжевый цвет */
.moduletable.color3 h3 span{color:#FFDE00;} /* Задаем желтый цвет */
.moduletable.color4 h3 span{color:#40AE49;} /* Задаем зеленый цвет */
.moduletable.color5 h3 span{color:#00B2EB;} /* Задаем голубой цвет */
.moduletable.color6 h3 span{color:#23408F;} /* Задаем синий цвет */
.moduletable.color7 h3 span{color:#624099;} /* Задаем фиолетовый цвет */
  
/* Задаем формы рамок */

.moduletable.squareblock{border: 2px solid;} /* квадратная рамка */
.moduletable.roundblock{border: 2px solid; border-radius: 10px 10px 10px 10px;} /* скругленная рамка */

  /* Задаем положение рамок */

.moduletable.normalpos{} /* нормальное положение не требует дополнительных стилей */
.moduletable.leftpos{position: relative; right: 13%;} /* сдвигаем модуль немного влево. */

После этого любуемся результатом:

В заключении хочу сказать, что Joomla имеет хорошую гибкость в оформлении. Имея навыки работы с HTML и CSS, а также понимая структуру Joomla, можно создавать для нее очень красивые разнообразные шаблоны.

$params->get('moduleclass_sfx')

$params->get('module_tag')

$params->get('header_tag')

$params->get('header_class')

function modChrome_mymod($module, &$params, &$attribs)
{
//CSS-класс заголовка
$headerClass = $params->get('header_class');
//HTML-тег заголовка, если нет - будет DIV
$headerTag = $params->get('header_tag', 'div');
//Суффикс CSS-класса модуля
$moduleClass = $params->get('moduleclass_sfx');
//HTML-тег модуля, если нет - будет DIV
$moduleTag = $params->get('module_tag', 'div');
if ($module->content)
{
//Открываем модуль
echo "<" . $moduleTag . " class="mod " . $moduleClass . "">";
//Заголовок модуля
echo "<" . $headerTag . " class="moduletitle " . $headerClass . "">" . $module->title . "</" . $headerTag . ">";
echo $module->content;
//Закрываем модуль
echo "</" . $moduleTag . ">";
}
}

" . $headerTag . "

div

//Заголовок модуля
echo "<div class="moduletitle " . $headerClass . "">" . $module->title . "</div>";

<jdoc:include type="modules" name="position-7" style="mymod" />

Комментарии ()

Module Class Suffix is a parameter in Joomla! modules. It is set Module: [Edit] screen under Advanced Parameters. Setting this parameter causes Joomla! to either add a new CSS class or modify the existing CSS class for the div element for this specific module.

When Joomla! generates a module, it automatically create a CSS class called «moduletable» to allow styling of the module — for example,

<div class="moduletable">

To create a new class, enter the parameter with a leading space. For example, entering a space plus «myNewClass» will create a new CSS class called «myNewClass». The HTML will be changed to

<div class="moduletable myNewClass">

To change the name of the existing class, enter in the parameter without a leading space. For example, entering «_mySuffix» (no leading space) will cause the HTML to changed to

<div class="moduletable_mySuffix">

Generally, it is recommended to use a leading space to create a new class. This way, CSS styling for this module that uses the standard class names will continue to work. You can use the new class name to add any desired styling to the module without needing to re-create all of the existing CSS code. Note that, if you create a new class name, make sure it has a unique name and doesn’t conflict with any existing class names.

See Using Class Suffixes for more information.

Usage[edit]

If you enter a Module Class Suffix with a leading space, a new CSS class will be created. If your parameter does not have a leading space, the CSS class «moduletable» is modified. The first method is often preferred, since then you don’t break any of the existing styling for the module, and you only need to add new CSS code for the new styling.

If you don’t use a leading space, you will need to copy all of the styling code for the «moduletable» class and duplicate it for the new CSS class before making your CSS changes.

See the tutorial Using Class Suffixes for a detailed example of using Page and Module Class Suffixes.

Суффикс css класса модуля joomla прекрасный инструмент оформления внешнего вида любого модуля движка. По сути, это дополнение собственного класса к уже имеющемуся дефолтному.

Как это работает на практике, смотрите в этом видео.

Эта отличная возможность не редактировать оригинальные стили модуля, а лишь добавлять свои, не нарушая всей структуры. Вообще cms-joomla славится такими «примочками» и относятся они не только к модулям, но так же и меню, и к отдельно взятой странице.

Во всех случаях у нас есть прекрасная возможность придать свое уникальное оформление отличное от оригинального.

Суффикс css класса модуля в основном используют администраторы разбирающиеся более, менее в свойствах css. Это похоже на альтернативный макет только намного проще.

Как это работает на практике, сейчас разберем.

В любом модуле есть дополнительные настройки в которых есть специальное поле суффикс css класса модуля. В это поле необходимо записать любое придуманное название класса, желательно несущее смысловую нагрузку.

Лучше тестировать на базовых шаблонах системы, где известны практически все классы. Это даст возможность правильно оценить работу, которую в последствии можно перенести на работающий шаблон сайта.

Допустим что нам нужны два модуля разного цвета, синий и черный. Если изменять уже готовые стили, то изменится внешний вид всех модулей. А при добавлении своего класса в поле суффикс css класса модуля, мы просто добавим свои свойства к этому классу.

Я создал два одинаковых html-модуля. К одному добавил суффикс css «box1», к другому «box2»

В таблице стилей шаблона добавил свойства для обеих вариантов.

Синий фон и белый шрифт

.box1 {
 background-color: #2D5881;
 color: #fff;
 }

Результат на скриншоте.

Во втором случае фон черный, а шрифт так же оставил белый.

.box2 {
 background-color: #3D3D3D;
 color: #fff;
 }

Результат.

При использовании редактора joomla, так же можно задавать разные стили отображения для html-модуля. Но важно учитывать и другие свойства, например внутренний отступ. Если такой отступ есть, а он почти всегда присутствует, то и стили заданные в редакторе будут распространяться только в рамках такого отступа.

Другими словами, чтобы задать фон с помощью редактора, он будет только до границы отступа, что не очень красиво.

Поэтому суффикс css класса модуля лучше подходит для оформления блоков на joomla-сайте. Это относится не только к последним версиям joomla, но и к версиям 2.5.

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

Как правило, для разных модулей, которые расположены в разных позициях шаблона, применяются разные классы.

Редкий случай, когда все модули в разных позициях шаблона имеют одинаковый внешний вид. Чаще всего для каждого отдельно взятого блока, предусмотрено индивидуальное оформление.

Для правого сайтбара в шаблоне protostar — один класс (well). Для левого — другой, для других позиций вообще может не быть никакого класса.

По этой причине перемещая модули с одной позиции в другую, могут изменяться и их стили. Например если модуль box1, где мы применяли синий фон, перенести в левую позицию, то все стили исчезнут, и фон будет белым.

Как исправить такую ситуацию?

Для этого в joomla тоже есть «секретная» кнопка, которая находится в тех же дополнительных параметрах в поле «стиль модуля».

В выпадающем списке можно выбрать подходящий вариант. Если в правой позиции был класс well, значит нужно выбрать именно его. В этом случае все стили сохранятся и модуль снова станет синим.

Это далеко не все секреты cms-joomla, которые помогают грамотно и эффективно администрировать систему.

Чаще посещайте рубрику уроки joomla чтобы узнавать о других секретах популярного движка.

Вступление

Авторы CMS Joomla вполне разумно создали системный модуль под названием нижний колонтитул или footer вашего сайта. Модуль очень простой, но требует некоторого пояснения.

Зачем нужен?

Назначение модуля нижнего колонтитула Joomla сайта информационное. В этом модуле вы можете показать своим пользователям и гостям информацию об авторских правах вашего сайта. Также есть возможность вывести информацию об используемом программном обеспечении вашего сервера.

Зачем это нужно? Авторские права нужны для информации ваших посетителей, что контент сайта это продукт интеллектуальной деятельности авторов (автора) и права на его распространение принадлежат им (ему).

Важно отметить, что авторское право не требует никакой регистрации. По закону оно возникает и начинает охраняться с момента публикации сайта (статьи), материала сайта. Также авторское право никем не патентуются.

Публикации в колонтитуле информации об авторском праве служит своеобразным предупреждением желающим украсть ваш контент, что вы будете защищать права на свой контент.

Эффективность данного модуля трудно оценить. Однако сообщение о намерении защищать свою интеллектуальную собственность будет  не лишним и во многих случаях полезной.

Модуль нижний колонтитул в каталоге

 Модуль нижний колонтитул Joomla сайта является системным и как положено всем системным модулям по умолчанию лежит в каталоге modules в папке с названием mod_footer.

Как создать

Для создания модуля нижнего колонтитула (footer) идём на вкладку «Модули» из верхнего (основного) меню сайта.

• Жмём кнопку «Создать».
• Выбираем из списка модулей модуль под названием «Нижний колонтитул (footer)».
• Выставляем свои настройки модуля.
• Сохраняем для публикации на сайте.  

Как настроить

Любой модуль сайта Joomla можно настроить. Не исключение модуль нижний колонтитул Joomla сайта. Текущие настройки создаваемого модуля включают 5 вкладок:

• Модуль;
• Привязка к меню;
• Дополнительно;
• Права.

Модуль

Основное поле пустое, заполняем только настройки размещения.

Показать заголовок. (Показать/Скрыть). Показать или скрыть название модуля на экране. Эффект будет зависеть от указанного стиля в шаблоне.

Позиция. Здесь вы можете выбрать позицию модуля из списка имеющихся позиций модуля вашего шаблона. Работает поиск позиций. Традиционно позиция данного модуля «Footer» и как правило все авторы шаблонов сразу создают такую позицию модуля.

Статус. (Опубликован/Не опубликован/Корзина). Простые кнопки позволяющие опубликовать этот модуль или сохранить его в черновиках. Кнопка «Не опубликован» вместе с настройками «Начало публикации», позволяют отложить публикацию модуля на нужную дату, время.

Настройки «Начало публикации» и «Завершение публикации» позволяют назначить начало и конец показа этого модуля на сайте.

Доступ. Уровень доступа ваших пользователей для просмотра этого модуля.

Порядок. Это порядок создаваемого модуля, как на сайте, так и на вкладке «Модули» при выбранном фильтре «Позиция».

Примечание. Никто не видит, кроме пользователей имеющих доступ в административную панель сайта.

Привязка к меню

Здесь вы должны определить, на каких страницах сайта этот модуль будет виден. По назначению модуля показываем его «На всех страницах сайта».

Дополнительно

Эта вкладка внешнего вида этого модуля. Она одинакова для всех системных модулей. Опишу её подробно.

Альтернативный макет. Если вы определили один или несколько альтернативных макетов для модуля либо в шаблоне, либо в ядре Joomla, вы можете выбрать свой макет для этого модуля.

Суффикс класса модуля. Применяется к классу CSS модуля. Это позволяет вам создавать собственные стили CSS, которые будут применяться только к этому модулю. Затем вы должны изменить файл template.css (или custom.css) вашего шаблона, чтобы применить стилизацию к этому новому классу.

• Поставьте пробел перед классом, чтобы создать новый класс CSS для этого модуля.
• Без начального пробела, чтобы изменить имя класса CSS для этого модуля.

Кэширование. Включите или выключите независимое кэширование этого модуля. Параметр «По умолчанию» будет использовать настройки кэша из общих настроек сайта.

Срок кеширования. Оставляем по умолчанию 900.

HTML-тег модуля. По умолчанию это тег div, но можно использовать другие элементы HTML5.

Размер Bootstrap. Значения от 0 до 12. Это позволяет вам выбирать ширину модуля с помощью элемента span, встроенного в начальную загрузку. Проще, количество столбцов этого модуля.

Тег заголовка. Это может быть тег h1, h2, h3, h4, h5, h6 или p.

CSS-класс заголовка. Здесь вы можете добавить дополнительные классы CSS именно для заголовка модуля.

Стиль модуля. Используйте эту опцию, чтобы переопределить стиль шаблона для выбранной позиции модуля.

Права

Как всегда, права заполняем (меняем) для многопользовательского сайта. В этих уроках о правах я не пишу.

Публикация

После проверки всех настроек, сохраняем модуль. Если вы публикуете его сразу, можно, после чистки кэша, посмотреть его на сайте.

Вместо вывода

Обратите внимание, что, практические во всех шаблонах Joomla, авторы сами выводят модуль авторских прав в footer, по умолчанию. На некоторых шаблонах его можно отключить в настройках шаблона, на некоторых шаблонах — нельзя. Модуль нижний колонтитул Joomla сайта обязательно будет с двумя ссылками на сайт Joomla! и лицензию GNU.

©joomla-abc.ru

Еще уроки

• 10 лучших WAMP платформ для CMS Joomla под Windows, урок 3

• 12 Правил оптимизации Joomla сайта, урок 28

• 2 программы FTP клиент для создания Joomla сайта – FilleZilla, WinSCP, урок 4

• 33 первых расширения Joomla сайта — плагины и компоненты для расширения функционала сайта, урок 29

• 5 Программ для работы с изображениями Joomla, урок 6

• Favicon сайта Joomla – как создать и установить favicon на сайт Joomla, урок 13

• Joomla модуль Обёртка (Wrapper)

• Joomla на XAMPP — управление Joomla в автономном режиме на локальной машине, урок 7

• reCAPTCHA версия 2.0 на сайте Joomla — капча на Joomla сайте

• URL Joomla: SEF, ЧПУ, убрать index урок 59

Как создать уникальный  модуль 

Главная проблема системы управления контентом, в том, что весь ее дизайн построен на шаблоне — специальном наборе правил, в которых прописано: как должен выглядеть каждый элемент сайта. Это вносит некоторую унифицированность.

Бывают ситуации, когда требуется создать модуль с внешне уникальным заголовком, шрифтом и так далее.

Что делать в таком случае?  Как сделать модуль?
Необходимо создать отдельный стиль для модуля и определенным образом подключить его к нему. Чем мы с вами и займемся.

Давайте вернемся в наш браузер Google Chrome и выделим любой из модулей на сайте.

Далее отправимся в режим просмотра кода, как мы это делали ранее в эпизоде с изменением цвета ссылки. Рассмотрим рисунок, где ключевые моменты я обозначил красными стрелками.

Выше всех мы видим выделенный модуль. С этим вопросов нет. В окне с HTML кодом у нас есть возможность наблюдать тег DIV class= «module», соответствующий началу нашего модуля.

Вот мы плавно подошли к понятию класс в CSS, который по большому счету в рамках статьи физически не рассмотреть. Несмотря на это, я все-таки сделаю отчаянную попытку расшифровать понятие класс в нескольких словах.

Обратите внимание на правую часть, где мы видим набор правил CSS, начинающийся со слова «.module» . Это и есть самый настоящий класс, который содержит правила для модулей нашего сайта.

Классы необходимы, чтобы более точно, тонко и с наибольшим удобством создавать внешний вид сайта. Получается, что задав несколько несложных правил в одном блоке и обозначив их под именем «.module», мы получили набор правил, который можем применять неоднократно, что собственно и видно, просматривая код сайта: модули повторяются в левой колонке, и к каждому из них применяется один и тот же класс. А объявляется он знакомым нам тегом DIV class= «module»

Во всем этом распрекрасном явлении есть один минус. Каждый новый создаваемый из административной панели модуль будет отображаться на сайте аналогично предыдущему. В большинстве случаев это всех устраивает, но не сегодня и не нас с вами!

Вы уже наверно догадались, что необходимо создать новый класс. Но это полдела. Необходимо присвоить ему такое название, чтобы впоследствии была возможность вызвать его из административной панели Joomla.

Для начала скопируем содержимое класса «.module» в файле, который содержит CSS. Хочу обратить ваше внимание, что к классу относятся все правила, в которых присутствует имя «.module», поэтому

Если вы в своей работе пользуетесь программой «Блокнот», рекомендую еще одну копию ее открыть в новом окне.

Туда мы вставим только что скопированный текст.

Суффикс класса модуля

Настало время присвоить нашему классу имя. Главный нюанс заключается в том, что оно должно быть таким, чтобы обратиться к нему из административной панели Joomla.

Если вы однажды совершали праздную прогулку по «админке» Joomla, то наверняка обратили внимание на подозрительное в своей непонятности текстовое поле «Суффикс класса модуля».

Наша задача в данный момент – создать самый настоящий «Суффикс класса модуля» и впоследствии применить его к своему модулю.

Для этого возвращаемся в наш текстовый редактор, а именно в то окно, куда мы вставили скопированный код CSS.

Я предлагаю новому классу дать имя: «module_new»

В этом имени «_new» и будет суффиксом класса модуля. Чтобы вручную не переименовывать весь код в Блокноте, воспользуемся замечательной функцией, которая присутствует в абсолютно каждом текстовом редакторе.

Нажимаем в программе Блокнот сочетание клавиш «CTRL»+ «H (в другом текстовом редакторе это сочетание может отличаться), после чего откроется окошко, где будет предложено произвести автозамену.

В текстовое поле «Что:» вводим: .module

В текстовом поле «Чем:» пишем: .module_new

Далее нажимаем кнопку «Заменить все».

После чего сможем удовлетворенно наблюдать, что код изменился. Настало время внести свои изменения. Предлагаю изменить заголовок модуля, сделать его чуть больше нежели в стандартных модулях.

Обращаем внимание на правило:

.module_new h3{

margin: -4px -1px 5px;

padding-left:8px;

text-transform: uppercase;

font: bold 14px Arial, Helvetica, sans-serif;

}

Изменим его размер и цвет. В результате должно получиться:

.module_new h3{

margin: -4px -1px 5px;

padding-left:8px;

text-transform: uppercase;

font: bold 16px Arial, Helvetica, sans-serif;

color: #CC0000;

}

Осталось его скопировать и вставить в уже знакомый нам файл blue.css. Сохраняем его и заходим в административную панель Joomla

Создадим тестовый модуль, которому присвоим одноименный заголовок. Модуль создадим как произвольный код.

При создании модуля мы должны обратить внимание на текстовое поле «суффикс класса модуля»

Мы помним, что в нашем случае суффикс класса модуля – это: «_new», значит и вписываем этот набор символов в текстовое поле.

Не забудем включить не только модуль, но и заголовок для публикации, ибо  помним, что изменения в нашем коде касаются именно его.

После всех вышеуказанных действий нажимаем кнопку «Сохранить» в правом верхнем углу и отправляемся на сайт смотреть результаты нашей работы:

Результаты нас более чем радуют. Мы видим модуль, где заголовок отличается по цвету и размеру. Значит, мы справились с задачей.

Подведем итоги: мы узнали, что такое класс в CSS, а также научились применять суффикс класса модуля. Нельзя не отметить знакомство с мощным инструментом браузера Google Chrome, который позволяет не только просмотреть код, но и выяснить: где находится так нужный нам файл CSS.

 Подобный пример, смотри статью: Улучшить оформление и дизайн страницы сайта