Печать
Категория: Редактирование стиля шаблона Protostar
Просмотров: 3872

 

В общем-то, редактирование стиля шаблона Protostar очень даже похоже на редактирование стиля шаблона Beez3. И это правда: очень похоже, но не совсем. С одной стороны, очень даже и похоже, но, с другой стороны, чем-то и отличается. И чем отличается – это ещё надо понять. Однако при редактировании стиля шаблона Protostar мы сталкиваемся с необходимостью решать те же самые три задачи, что были и при редактировании стиля Beez3.

Во-первых, в список всех стилей на вкладке Стили (Styles) панели Менеджер шаблонов (Template Manager) нужно добавить новый стиль, ну, или по-другому, создать файл стиля. Ну как создать, создать-то мы его не сможем, но сможем скопировать существующий стиль Protostar и переименовать его. Во-вторых, мы должны решить вторую задачу, а именно сделать так, чтобы наш сайт отображался в новом, только что введённом нами, стиле. Для этого нам нужно назначить созданный нами стиль стилем по умолчанию, а потом ещё все разделы сайта, все страницы привязать к новому стилю. Поскольку каждому разделу сайта соответствует свой раздел меню, то говорят ещё: «нужно привязать пункты меню сайта к новому стилю».

 Ну и наконец, надо решить третью задачу: отредактировать стиль шаблона Protostar на специально выделенной для этого вкладке Дополнительные параметры (Advanced Options). Вот здесь-то как раз между редактированием стиля Protostar и редактированием стиля Beez3 и возникают отличия. И надо сказать, что отличия эти в пользу стиля Protostar. В том смысле, что параметров редактирования меньше, а процесс редактирования проще. У нас есть возможность поменять цвет текста, но не всего текста, а только гиперссылок. За цвет текста отвечает в Joomle! совсем другой менеджер - Менеджер материалов (Article Manager), а не Менеджер шаблонов (Template Manager). И, конечно же, можно поменять цвет фона сайта, а ещё отредактировать заголовок, описание и логотип сайта. И можно изменить шрифт заголовка – Joomla! использует шрифты с сервера Google. А ещё можно задать алгоритм, по которому сайт будет подстраиваться под мониторы. То есть мы можем определить, как сайт будет вписываться в экран компьютера, в экран планшета и в экран мобильного телефона. А вписываться он должен так, чтобы пользователю было удобно наш сайт читать. Ну вот, как видим, всё сходится: что в случае с редактированием шаблона Beez3, что и в случае с редактированием шаблона Protostar – решаются три задачи:

1. Копируется и переименовывается файл стиля в списке стилей на вкладке Стили (Styles) панели Менеджер шаблонов (Template Manager).

2. Делается так, чтобы весь сайт, все его разделы отображались в новом стиле.

3. На вкладке Дополнительные параметры (Advanced Options) редактируется стиль шаблона.

Вот так и получается, то, что называют «дизайн сайта».

 

Даже уже в установочном комплекте Joomla! (не говоря уже о других возможностях) идёт два шаблона. И как мы понимаем, кроме шаблона Beez3 есть ещё шаблон Protostar. Соответственно, и на панели Стили (Styles) будет стиль, соответствующий шаблону Protostar. И стиль соответствует шаблону Protostar, и название стиля соответствует слову Protostar. Но…

Но… Коли мы решили поредактировать стиль, то лучше создать копию, и редактировать её. Если редактирование зайдёт не просто далеко, а в далёкий тупик, то копию можно будет просто удалить и вернуться к оригиналу. Это вообще хорошая рекомендация: создавать копии стилей. С помощью этого приёма мы значительно упрощаем себе жизнь, когда запутываемся в дизайнерских ошибках. Например, мы можем сделать копию стиля Protostar, и назвать её protostar-Default, а затем сделать ещё одну копию, и назвать её Protostar-Default(2).

 

 При желании можно щёлкнув мышью на стиле Protostar-Default(2) выйти на панель Менеджер шаблонов: Изменить стиль (Template Manager: edit Styles) и там изменить имя стиля.

 

Но вернёмся к панели Менеджер шаблонов (Template Manager) и на вкладку Стили (Styles). Здесь мы видим, что напротив стиля protostar-Default(2) стоит жёлтая звёздочка . Это значит, что стиль protostar-Default(2) назначен стилем по умолчанию. Правда, здесь Joomla! (как впрочем, и не только здесь, но и много где ещё) запасла маленькую невинную шутку. То, что мы назначили стиль protostar-Default(2) стилем по умолчанию, считай главным, это совсем не значит, что все страницы взяли, и начали отображаться в стиле protostar-Default(2). Совсем нет, они как отображались в прежнем стиле, то бишь в стиле Beez3, так в нём и отображаются. А стиль по умолчанию будет действовать только для новых страниц. Вот если мы создадим новую страницу, у которой будет свой пункт меню, то она автоматически будет создана в новом стиле protostar-Default(2). Так что назначение стиля protostar-Default(2) стилем по умолчанию нам не помогло, и не перевело автоматически весь наш сайт в новый стиль. Чтобы всё-таки не только новые, но и прежние страницы сайта отображались в новом стиле, надо к нему привязать пункты меню.

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

 

Меню, мы что-то, подумали, подумали, и переименовали в Рубрики. Поэтому «Рубрики» это и есть Меню. И в это Меню входят целых четыре пункта: Создаём сайты с CMS Joomla!; Установка Joomla!; Настройка (конфигурирование) сайта на Joomla!, Ветер. И в квадратиках напротив каждого пункта ничего не стоит – пусто. Вот благодаря этой пустоте и нет никакой привязки пунктов меню к стилю protostar-Default(2), и скрывающиеся за пунктами меню страницы не отображаются в этом стиле. Исправить ситуацию легко – нужно всего лишь расставить галочки. Галочки расставляем так, как нам хочется. Хочется, все пункты меню привязываем к стилю protostar-Default(2), и все страницы сайта будут отображаться в этом стиле. Хочется, привязываем к стилю protostar-Default(2) только некоторые пункты. И нам определённо хочется, чтобы все страницы сайта отображались в стиле protostar-Default(2), и мы все пункты Меню привязываем к этому стилю.

 

Не забываем нажать на клавишу Сохранить . Всё, теперь все страницы сайта отображаются в стиле protostar-Default(2).

 

 

Стиль шаблона Protostar позволяет установить два цвета. На панели Менеджер шаблонов (Template Manager) на вкладке Дополнительные параметры (Advanced Options) есть даже целых  два параметра: Цвет текста (Text color) и Цвет фона (Background color). Вот только надо понимать, что скрывается за словом «текст». Мы можем сколько угодно менять цвет в параметре Цвет текста (Text color), но цвет текста сайта не изменится. И действительно, шаблоны и стили, как и сам Менеджер шаблонов (Template Manager) не отвечают за текст, или, другими словами, за контент. За контент, в том числе и за его цвет, отвечает Менеджер материалов (Article Manager).  

Остаётся вопрос: зачем же тогда нужен параметр Цвет текста (Text color)? И за что может отвечать параметр Цвет текста (Text color), если за цвет текста он не отвечает? Так вот оказывается, что параметр Цвет текста (Text color) позволяет менять цвет не всего текста, а только гиперссылок. То есть, если текс – это ссылка на другую страницу, или на другой сайт, то цвет такого слова и будет определяться параметром Цвет текста (Text color). Прежде всего, ссылки у нас стоят в Меню (напомним, что Меню на нашем сайте называется Рубрики).

Если параметр Цвет текста (Text color) принимает значение #0088cc, то пункты меню Рубрики будут окрашены в светло-синий цвет.

 

 

Мы можем поменять цвет. Если в параметре Цвет текста (Text color) нажать на квадратике с цветом, то откроется цветовая панель. И наша воля, выбрать то, что нам по душе, например цвет #cc0018. После этого нужно не забыть нажать на клавишу Сохранить . И дальше остаётся только посмотреть, что сталось с цветом ссылок на нашем сайте.

Дизайнеры говорят, что нужно стараться подбирать цвет ссылок под цвет фона. Или цвет фона под цвет ссылок. И у нас как раз есть параметр Цвет фона (Background color). На текущий момент для этого параметра установлено значение #ebb596. И именно поэтому фон сайта окрашен в светло-коричневый цвет.

 

Но нам ничего не мешает изменить этот цвет так, как угодно. Например, мы можем установить для параметра Цвет фона (Background color) значение #fa0313. Не забудем нажать на клавишу Сохранить . И получим ну просто невероятный цвет фона на нашем сайте.

Панель Менеджер шаблонов (Template Manager) предлагает нам ещё несколько возможностей по изменению общего вида сайта. Для этого на вкладке Дополнительные параметры (Advanced Options) предусмотрено несколько параметров: Логотип (Logo), Заголовок (Title), Описание (Subheading).

Мы не знаем, какой из этих параметров самый главный, но явно самый главный параметр – это Заголовок (Title). Ведь он отвечает за то, какое название сайта будет на этом сайте отображаться. Разработчики Joomli! подумали, подумали и решили несколько упростить жизнь вебмастерам. А именно, они сделали такую штуку, что параметр Заголовок (Title) автоматически берёт из общих настроек веб-сайта его название. То есть, когда мы откроем панель Менеджер шаблонов (Template Manager) и вкладку Дополнительные параметры (Advanced Options), то мы уже увидим, что параметр Заголовок (Title) принял значение, соответствующее названию нашего сайта. Когда мы устанавливали Joomlu!, мы делали конфигурирование сайта. У нас появлялось окно Конфигурация сайта. И в нём мы заполняли различные поля, в том числе и Название сайта, и Описание сайта (как это было, можно вспомнить здесь...). Название и описание сайта сохраняются в настройках. Именно оттуда они сами автоматически перекочёвывают в панель Менеджер шаблонов: Изменить стиль (Template Manager) на вкладку Дополнительные параметры (Advanced Options). Поскольку всё происходит автоматически, то мы можем вообще не обращать внимания на параметры Заголовок и Описание. Вместо этого мы можем поблагодарить разработчиков Joomla! за то, что они пусть и чуть-чуть, но упростили нам жизнь. Про себя мы будем надеяться, что упрощая нам жизнь в этом случае, они не усложнят её в другом.

Если мы всё оставим как есть, то у нас, скорее всего, получится следующая ситуация.

Ситуация эта несколько парадоксальная. У нас в обоих параметрах: и в Заголовке (Title), и в Описании (Subheading) в качестве значений задан один и тот же текст: «Создание сайта с помощью CMS Joomla!». В результате наш сайт начинается с двух совершенно одинаковых предложений. Для того чтобы изменить ситуацию, не нужно менять название сайта и описание сайта в настройках (на панели Общие настройки (Global Configuration)), можно поменять название и описание сайта на панели Менеджер шаблонов: Изменить стиль (Template Manager: Change the style), на вкладке Дополнительные параметры (Advanced Options).

Но можно этого не делать, а сделать нечто другое. Можно вообще отказаться от заголовка, а вместо него установить картинку. Функцию заголовка тогда будет выполнять описание. Смотрите, как это интересно может получиться. Обратим внимание на параметр, о котором мы до сих пор молчали, - Логотип (Logo). Здесь нажимаем на клавишу Выбрать (Choose)   и заходим в Каталог Медиа-менеджера (Media Manager). В каталоге мы можем подыскать рисунок на должность логотипа сайта. Можно выбрать из тех, которые сюда были загружены разработчиками, то есть входили в установочный комплект Joomli!, а можно самим загрузить понравившийся нам рисунок: на Панели управления (Control Panel) выбираем Пункт верхнего меню Материалы – Медиа-менеджер.

 

 

Выбираем папку, например banners.

 

Находим слева сверху и нажимаем клавишу Загрузить (Download). Затем нажимаем клавишу Выбрать файл (Choose)  и находим файл на нашем компьютере – Нажимаем ОК – Нажимаем Загрузить (Download).

 

 

Вот таким образом, мы, например, загрузили в папку banners рисунок в формате JPEG vpered1. Поэтому теперь на панели Менеджер шаблонов: Изменить стиль (Template Manager: edit Styles), на вкладке Дополнительные параметры (Advanced Options) мы можем нажать на клавишу Выбрать (Choose) . Мы окажемся в Каталоге Медиа-менеджера (Media Manager). Откроем папку banners. Щёлкнем на файле vpered1.jpeg и нажмём на клавишу Вставить (Paste).

 

 

Мы опять окажемся на панели Менеджер шаблонов: Изменить стиль (Template Manager: edit Styles), на вкладке Дополнительные параметры (Advanced Options). В поле параметра Логотип (Logo) будет отображаться адрес нашего рисунка, по которому он находится в Каталоге Медиа-менеджера (Media Manager).

 

Чтобы всё получилось, нам нужно не забыть сделать одну замечательную вещь – нажать на клавишу Сохранить .

И что же мы получили? А получили мы следующее. На панели Менеджер шаблонов: Изменить стиль (Template Manager: edit Styles), на вкладке Дополнительные параметры (Advanced Options) параметр Логотип (Logo) в качестве своего значения содержит ссылку на рисунок vpered.1.jpg. Параметр Заголовок (Title) в качестве значения содержит текст «Создание сайта с помощью CMS Joomla!». Но параметр Заголовок (Title) никак не влияет на общий вид сайта, потому что включен и активен параметр Логотип (Logo). В значении параметра Описание (Subheading) тоже стоит текст «Создание сайта с помощью CMS Joomla!».

В результате всего этого на сайте в самом верху отображается рисунок vpered.1.jpg в виде мальчика, прыгающего в воду в оранжевых тонах. А под рисунком выводится текст из параметра Описание (Subheading) «Создание сайта с помощью CMS Joomla!». Заголовок на сайте не отображается. И на наш взгляд это выглядит вполне так себе красивенько.

 

На панели Менеджер шаблонов: Изменить стиль (Template Manager: edit Styles), на вкладке Дополнительные параметры (Advanced Options) есть параметры, которые отвечают за шрифт заголовков. Причём Joomla! устроена так, что шрифты заголовков – это шрифты от Google.

 

В поле параметра Название шрифта Google (Name of the Google font) можно указать, каким шрифтом Google будет написан заголовок сайта. Название желаемого шрифта просто вводится в поле, и шрифт заголовка и всех подзаголовков на страницах веб-сайта меняется.

И тут же возникает вопрос о судьбе остального текста. Ведь на нашем сайте кроме заголовков, должен быть и ещё какой-то текст. Ему же тоже должны быть назначены какие-то шрифты, а у нас шрифты задаются только для заголовков. А вот оказывается, Joomla! устроена так, что заголовки сайта являются частью дизайна сайта, частью шаблона. За заголовки отвечают два менеджера: Менеджер шаблонов (Template Manager) и Менеджер меню (Menu Manager). А вот за текст вообще и за то, каким шрифтом он написан, отвечает Менеджер материалов (Article Manager).

Joomla! использует для заголовков те шрифты, которые предоставляет для разработчиков сайтов Google. Ситуация складывается таким образом: шрифт хранится на сервере Google, а веб-мастер ссылается в своём шаблоне на специальный веб-сайт Google. Все шрифты можно увидеть на странице https://fonts.google.com/. Здесь можно выбрать подходящий для нашего сайта шрифт. Название этого шрифта нужно вписать в поле параметра Название шрифта Google (Name of the Google font). Если название состоит из одного слова, то вводится только это одно слово. Если же название включает несколько слов, то пробелы между словами нужно заменить на знак «плюс» (+), так же, как это у нас сейчас: PT+Sans. Стиль шаблона Protostar автоматически сгенерирует CSS-код для заголовков. Можно ли не использовать шрифты Google, а использовать свой собственный шрифт? Можно, но нужно создать и загрузить свой собственный CSS-код. А о том, как это делается, мы пока не знаем. Но может быть - «пока».

При работе со шрифтами Google нужно учитывать возможные риски. Шрифты загружаются с сайта Google. А это значит, что проблемы в использовании шрифтов могут возникнуть из-за отсутствия Интернета или из-за слабого Интернета. А ещё Соединённые Штаты Америки могут ввести санкции против какой-то страны, и запретят Google предоставлять шрифты для пользователей из этой страны.

В самом низу низов на вкладке Дополнительные параметры (Advanced Options) панели Менеджер шаблонов: Изменить стиль (Template Manager: edit Styles) расположился параметр с загадочным названием Тип контейнера. Он может принимать два значения: «Резиновый» и «Фиксированный».

 

 

Что же это может означать? Оказывается шаблон Protostar, как впрочем, и шаблон Beez3, относятся к так называемым «отзывчивым» шаблонам. А «отзывчивые» они потому, что плавно подстраивают страницу под экраны с разными размерами. В том числе страничка такого сайта сможет полностью умещаться и на экране мобильного устройства. Вы можете сами посмотреть, как это происходит, если измените размер окна браузера, нажав на:

 

 

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

Вот так выглядит страница в окне, раскрытом на весь экран:

 

 

А вот, как она выглядит в окне с уменьшенными размерами:

 

Каким бы ни был размер окна, страница веб-сайта должна умещаться в нём полностью. Обратите внимание, что меню сайта (у нас оно называется «Рубрики») «уехало» вниз страницы.

Это всё хорошо, но только не понятно, как объяснить такой странный факт. Всё то время, пока мы увеличивали размер окна, уменьшали размер окна, а страница при этом замечательно в него вписывалась, всё это время параметр Тип контейнера (Container type) принимал значение, какое бы Вы думали, правильно, Фиксированный (Fixed).

Чем же тогда фиксированный макет отличается от резинового (Fluid layout)? Оказывается, если мы установим для параметра Тип контейнера (Container type) значение Резиновый (Fluid layout), сохраним эти изменения и перезагрузим страницу с нашим сайтом, мы увидим нечто неожиданное: сайт разъедется во все стороны, «съест» весь задний фон, окрашенный у нас в оранжевый цвет, и станет широким – широким – на весь экран. Наверное, это не самый лучший вариант: и текст какой-то огромный, не понятно как к нему подступиться, да и дизайн стал каким-то несуразным после исчезновения заднего фона. Поэтому, давайте, наверное, вернёмся назад, и оставим то значение параметра Тип контейнера (Container type), которое было установлено здесь по умолчанию: Фиксированный (Fixed).

Итак, как мы видим, редактирование стиля шаблона Protostar не очень сильно отличается от редактирования стиля шаблона Beez3. Как в случае с шаблоном Beez3, так и в случае с шаблоном Protostar стремление создать дизайн сайта потребует от нас решения не двух, не четырёх, а именно трёх задач. Мы должны создать, или, вернее, скопировать, новый стиль; привязать к новому стилю все разделы сайта; а потом на специальной вкладке Дополнительные параметры (Advanced Options) отредактировать вновь созданный стиль.

Решая эти три священные задачи, мы начинаем с первой, а начав с первой, мы на вкладке Стили (Styles) панели Менеджер шаблонов (Template Manager) в списке всех стилей находим стиль Protostar и копируем его. У скопированного стиля меняем имя. И теперь мы можем взять и поменять стиль всего нашего сайта на тот самый стиль, который мы только что скопировали и переименовали; то есть на стиль шаблона Protostar. Для этого нужно стиль шаблона Protostar назначить стилем по умолчанию, установив в списке стилей вкладки Стили (Styles) напротив него жёлтую звёздочку  . А затем ещё и все разделы (все страницы) сайта нужно будет привязать к стилю Protostar (ну или, как говорят, привязать к стилю Protostar все пункты меню сайта). Эта самая привязка производится на специальной вкладке панели Менеджер шаблонов: Изменить стиль (Template Manager: edit Styles).

И вот уже после всего этого, то есть после решения двух задач, мы можем перейти к задаче «номер три», от которой, собственно говоря, и будет зависеть то, каким мы в ближайшем будущем увидим наш сайт. Ведь в задаче «номер три» речь идёт о редактировании стиля шаблона Protostar на специальной вкладке всё той же панели Менеджер шаблонов: Изменить стиль (Template Manager: edit Styles). И называется эта вкладка Дополнительные параметры (Advanced Options). Вот как раз именно здесь, на этой вкладке можно поменять цвет текста. Правда под всеобъемлющим термином «Цвет текста» скрывается возможность изменить только цвет гиперссылок, например ссылок меню. За цвет остального текста, как мы помним, отвечает Менеджер материалов (Article Manager).

Кроме всего прочего мы сможем задать тот цвет фона сайта, какой нам нравится. Мы можем поменять заголовок, описание и логотип сайта. Да и вообще мы можем поэкспериментировать с этой триадой: например, взять и из трёх оставить только два, а что-то убрать. Можно убрать, например, заголовок. Если же мы всё-таки решим заголовок не трогать, то можно поменять его шрифт. Joomla! устанавливает шрифт для заголовка с сервера Google и у нас есть возможность сделать так, чтобы с сервера Google устанавливался другой шрифт. Наконец, мы можем определить, как, по какому алгоритму Joomla! будет ужимать, втискивать, всовывать и вмещать наш сайт не только в экраны компьютерных мониторов, но и в экраны планшетов, а также и в экраны сотовых телефонов. Всё это, и то, и другое, и первое, и десятое, мы сможем установить, отладить, изменить, проведя редактирование на вкладке Дополнительные параметры (Advanced Options).

Но сколько бы этапов, сколько бы шагов не было бы в списке редактирования стиля шаблона Protostar, все они, так или иначе, укладываются в решение трёх задач:

1. Создаём (или, точнее, копируем) файл стиля в списке стилей.

2. Меняем стиль сайта на стиль шаблона Protostar, или точнее привязываем разделы (страницы, пункты меню) сайта к новому стилю.

3. Редактируем стиль шаблона Protostar на вкладке Дополнительные параметры (Advanced Options).

Вот эти три шага и есть те три шага, которые ведут к созданию дизайна нашего сайта.

 

Смотрите шаг С.5. О том, как сделать так, чтобы разные страницы веб-сайта отображались в разных стилях.