Суффикс css класса модуля joomla 3 как написать

В 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, можно создавать для нее очень красивые разнообразные шаблоны.

This tutorial was written for Joomla 1.5, however the differences to Joomla 2.5 are minor.

This tutorial will show you how to use Page, Module, and Menu Class Suffixes in Joomla! to fine-tune the appearance of your site. For the tutorial, we will assume you have a Joomla! Sample site available.

Background[edit]

Joomla! creates HTML pages that use Cascading Style Sheets to control the appearance of the page. This includes things like fonts, colors, margins, and background. The CSS files are part of your template.

When Joomla! creates a page, it creates different CSS classes that are then referenced in the CSS file to specify which style will apply to which parts of the HTML page. These class names are pre-programmed into Joomla!. But Joomla! allows you to modify or add CSS classes by way of the Class Suffix parameters. This lets you fine-tune the appearance of specific pages with no programming and little work. The best way to understand this is to see specific examples.

When Would You Use a Class Suffix?[edit]

Say, for example, that your website contains a number of Section Blog layouts, each for a different Section. If you are happy to have all of these pages styled the same way, then you wouldn’t need to use a Page Class Suffix. However, say you want each of these sections styled differently than the others. For example, maybe you want a different background color or image for each different section.

Or say that you want the heading on your home page to look different than the heading on other pages.

In both of these cases, if you modify the styling in your template.css file for the standard CSS classes, it will affect all Menu Items that use these CSS classes. For example, if you change the style for the CSS class componentheading, it will affect all of the Menu Items that use this class.

However, if you add a unique Page Class Suffix to a Menu Item, then Joomla! will create new CSS classes for each individual Menu Item so you can style each one differently.

Page Class Suffix[edit]

Before you start, make sure you have the Joomla! sample website available. Also, make sure the default template is set to rhuk_milkyway (in the Extensions → Template Manager).

How It Works Without a Page Class Suffix[edit]

Before we add a Page Class Suffix, let’s see how this pages works without one. In the Frontend, navigate to Example Pages → Section Blog. In your browser, select the option to view the page source code. For example, in Firefox, press Ctrl+U. In Internet Explorer, select View → Source. In Safari, select View → View Source.

Using the Find command, find the first occurrence of the word componentheading. It should look like the following:

<div class="componentheading">

Browse down the file and find the following tags:

<table class="blog" cellpadding="0" cellspacing="0"> 

<table class="contentpaneopen">

<td class="contentheading" width="100%">

<table class="contentpaneopen">

Note: The following screenshots were made using the free Firefox add-in called Firebug. Firebug allows you to quickly see the relationship between the HTML elements in your source and the text and graphics shown on the page. It is a handy tool, and you can get it here. For more information, please watch the free video tutorial on using Firebug with Joomla.

The screenshot below shows you the componentheading class. It is the page title area above the blog article.

This screenshot shows you the entire blog class. This is the outer table into which all of the articles will fit.

The next screenshot shows you the contentpaneopen class for an article heading. This includes the article title and the PDF, Print, and Email icons to the right.

This screenshot shows you the contentpaneopen class for the body of the article. This includes the author and date information as well as the actual article text.

This gives us a good understanding of how Joomla! allows us to style the elements on a Section Blog layout. Joomla! writes out these classes as part of the HTML. And the template contains CSS that provides the styling information for these various elements and classes.

Page Class Suffix (No Space)[edit]

Now that we see how this works without a Page Class Suffix, let’s try it with one. In the Backend, navigate to Menus → Example Pages and click on Section Blog. This should display the Menu Item: [Edit] screen for the Section Blog Layout. Click Parameters (System) to show the System Parameters. In the Page Class Suffix field enter the value _myBlogSuffix and click the Save button.

Now, go back to the Frontend and again navigate to Example Pages → Section Blog. Notice right away that we lost the styling for the page and article titles. Let’s look closer to see why.

Using the browser Find command, find the first occurrence of _myBlogSuffix. It is in a div tag and looks like this:

<div class="componentheading_myBlogSuffix">

If you look through the source, you should also see the following classes: blog_myBlogSuffix, contentpaneopen_myBlogSuffix, and contentheading_myBlogSuffix.

By adding the Page Class Suffix, we changed all of these class names. That means that special styling in the CSS file that refers to the base class names (like componentheading, blog, and so on) will not be applied, since those classes no longer exist on the page.

Now, you can fix this problem by editing your templates CSS file to add the same styling for the new classes (for example, componentheading_myBlogSuffix). But there is a much easier way to do this — simply by adding a leading space to the parameter.

Page Class Suffix (With a Leading Space)[edit]

Again in the back end, go back to Menus → Example Pages → Section Blog. We’re going to change the value of the Page Class Suffix. This time we’re going to enter in a leading space and call it <space> + «myBlogClass», as shown below.

Now, go back to the Frontend and re-display the Example Pages → Section Blog. Notice that our styling is back! Let’s look at the HTML source to see what is going on. Open the source and find the first occurrence of myBlogClass. It should like this:

<div class="componentheading myBlogClass">

Because we put a leading space in the Page Class Suffix, we created a second class instead of changing the name of the first class (which is allowed and supported by all modern browsers). We didn’t break any of the existing CSS styling for this page. (One warning: make sure the new class name is different than any of the other class names used on the page. Otherwise, we might get styling we don’t want.)

Add CSS Styling to New Class[edit]

At this point, we’ve created a new CSS class in the HTML to allow for some new styling. Now we need to use this new class to actually change the look of our page. The first thing we need to do is find the applicable CSS file. In this case, it is <joomla_root>/templates/rhuk_milkyway/css/template.css.

Let’s say we want to add a background color, but only to this specific Section Blog. (Remember, if we wanted to just change all of the Section Blog pages in our site, we could just change the CSS styling for the base classes, such as componentheading or blog.) We need to do is figure out which area (componentheading, blog, or contentpaneopen) we want to style. Say we just wanted to style the componentheading area.

First, let’s use the CSS selector div.myBlogClass and add the following code to the end of our CSS file:

/* Custom Styling */
div.myBlogClass {
	background-color: #FFE4E1; /* mistyrose */
}

The result is that the page heading now has the background color, as shown below.

Now this works fine in our example, because the other classes are defined for table tags and not div tags. But it is normally better to be more specific in our style selector by styling only those elements that have both the desired base class and the new class. For example, let’s replace the code above with the following code:

/* Custom Styling */
.blog.myBlogClass {
	background-color: #FAFAD2; /* lightgoldenrod */
}

This specifies that the new style will only be applied to elements that have both the blog and the myBlogClass styles. This gives us the background color over the entire blog area, as shown below.

The great thing about creating a new class (with the leading space trick) is that we don’t need to copy all of the existing styling for the base classes. We can just focus on the new styling that we want.

Now in this example, we focused on the Section Blog layout. The class names for different components might be different, but the process will be the same. The table below shows some common Joomla! layouts and a list of class names that can have Page Class Suffixes added.

To sum up what we have learned about using the Page Class Suffix parameter:

1. Use a leading space to create a new CSS class. This way you don’t have to worry about re-doing or breaking existing CSS styles.
2. Look in the HTML source code to find the locations of the base and new classes.
3. If desired, use Firebug to see which HTML elements correspond to which areas on the page.
4. Add custom styling to the end of the template.css file, specifying both the name of the desired base class and the custom class in the form .baseclass.customclass as in the example above.

Module Class Suffix[edit]

The Module Class Suffix parameter works in the same way as the Page Class Suffix. Let’s go through an example using the Latest News module.

In the Backend, navigate to Extensions → Module Manager and find the Latest News module. Click on it to open it for editing, and enter <space> + «customLatestClass» in the Module Class Suffix parameter field, as shown below:

Now, navigate to the home page in the Frontend and view the page source code. The screenshot below was made using the Firebug add-in tool. It shows the home page and the HTML and styling for the customised Latest News module.

In the upper part of the screen, outlined in light blue, is the div element for the module. Below, in the HTML window, we see the HTML as follows:

<div class="moduletable customLatestClass">

and then

<ul class="latestnews customLatestClass">

The moduletable and latestnews classes are created automatically. The new class, customLatestNews was created because we started the Module Class Suffix parameter with a leading space.

Now let’s use our new class to add some custom styling. Again, go to the end of the templates/rhuk_milkyway/css/template.css file and add the following code:

div.customLatestClass {
	background-color: #FFFFD2;
}

div.customLatestClass h3, ul.customLatestClass, ul.customLatestClass a {
	color: #8B4513;
}

Save the file and re-display the home page. It should look like the screenshot below:

The CSS selector div.customLatestClass sets the background color for the entire area. The three selectors div.customLatestClass h3, ul.customLatestClass, ul.customLatestClass a select the font color for the h3 heading, the bullets (ul tag), and the a tag, respectively. Note that, if we only wanted to style the ul element, we wouldn’t need a Module Class Suffix unless we had more than one Latest News module. Instead, we could just have defined the CSS using the standard latestnews class.

Be Careful Not to Break Existing CSS Styling[edit]

In menus, we need to be careful not to break existing CSS styling.

Let’s look at how this works. In the Backend, navigate to Extensions → Module Manager and open the Main Menu for editing. Click on the Advanced Parameters. Notice that the Module Class Suffix is set to _menu, without a leading space.

Now go to the Home page in the Frontend and view the source code (or use Firebug). The screenshot below shows the HTML for the Main Menu.

Notice that the class is called module_menu because of the Module Class Suffix. Also, notice that there is special styling in the template.css and blue.css files for the module_menu class. For example, there is a background image that provides part of the blue border around the menu.

We can confirm this by returning to the Backend and changing the Module Class Suffix to blank. Return to the Home page and refresh. Now the Main Menu will show without the special module_menu styling, as shown below:

This shows an important point. Existing modules, especially menus, may already have CSS styling that depends on Module Class Suffixes. We need to be careful when making changes.

What if we still wanted to add some special styling just to the Main Menu? One way is to get tricky and add a second CSS class to the existing suffix. To see this, return to the Module Manager in the Backend and open the Main Menu for editing. This time, in the Module Class suffix, enter _menu, a space, and then myMenuClass, as shown below:

Now, add the following code to the end of the templates/rhuk_milkyway/css/template.css file:

div.myNewClass {
	font-size: 1.2em;
	}

Go back to the Home page and notice that now the font in the Main Menu is larger, as shown below.

If we open Firebug, we can see what the HTML and CSS looks like, as shown below:

By putting a space between the _menu and myNewClass, we added the new class into the HTML. Then, by selecting the new class in the CSS file, we changed the font size.

Menu Class Suffix and Menu Tag ID[edit]

All core modules allow you to enter a Module Class Suffix, as discussed above. Menu modules have two additional parameters: Menu Class Suffix and Menu Tag ID. Let’s look at what these parameters do.

[edit]

The Menu Class Suffix inserts an extra suffix in the class for the unordered list that builds up the menu. If unedited, the class is menu. If adding _myMenuClass under Advanced Parameters → Menu Class Suffix, the new tag will be menu_myMenuClass.

(This behaviour is only for the Menu Style List. If choosing Legacy — Vertical or Legacy — Horizontal, the class suffix will be added to the links in the table; this suffix will then be mainlevel_myMenuClass. When choosing the Legacy Flat List, the suffix will be added to the links (as on the two other Legacy lists), but it will also be added to the ul tag, but as an id rather than a class; the id will be mainlevel_myMenuClass.)

[edit]

Now, lets look at the Menu Tag ID parameter. Navigate to the Backend, open the Main Menu module for editing, and enter myTagID in the Menu Tag ID parameter.

Add the following code to the end of the templates/rhuk_milkyway/css/template.css file:

#myTagID {
	list-style-type: square;
}

Now, re-display the Home page to see the change. The bullets for the Main Menu should now appear as squares, as shown below:

Finally, we can look at the HTML and CSS in Firebug, as shown below.

Joomla! has added the attribute id=»myTagID» to the ul tag for the Main Menu. This allowed us to change the style for this ID. Note that, since this is an id attribute, we use the CSS selector #myTagID (with a # instead of a .).

Conclusion[edit]

The Class Suffix and Menu Tag ID parameters allow you to fine-tune the CSS styling of your web site. By using a leading space in the suffix name, we can create a new class. This is normally the preferred method, since, as long as the new class name does not conflict with an existing class, no existing styling will be broken.

Суффикс 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 чтобы узнавать о других секретах популярного движка.

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

Joomla 3.x. Что такое суффикс класса модуля/страницы и как его использовать

Не все классы CSS в шаблонах уникальны. Вам может понадобиться добавить уникальное CSS правило для одного модуля /страницы.

Добавление суффикса класса для модуля:

1. Для начала, перейдите в Расширения (Extensions) > Менеджер Модулей (Module manager). Откройте необходимый модуль.

2. Перейдите вРасширенные настройки (Advanced Settings), добавьте Суффикс класса модуля (Module Class Suffix):

   

3. Нажмите Сохранить (Save) после того как вы все сделали.

4. Теперь, вы можете добавить CSS правило. Вам необходимо будет использовать: developer tools.

5. Так как теперь у вас есть уникальный класс CSS, вы можете добавить к этому модулю уникальное CSS правило, специфическое только для него:

   

Добавление класса страницы (Adding Page Class)

1. Страница класса CSS может быть добавлена похожим способом. Перейдите в Меню (Menus) > Главное меню (Main menu), откройте необходимый пункт меню.

2. Вы увидите вкладку Отображение старницы (Page display) , добавьте ваш CSS класс в поле Класс страницы (Page class) :

   

3. Так как теперь у вас есть уникальный CSS класс, вы можете добавлять CSS правила, которые будут относиться только к этой странице.

Пожалуйста, ознакомьтесь с детальным, обучающим видео ниже:

Joomla 3.x. Что такое суффикс класса модуля/страницы и как его использовать

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

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

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

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

Давайте вернемся в наш браузер 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.

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