css суффикс класса меню

Суффикс css класса модуля — фишка cms-joomla

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Суффикс css класса модуля в разных позициях шаблона

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

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

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

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

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

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

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

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

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Using Class Suffixes

Материал из Joomla! Documentation

It has been suggested that this article or section be split into specific version Namespaces. (Discuss). If version split is not obvious, please allow split request to remain for 1 week pending discussions. Proposed since 8 years ago.

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 the Joomla! 1.5.26 Sample site available.

Содержание

Background

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 very little work. The best way to understand this is to see specific examples.

When Would You Use a Class Suffix?

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 front 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

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

Before we add a Page Class Suffix, let’s see how this pages works without one. In the front end, 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:

Browse down the file and find the following tags:

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 very 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.

So 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)

Now that we see how this works without a Page Class Suffix, let’s try it with one. In the back end, 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 front end 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:

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.

Page Class Suffix (With a Leading Space)

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 + «myBlogClass», as shown below.

Now, go back to the front end 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:

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). So we didn’t break any of the existing CSS styling for this page. (One warning: we need to 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

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:

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:

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.

So, to sum up what we have learned about using the Page Class Suffix parameter:

Module Class Suffix

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 administrative back end, navigate to Extensions → Module Manager and find the «Latest News» module. Click on it to open it for editing, and enter + «customLatestClass» in the Module Class Suffix parameter field, as shown below:

Now, navigate to the home page in the front end 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:

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:

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

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

Let’s look at how this works. In the administrative back end, 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 front end 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 back end 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. So we need to be careful when making changes.

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

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

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.

Menu Class Suffix

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».

Menu Tag ID parameter

Now, lets look at the Menu Tag ID parameter. Navigate to the back end, 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:

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

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.

Источник