Печать
Категория: Что делать, если модуль слишком большой и занимает слишком много места, или просто его нужно как-то выделить на фоне сайта?
Просмотров: 638

По мере развития сайта количество пунктов Меню (а оно у нас, кстати сказать, называется «Рубрики») может увеличиться. В конце концов, количество пунктов может стать невообразимым. А модуль Меню (в нашем случае модуль Рубрики) будет занимать слишком много места. И придётся искать какое-то решение этой проблемы. Можно, конечно, разбить все рубрики пополам и разделить их между двумя модулями. А два модуля делать не врозь, а вместе в виде одного модуля с двумя вкладками.

Хотя, возможно, не стоит так всё усложнять. Может быть, достаточно просто оставить на сайте модуль, на котором высвечивалось бы только одно единственное слово: или Меню, или Рубрики, или ещё что-то, например, Разделы. А вот сами разделы, или пункты Меню, появлялись бы только тогда, когда посетитель сайта щёлкал бы на этом модуле мышкой.

И вот тут то мы подходим к самому интересному вопросу: что делать, если захотелось сделать себе на сайте вот какой-нибудь такой модуль вот в какой-нибудь вот в такой необычной стилистике? Ну, если захотелось, значит надо найти подходящий инструмент. Ведь разработчики Joomla! всегда чувствуют, что хотят веб-мастера, и иногда это делают… Или, наоборот, иногда чувствуют и всегда делают… Или как-то по-другому… Уж и не знаю, а вот специальный модуль, который может сворачиваться и разворачиваться есть, правда только в шаблоне Beez3, и только для определённой позиции. Называется эта выдающаяся вещь «хром модуль» (module chrome). Говорят, что этот модуль не надо путать с браузером Google Chrome – видимо были случаи.

«Хром модуль» (module chrome) – это, конечно не браузер, а это модуль, который стоит только в одной определённой разработчиками Joomli! позиции, и который имеет свой особый стиль, например, он может быть сделан в виде ниспадающего окна, а может быть в виде панели с вкладками. Получается, что если мы создаём модуль и ставим его в оговоренную позицию, в ту самую, где может стоять только «хром модуль»; то у нас автоматически и получится «хром модуль», то есть модуль в особом стиле.

И вот интересно, что в шаблоне Beez3 предусмотрено целых два «хром модуля»: Hide (Скрытый) и Tabs (Вкладки). Модуль Hide (Скрытый) всегда стоит в позиции position-4. И если мы создадим какой-нибудь модуль и поставим его в позицию position-4, то он обязательно станет «хром модулем» Hide (Скрытый). Модуль Tabs (Вкладки) всегда стоит в позиции position-5. И если мы создадим какой-нибудь модуль и поставим его в позицию position-5, то он обязательно станет «хром модулем» Tabs (Вкладки).

Можно попробовать это сделать, то есть установить на нашем сайте такие «хром модули». Только вот для этого придётся перевести дизайн нашего сайта с шаблона Protostar на шаблон Beez3. Движемся по схеме:  пункт верхнего меню на Панели управления (Control Panel) Расширения Менеджер шаблонов Стили, и оказываемся в Менеджере шаблонов (Template Manager) на панели Стили (Styles).

 

 Здесь у нас главным, то есть по умолчанию, назначен стиль protostar-Default. Напротив него стоит жёлтая звёздочка . А мы можем поменять стиль protostar-Default на стиль Beez3-Default. Ну, то есть, нужно щёлкнуть мышкой на звёздочку напротив стиля Beez3-Default, чтобы она стала жёлтой. Но как мы знаем, ничего не произойдёт, сайт, как отображался в стиле protostar-Default, так и будет отображаться в этом стиле. А всё потому, что назначить стиль стилем по умолчанию недостаточно, нужно ещё к этому стилю привязать пункты меню.

Поэтому щёлкаем мышкой два раза на стиле Beez3-Default, и оказываемся на панели Менеджер шаблонов: Изменить стиль (Template Manager: edit Styles), где есть такая замечательная вкладочка как Привязка к меню (Snap to menu). Вот здесь-то нам и надо поставить напротив каждого пункта меню галочки, чтобы все разделы сайта отображались в стиле Beez3-Default, то есть мы тем самым привяжем все разделы сайта (все пункты меню) к одному-единственному стилю Beez3-Default.

 

Не забудем нажать на клавишу Сохранить (Save) , или ещё лучше на клавишу Сохранить и закрыть (Save and close)  .

Ну и что стало с нашим сайтом? Да ничего особенного. Просто теперь он выглядит вот таким странным образом:

 

 

Вот именно при таком стиле можно на сайте размещать «хром-модули». У нас уже есть на сайте меню. Называется оно Рубрики и включает в себя три пункта: Создаём сайты с CMS Joomla!, Установка Joomla!, Настройка (конфигурирование) сайта на Joomla!. Все три пункта отображаются на сайте.

 

Модуль, который отображает меню Рубрики, находится в позиции position-7. Если же мы хотим, чтобы на сайте отображался только заголовок меню «Рубрики», а пункты появлялись только после щелчка на заголовке мышью, то нам нужно переместить модуль меню Рубрики на позицию position-4.

Поэтому нам нужно на Панели управления (Control Panel) в верхнем меню выбрать пункт Расширения (Extensions), в раскрывшемся списке выбрать Менеджер модулей (Module Manager), потом выбрать модуль Рубрики, и мы окажемся на панели, посвящённой редактированию модуля Рубрики, на вкладке Модуль (Module). Как раз здесь в правой части панели располагается такой замечательный параметр, как Позиция (Position). И мы видим, что в качестве значения этого параметра стоит: position-7. Вот нам и надо с помощью ниспадающего меню поменять «position-7» на «position-4».

 

 

Ну и здесь, как Вы понимаете, нужно повторить сакраментальную фразу: «Не забудем нажать на клавишу Сохранить (Save) , или ещё лучше на клавишу Сохранить и закрыть (Save and close)  ».

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

 

 

Но, как помнится, есть и другой вариант стиля «хрома-модуля». Вдруг модулей разведётся столько, что уже на бедном и несчастном сайте их приткнуть будет негде. Вот на это-то и рассчитан «хром модуль», состоящий из вкладок. Переключая мышкой вкладки, мы с Вами можем переходить с одного модуля на другой. Но такой модуль на сайте, оформленном в стиле Beez_3, должен обязательно располагаться в позиции position-5.

Поэтому нам надо снова войти в Менеджер модулей (Module Manager) и щёлкнуть два раза по модулю Рубрики, чтобы очутиться на знакомой нам уже панели Менеджер модулей: Модуль «Меню» (Module Manager: Module «Menu»), посвящённой редактированию модуля меню Рубрики. Сразу будет открыта вкладка Модуль (Module). А в правой части панели замечательный параметр Позиция (Position) будет иметь значение position-4. Ну и, наверное, не стоит уже говорить, что параметр Позиция (Position) должен иметь значение не position-4, а position-5. В общем, меняем значение параметра Позиция (Position):

 

 

И не забудем сохранить сделанные изменения: или клавиша Сохранить (Save) , или клавиша Сохранить и закрыть (Save and close)  .

Теперь модуль меню Рубрики будет располагаться на нашем сайте в позиции position-5, и будет «хром модулем». Но вот загвоздка, такой «хром модуль» (ну какой такой, такой, что в позиции position-5) должен содержать как минимум два модуля, чтобы получилось хотя бы две вкладки. Поэтому нам надо снова войти в Менеджер модулей (Module Manager), и выбрать какой-нибудь модуль, ну например модуль баннер Reklama1. Щёлкаем на нём два раза мышкой, попадаем на панель Менеджер модулей: Модуль «Баннеры» (Module Manager: Module «Banners»), и, конечно же, для нас самой первой будет открыта вкладка Модуль (Module). А на этой вкладке справа на привычном месте, мы увидим привычный параметр Позиция (Position). То, что вкладка Модуль (Module) уже для нас привычна – это ладно; то, что справа находится параметр Позиция (Position) – разбуди ночью, спроси – скажем; но вот то, что этот параметр принимает всё то же значение position-7 – это уже слишком. Ну, слишком – не слишком, нам не об этом думать нужно, а нужно менять значение position-7 на, как вы понимаете, position-5:

 

 

Насколько привычным, является всё остальное, настолько же привычно сохраняем сделанные изменения: или клавиша Сохранить (Save) , или клавиша Сохранить и закрыть (Save and close)  .

Теперь, если мы зайдём на наш сайт, и обновим его, то в верхнем левом углу мы увидим преудивительный модуль. Там висит какой-то модуль с рекламкой. Но если присмотреться это не просто модуль, а вкладка под названием Reklama1. Рядом с ней другая вкладка Рубрики. И если щёлкнуть на ней, то открывается, и надо сказать: открывается довольно таки необычно, привычное, очень привычное для нас, меню сайта со всеми-всеми рубриками.

 

 

Думается мне, что после того, как мы поэкспериментировали с «хром модулями» для стиля Beez3-Default, надо бы вернуть нашему сайту привычный для него стиль protostar-Default(2). То есть, я хочу сказать, что надо бы в Менеджере шаблонов (Template Manager) на панели Стили (Styles) (куда мы попадаем по пути: пункт верхнего меню на панели Панель управления (Control Panel) Расширения (Extensions) Менеджер шаблонов (Template Manager)) напротив стиля protostar-Default(2) поменять белую звёздочку на жёлтую, щёлкнув по ней мышкой  . А потом ещё, щёлкнув мышкой на стиль protostar-Default(2) и очутившись на панели Менеджер шаблонов: Изменить стиль (Template Manager: edit Styles), зайти на вкладку Привязка к меню (Snap to menu) и напротив каждой нашей рубрики поставить галочку, чтобы каждая наша рубрика, а если каждая, то значит и весь сайт в целом, отображались в стиле protostar-Default(2). Ну а дальше, как и положено, любимое наше замечание: «не забудем сохранить сделанные изменения: или клавиша Сохранить (Save) , или клавиша Сохранить и закрыть (Save and close)  ». Мы вернём наш сайт к привычному для него облику.

 

Но в этом привычном облике при шаблоне Protostar у нас не будет «хром модулей» Hide (Скрытый) и Tabs (Вкладки). Нам остаётся только с грустью о них вспоминать. Но неужели в шаблоне Protostar нет никаких «хром модулей»? Оказывается, есть: «хром модуль» Well.

Если мы на панели Менеджер шаблонов (Template Manager) нажмём клавишу Настройки (Options)   и на открывшейся панели Настройки менеджера шаблонов (Configure the template Manager) установим для параметра Просмотр позиций модулей (Template Preview) значение Включено (Included) , а потом вернёмся на панель Менеджер шаблонов (Template Manager), зайдём на панель Стили (Styles) и напротив стиля protostar-Default(2) нажмём на синий глаз  , то мы, как помнится, увидим наш сайт, на котором будут отмечены позиции всех модулей. И что самое интересное, на тех позициях, на которых стоят модули Reklama1 и Рубрики будут стоять приинтереснейшие названия: Position: position-7 [ Style: well outline]. А что это значит? А это значит, что модули стоящие в позиции position-7 – это «хром модули» Well. А какие модули стоят у нас в позиции position-7? Правильно, дорогой товарищ, в позиции position-7 у нас стоят модули Reklama1 и Рубрики.

 

 

То есть модули Reklama1 и Рубрики уже отображаются в каком-то специфическом стиле, который характерен для «хром модулей» типа Well. И тогда вопрос: в чём специфичность, в чём необычность этого стиля. А оказывается, в рамке. Если присмотреться внимательно, то видно, что все рубрики, все разделы, написаны внутри квадрата. Квадрат этот выделен рамкой (его края обведены) и по цвету чуть-чуть, совсем немного, но всё же отличается от белого поля сайта. Та же история с модулем Reklama1. Рекламка, которая светится сразу под Рубриками, светится в таком же квадрате, что и сами Рубрики. Этот квадрат также имеет рамку, и его цвет также отличается от поля сайта – пусть совсем немного, но отличается. А вот справа от модуля Рубрики тоже есть реклама, размещённая в позиции position-8. «Ну есть, и что же?» - спросите Вы. И правильно сделаете, что спросите, а мы Вам ответим: «А то, что реклама в позиции position-8 не обведена никаким контуром. И вообще контуром и цветом выделены только квадраты модулей, расположенных в позиции position-7. Это и есть «хром модули» в стиле Well.

Для того чтобы посмотреть, как изменится стиль меню, если его переместить на другую позицию, то есть если его из «хром модуля» превратить в обычный модуль, надо взять и переместить меню на позицию, скажем position-8.

Итак, вне зависимости от того, где мы находимся на Панели управления (Control Panel) вернёмся на панель Менеджер модулей (Module Manager): пункт верхнего меню Расширения (Extensions) Менеджер модулей (Module Manager). Щёлкнем мышью на модули Рубрики, для того, чтобы оказаться на панели Менеджер модулей: Модуль «Меню» (Module Manager: Module «Menu») на вкладке Модуль (Module). Здесь в правой части расположен до боли знакомый нам параметр Позиция (Position). Попробуем присвоить ему значение position-8.

 

 

Сохраним сделанные изменения: Сохранить (Save) , или Сохранить и закрыть (Save and close)  .

Ну, и теперь нам остаётся выяснить, каков же результат наших усилий: заходим на наш сайт и обновляем его  . И… мы видим потрясающую воображение картину: меню Рубрики со всеми своими рубриками уехало вверх влево. Это необычно, свежо, ново.

 

 

Однако вопрос не в том, что новое место для меню – это необычно, свежо и ново; и вопрос даже не в том, что меню Рубрики уехало вверх и влево; а вопрос в том, что оно просто расположено на белом фоне сайта. Просто на белом фоне, и всё: ни тебе рамки, ни тебе цвета, чуть-чуть отличающегося от цвета поля; в общем, ничего. Вот когда «ничего» – это и есть обычный модуль. А вот, если как раньше: рамка, небольшое отличие модуля в цвете от поля сайта – это и есть «хром модуль» Well. Вот что, вот как, а Вы говорите… Вон оно как бывает, не то что…

Да уж… Но всё-таки не понятная это какая-то история, мудрёная какая-то. Ну, сами подумайте, что это такое: сделали сайт в стиле шаблона Beez3; хотим сделать модуль Hide (Скрытый), чтобы видно было только один заголовок, а модуль полностью отрывался только после щелчка мышью; или хотим сделать модуль Tabs (Вкладки), чтобы можно было в одном модуле переходить с одной вкладки на другую; и нам предлагают в обязательном порядке поставить модуль в позицию position-4, и он станет модулем Hide (Скрытый); или поставить модуль в позицию position-5, и он будет модулем Tabs (Вкладки). Или другой пример: сделали сайт в стиле шаблона Protostar; хотим сделать модуль, чтобы он чуть-чуть отличался по цвету от поля сайта, а ещё выделялся рамкой; и нам предлагают сделать такой модуль и поставить его в позицию position-7, и тогда он будет «хром модулем» Well, чуть-чуть отличающимся по цвету и обведённым рамкой. Так скажите, мне ради всего святого, почему? Почему стиль модуля связан с позицией. А если я, в конце концов, хочу модуль в позиции position-8 обвести рамкой и выделить цветом, чуть-чуть отличающимся от цвета поля сайта, почему я этого не могу сделать?! Тише, тише, оказывается можно. Об этом, может быть, и не все знают, но Вы коли так уж хотите, то мы Вам расскажем.

Рассказываем. В Панели управления (Control Panel) откроем панель Менеджер модулей (Module Manager): пункт верхнего меню Расширения (Extensions) Менеджер модулей (Module Manager). Щёлкнем мышью на модули Рубрики, для того, чтобы оказаться на панели Менеджер модулей: Модуль «Меню» (Module Manager: Module «Menu»). Выбираем вкладку Дополнительные параметры (Advanced Options). Спускаемся в самый низ и находим параметр Стиль модуля (Style Module). Параметру присвоено значение Унаследовано (Inherited). Надо поменять на значение well.

 

 

И странное дело, зайдя на наш веб-сайт, и обновив его, мы обнаружим, что модуль Рубрики, даже не смотря на то, что он стоит в позиции position-8, имеет рамку и собственный цвет, чуть-чуть отличающийся от цвета поля сайта, то есть модуль Рубрики стал «хром модулем» Well. А это значит, что любой модуль, в какой бы позиции он не стоял, может стать «хром-модулем», то есть приобрести специфический стиль, если соответствующее значение будет присвоено Параметру Стиль модуля (Style Module) на вкладке Дополнительные параметры (Advanced Options) на панели Менеджер модулей: Модуль «Меню» (Module Manager: Module «Menu»).

 

 

Так что же у нас получается? А получается, что у нас могут возникнуть две проблемы. А решить из этих двух проблем можно только одну: либо первую, и тогда вторая остаётся неразрешимой; либо вторую, и тогда первая остаётся не у дел. А всё дело в том, что решение проблемы привязано к конкретному стилю шаблона. Если мы решили делать сайт в стиле Beez3, то нам по зубам решение проблемы слишком большого модуля, который занимает слишком много места. Однако у нас не получится решить проблему выделения модуля на фоне сайта – в этом стиле эта проблема не разрешима. Однако если мы создадим сайт в стиле шаблона Protostar, то у нас будут инструменты для того, чтобы выделить модуль на фоне сайта. Но проблема слишком большого модуля окажется нам не под силу. Так что из двух проблем мы можем решить только одну, решением другой придётся пожертвовать. В конце концов, не можем же мы создать сайт сразу в стилях двух шаблонов. А вот Joomla! устроена так, что один шаблон у неё решает одну проблему, а другой – другую. Так что выбирайте, какую проблему решать.

Если очень актуальна проблема слишком большого модуля, который занимает слишком много места, то надо менять стиль сайта на стиль шаблона Beez3. Ведь именно в этом стиле мы можем разбить модуль на две вкладки («хром модуль» Tabs) или сделать модуль в виде ниспадающего списка («хром модуль» Hide).

А вот выделение модуля ото всего остального, что есть на сайте, - задача для стиля шаблона Beez3 не подходящая. Если нам очень надо решить эту проблему, то придётся изменить стиль сайта на стиль шаблона Protostar. В этом стиле есть модуль, поле которого выделяется рамкой, а цвет чуть-чуть отличается от цвета сайта. Это «хром модуль» Well.

Получается, что какую проблему мы не решаем, делаем мы это за счёт неких нестандартных модулей – модулей, непохожих на обычные модули. Вот эти необычные модули, или модули со специальным стилем, получили название «хром модули». И самое необычное во всей этой истории, так это то, как сделать модуль «хром модулем». Оказывается, что за «хром модулями» закреплены свои позиции – свои места на сайте. И для того чтобы модуль сделать «хром модулем», нужно просто ему назначить соответствующую позицию. Так, если в стиле Beez3 мы поставим модуль на позицию position-5, то он автоматически станет модулем с двумя вкладками – «хром модулем» Tabs. Если же мы его поставим на позицию position-4, то он превратится в ниспадающий список – в «хром модуль» Hide. С сайтом, сделанном в стиле Protostar, другая история. Если мы хотим для такого сайта сделать модуль с рамкой и отличающимся цветом, то есть сделать «хром модуль» Well, то нужно взять обычный модуль и поставить его в позицию position-7.

Такая жёсткая привязка «хром модулей» к соответствующим позициям несколько обескураживает. Но оказывается не всё так страшно. «Хром модули» привязали к позициями так, для примеру, для демонстрации. А в общем-то, можно взять любой модуль, стоящий на любой позиции, зайти в него и на вкладке Дополнительные параметры (Advanced Options) параметру Стиль модуля присвоить значение Well. И вы не поверите, но модуль обзаведётся рамкой и отличающимся от остального сайта цветом, то есть станет «хром модулем» Well, даже не смотря на то, что не стоит в позиции position-7. Вот такая история.

 

 

Смотрите: Создание дизайна сайта. Выводы и содержание.