Joomla 3 суффикс css класса модуля: Суффикс css класса модуля украшение любого шаблона

alexxlab

Содержание

Суффикс css класса модуля украшение любого шаблона

Суффикс 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, часто встречается такие: «как изменить оформление у конкретных модулей?» и «как изменить цвет заголовков определенных модулей?». В этой статье мы расскажем вам, как правильно использовать альтернативное оформление модулей.

Как правило, все модули берут общее оформление из класса table.moduletable, оформление заголовка модуля — соответственно из класса table.moduletable th и оформление «тела» модуля — из класса table.moduletable td. Также может существовать еще класс table.moduletable ul, который заведует оформлением списков в модулях.


Шаг 1. Создаем альтернативные стили оформления

 

  1. В файле css шаблона, в котором вы хотите применить альтернативное оформление модулей, находим все, что начинается с table.moduletable и копируем:
    table. moduletable {
width: 100%;
margin-bottom: 10px;
border-bottom: 1px solid #FFFFFF;
}
table.moduletable th {
height: 20px;
vertical-align: middle;
background-color: #BB0000;
border-bottom: 2px solid #FFFFFF;
}
table.moduletable td {
background-color: #5F68A0;
}
  2. Добавляем в скопированные классы суффикс (например -alt).

    Важно: суффикс может быть любым, главное, чтоб он был прописан латинскими буквами через дефис или подчеркивание (дефис или подчеркивание нужны для того, чтоб вы сами не путались).

    table.moduletable-alt {
width: 100%;
margin-bottom: 10px;
}
table.moduletable-alt th {
height: 20px;
vertical-align: middle;
background-color: #BB0000;
border-bottom: 2px solid #FFFFFF;
}
table.moduletable-alt td {
background-color: #DEDEDE;
}

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


Шаг 2. Назначаем альтернативное оформление модулю

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

  1. Авторизуемся в административной панели Джумла
  2. Выбираем пункт меню Модули->Модули сайта (Modules->Site modules)
  3. Выбираем в списке модуль, к которому мы хотим применить альтернативное оформление и нажимаем кнопку «Изменить» (Edit)
  4. В качестве значения параметра Суффикс класса CSS (Module Class Suffix) указываем -alt (именно так, начиная с дефиса или подчеркивания — в зависимости от того, что вы использовали в css)
  5. Нажимаем кнопку «Сохранить»

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

Joomla!® CMS — пожалуй, лучшая система управления контентом с открытым исходным кодом

Joomla! — это больше, чем просто программное обеспечение, это люди, включающие разработчиков, дизайнеров, системных администраторов, переводчиков, копирайтеров, и, что самое главное — простых пользователей.

Мы рады пригласить вас в ряды нашего сообщества!

Скачать Joomla! 4.2.4 Русский язык для Joomla Документация Joomla! CMS

Свернуть

Развернуть

  • Joomla 4 Responsive Images

  • Y2 — новая версия поиска Яндекса.

  • Обновление плагинов для JoomShopping 5 и CRM Битрикс 24

  • Вышел релиз безопасности Joomla 4.

    2.5

  • Вышел релиз безопасности Joomla 4.2.4

  • Вышел релиз безопасности Joomla 4.2.1

  • Вышел релиз Joomla 4.2

  • Joomla 4.2 RC 1 — помогите сделать её стабильной

  • Новая функция в Joomla 4: процессы публикации

  • 90 баллов в Pagespeed для сайта на Joomla

  • Компоненты магазинов для Joomla топ 2020

  • Подсказки эксперта как правильно выбрать хостинг

  • Топ 10 лучших расширений для Joomla в 2020 году

  • Шаблоны и стили Joomla

Популярные записи

  • Вышел релиз безопасности Joomla 4. 2.4
  • Вышел релиз безопасности Joomla 4.2.5

Форум о Joomla

  • Re: Вопрос по настройке Helix3

    Joomla 3.x: Шаблоны, разметка и макеты вывода

  • Re: Вопрос по настройке Helix3

    Joomla 3.x: Шаблоны, разметка и макеты вывода

  • Re: Модуль для оформления блока партнеры

    Поиск компонентов, модулей, плагинов

  • Модуль для оформления блока партнеры

    Поиск компонентов, модулей, плагинов

  • Re: Валидация дополнительного поля при оформлении заказа

    [VM2&3] Регистрация, покупка, управление заказами

css — Есть ли исправление для суффикса класса модуля/страницы Joomla «ведущий пробел»?

спросил

Изменено 9 лет, 2 месяца назад

Просмотрено 212 раз

Если вы знаете и используете Joomla, вы знаете, что распространенная «проблема» заключается в том, что те, кто не знаком с Joomla (и такие легкомысленные люди, как я), часто забывают поставить начальный пробел перед добавлением нового суффикса класса к модулю или странице. Зная достаточно PHP, чтобы быть опасным, мне кажется, что это достаточно легко исправить, объединив простое пустое пространство с любым новым введенным классом. Я знаю, что гении, стоящие за Joomla, не могли упустить из виду такое обычное и простое исправление, но для меня, начинающего создавать довольно крутые шаблоны Joomla, мне кажется, что реализация глобального исправления для этого с использованием переопределений (если возможно) может потенциально уменьшить будущие часы поддержки. Может ли кто-нибудь убедить меня не делать этого и, пожалуйста, объясните причины, почему? Я понимаю, что очень редко человек может захотеть добавить к существующему классу, например, изменить «existingClass» на «existingClassModified», но действительно ли такая необходимость оправдывает повсеместное разочарование в остальное время? Конечно, это в любом случае нарушит любой стиль для «existingClass»! Или это логика? Чтобы создать избыточный класс как своего рода сброс css для конкретного элемента?

  • css
  • joomla
  • joomla-расширения

3

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

Допустим, вы устанавливаете новую копию Joomla, проверяете шаблон и видите следующее:

 <дел>

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

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

3

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — Проблемы со стилем Стилизация подклассов на веб-сайте Joomla

спросил

Изменено 9 лет, 1 месяц назад

Просмотрено 78 раз

У меня средние знания CSS, хотя я использую предопределенный шаблон Joomla, который я переделываю. Моя проблема существует, когда я хочу изменить стиль модулей, к которым я применил суффикс класса модуля. Я могу вносить изменения в общий модуль, хотя у меня серьезные проблемы с попыткой стилизовать элементы подкласса внутри него. Например на странице —

http://kcrarea.com/index.php/about/getlisted/basic-listing

Я хочу изменить стиль входа через социальные сети только в этом случае, поэтому я применил к модулю класс REQ.

Как я могу стилизовать подкласс, который будет управлять этим. Например, я пытался переместить значок СОЦИАЛЬНОГО ВХОДА вниз, поэтому я создал стиль:

 #interfacecontainerdiv .REQ

Это не работает, что мне делать?

Мы ценим вашу помощь.

Спасибо

  • html
  • css
  • joomla
  • стиль
  • подкласс

1

Мне кажется, что в настоящее время REQ применяется только к блочному модулю, в котором есть логин. Помещение #interfacecontainerdiv .REQ в ваш .css файл не добавит стили .REQ в ваш interfacecontainerdiv, если это то, что вы пытаетесь сделать. Вам нужно будет либо напрямую изменить настройки css для interfacecontainerdiv, либо добавить класс REQ к div в вашем коде.

Взгляните на строку 264 вашего template.css, там вроде все устроено для interfacecontainerdiv. Вы обнаружите, что верхнее поле имеет отрицательное значение, что может быть, среди прочего, одним из показателей того, почему элемент div отображается в таком странном положении. Вы используете Firefox? У него есть отличный инструмент, если вы щелкнете правой кнопкой мыши по элементу и выберите «проверить элемент», он откроет широкий спектр инструментов в нижней части экрана. Там вы можете изменить настройки CSS и сразу увидеть эффект.

Кстати: #interfacecontainerdiv .REQ означает «применить следующие настройки к элементу с классом «REQ», который можно найти внутри элемента с идентификатором «interfacecontainerdiv»» 😉

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *