Меню

Шапка для шаблона joomla



Шапка для шаблона joomla

Уходящий 2012-ый год знаменателен для меня тем, что уже не я сама, а мои постоянные читатели и ученики придумывают темы новых уроков. Вот одна из них:

Как изменить «шапку» шаблона Joomla!

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

Первое, что мы должны сделать, — это уяснить для себя форматы картинок, потому что «шапка» шаблона — это всего лишь картинка в определенном формате.

Самые распространенные форматы : JPG , PNG , .GIF .

Начнём с GIF. Чаще всего в этом формате используются анимированные картинки. В целях сегодняшнего урока я отыскала в интернете нужное мне изображение и сохранила его к себе на компьютер под названием shapka.gif . Вот оно:

Чудесная, хоть и грустная, «джифка», создающая впечатление реально идущего дождя. «Вес» данной картинки 327 КБ.


1. shapka.jpg

Я открываю gif-картинку в Фотошопе, а потом сохраняю её под тем же названием — shapka, но уже в другом формате — .jpg, и теперь картинка подписана так: shapka.jpg . Выглядит она совсем по-другому: анимация исчезла, остался только намёк на дождь. «Весит» картинка всего 30 КБ .


2. shapka.png

Теперь, ничего не меняя, ещё раз сохраняю картинку, но уже в формате .png.

Различия в изображениях (1) и (2) почти незаметны, только
shapka.png «весит» побольше — 58 КБ .

А теперь ещё немного поработаем в Фотошопе с картинкой shapka.jpg, сохранив её попозже в PNG . Лично я просто обожаю данный формат, потому что именно он позволяет придать картинке столь любимую мною прозрачность ( в чём вы легко можете убедиться, посетив самый первый сайт вашей училки — pavlovsk-spb.ru).

Итак, открываем в Фотошопе картинку shapka.jpg. Видим, что слой «Фон» заперт на ключ:

Щёлкнем дважды левой кнопкой мышки по этому слою, а потом в выпавшем окошке нажмём на «ОК». Всё, можем спокойно убирать с картинки всё, на наш взгляд, лишнее. Для этого нажмём кнопку инструмента «Волшебная палочка», определим допуск (я поставила 30) и начнём, как волшебница из сказки, прикладывать палочку (опять же левой кнопкой мышки) к тем местам, которые намерены убрать. Ориентируемся на мерцающий контур, выделенный палочкой: если согласны с получившимся вариантом, нажимаем на клавиатуре кнопку «Delete»:

Таким вот образом удаляем всё, что нужно удалить в соответствии с нашим замыслом, а чтобы проверить, не осталось ли «крошек», давайте добавим новый слой и зальём его для контраста черным цветом:

На тёмном фоне очень хорошо видны оставшиеся огрехи, которые можно убрать с помощью инструмента ластик. Если теперь нас всё устраивает (включая размер картинки), то черный слой надо закрыть, а оставшееся изображение на прозрачном фоне сохранить в формате PNG:

Разумеется, есть и другие варианты выделения картинки, — я остановилась лишь ну на самом простом, ну проще некуда.

Почему я так подробно остановилась на форматах картинок? — да потому что все они применяются в шаблонах Joomla!. Например, вы не сможете обойтись без PNG, если правите логотип сайта. Бэграунды, шапки тоже часто делаются в этом формате.

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

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

название сайта/templates/название шаблона/images

А теперь немного практических действий:

1. Откройте искомую папку и отыщите в ней картинку-шапку.

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

leningrad (это название сайта) /templates/voina (это название шаблона) /images

Вот примерный перечень файлов папки images моего шаблона, среди которых я сразу вижу и «шапку», т.е. файл под названием Header.jpg :

Обратите внимание на ТОЧНОЕ название моего файла: оно начинается с заглавной буквы и имеет расширение .jpg . Название вашего файла будет звучать по-другому и иметь другой формат. Суть состоит в том, чтобы в любом случае сохранять в точности название и формат, придуманные разработчиком шаблона.

Читайте также:  Урок вязания закончить шапку

2. Далее я открою картинку Header.jpg в Фотошопе и отредактирую её по своему усмотрению, вплоть до полной замены, помня, однако, об упомянутых выше двух важных вещах: нельзя менять размер изображения, а также его название и формат. В противном случае мне придётся вносить изменения и в файлы шаблона. Поскольку лишняя работа никому не в радость, то я своё новое изображение сохраняю под старым названием и в том же формате: Header.jpg. Во время сохранения система сделает подсказку, что такой файл уже существует, и спросит: «Заменить?» — я нажимаю на «Заменить», а затем перезагружаю лицевую панель сайта и любуюсь результатом. Если результат меня не устраивает, то опять принимаюсь за исправления. И так до победного конца.

По описанной схеме можно менять и остальные картинки шаблона.

Ну, теперь-то вы убедились, что изменить шапку, или header, шаблона очень и очень просто?

Источник

Шапка сайта joomla

Шапку на сайте под управлением joomla можно сделать несколькими способами. Поставить большую картинку на логотип сайта. В менеджере шаблонов графа логотип. Ставим картинку, указав ее.

Шапка делается еще по другому. Создаем новый модуль HTML-код, задаем ему позицию 1. Или выбираем какую позицию надо. В нем выбираем картинку (думаю уже знаете как сделать это) для шапки на сайте. Задаем размер изображения. Задаем размер больше. Чтоб шапка была во всю ширину окна браузера. Имейте в виду ширина шапки для резинового шаблона должна быть больше, чем для фиксированного.

Как сделать шапку сайта.

Третий способ посложней. Делаем шапку на сайте прописав картинку в css шаблона. Пример на шаблоне protostar.

Идем шаблон, папка css, файл css. Открываем его редактором. Находим строку body.site (поиском найдите) для резинового шаблона.

body.site.fluid строка для фиксированного шаблона.

body.site <
background: url(«/images/fon/1.png») no-repeat;>

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

Вот код еще. Добавлены полоски по краю окна браузера. Страница

body.site <
border-top: 3px solid #606060;
padding: 20px;
background: url(«/images/21.jpg») repeat-x,url(«/images/21.jpg») repeat-y,url(«/images/21.jpg») repeat-y right 1px,
url(«/images/88.jpg»);>

Картинка на шапку в примере выше 88.jpg, лежит в папке images. Сами пропишите, где у вас картинка лежит. Не забывайте расширение изображения прописывать.

Можно от центра страницы сделать шапку сайта.

body.site <
background: url(«/images/fon/glavnaia.jpg») no-repeat center;
background-size:100% auto; >

Если на весь фон картинку надо поставить, фиксированный шаблон внутренняя картинка body.site.fluid .

body .container наружная картинка:

body.site.fluid <
background: url(«/images/priroda.gif») no-repeat;
background-size: 100%;
background-attachment: fixed;
background-color: #000000;

На резиновый пишите в body.site.

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

Источник

Создание шаблона Joomla. Часть 4 — вёрстка шапки сайта

Продолжаем создание собственного шаблона для Joomla 3, в данной статье мы создадим шапку для нашего сайта. Причем шапка эта будет адаптирована под совершенно различные устройства. В этом нам поможет фреймворк Bootstrap и небольшие знания HTML и CSS.

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

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

  • Блок под цифрой 1 отвечает за всю шапку целиком, он будет, так скажем контейнером верхнего уровня, все остальные блоки будут расположены внутри него. Я присвоил ему идентификатор «header»;
  • Следующие блоки, которые растянуты по всей ширине страницы (цифра 2 и 3), отвечают за верхнюю и нижнюю часть шапки соответственно. Так как шапка двухцветная то логично каждый отдельный цвет вывести в разных блоках. Имена классов, которые они получили «hd-top» (сокращение от header-top) для верхнего блока и «hd-bottom» для нижнего. В принципе, можно было бы обойтись и без них, но мне так удобнее;
  • Следующая группа блоков (4 и 5) с именами классов «hd-top-cont» и «hd-bottom-cont» находятся внутри блоков 2 и 3 соответственно. Их максимальная ширина будет равна области контента — 1140 пикселей;
  • Блоки 6 и 7 с именами класса «logo-img» и «logo-txt» расположенные внутри блока 4 служат для отображения логотипа и текста-слогана;
  • И последние блоки (8 и 9) с классами «main-menu» и «str-search» служат контейнерами для главного меню и строки поиска.
Читайте также:  Связать шапку спицами узором елочка

С назначением блоков разобрались, теперь можно приступить к верстке. Составим небольшой HTML код в соответствии с вышеупомянутым расположением блоков:

Думаю, стоит пояснить, что тут к чему. Как и говорил в блоке с идентификатором «header» (

Блок с логотипом содержит обычную ссылку, в которой расположен рисунок, пусть до изображения относительный благодаря использованию php:

Блок с надписью ничем не примечателен, он содержит обычный текст:

Хочу обратить внимание на имена классов col-sx- и col-md- это специальные классы, для которых уже есть специальные стили в фреймворке Bootstrap. Их суть заключается в том, чтобы на различных устройствах делать размер блока определенной ширины (подробнее об этом я расскажу в отдельной статье).
Нижняя часть шапки точно так же состоит из двух блоков с определенным содержимым:

В качестве содержимого в этих блоках при помощи конструкции jdoc:include будут выведены определенные модули, в моем случае это модуль меню и модуль поиска, для которых выделены специальные позиции position-0 и position-1 (подробнее о конструкции jdoc:include можно почитать в данной статье).

Теперь давайте посмотрим на результат проделанной работы:

Отвратительно, не так ли? Все дело в том, что мы не использовали никаких стилей для оформления нашей шапки, за исключением Бутстрапа конечно. Хочу обратить внимание, что для модуля поиска вместо кнопки используется обычная картинка, которую необходимо назвать searchButton.gif и положить в папку images текущего шаблона. Каждый пункт меню так же содержит изображение, но из-за прозрачного цвета фона белых изображений не видно.

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

И еще, в поле «Заголовок поля» поставьте пробел, для того чтобы избавиться от надписи «Искать» рядом со строкой поиска.

Теперь можно приступать к оформлению шапки сайта, для этого открываем файл template.css и начинаем колдовать. Для адекватного оформления стилей получилось не мало, но пугаться не стоит:

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

Уже лучше, не так ли? Но если посмотреть на шрифт текста в логотипе то можно понять, что он далек от задуманного, поэтому предлагаю его поменять. Сделать это можно подключив нужный нам шрифт (смотрите статью «Шрифты для сайта — как подключить?»). В моем случае был использован шрифт Noteworthy. Как только нужный шрифт будет добавлен, результат станет еще лучше (точно такой же, как в макете).

Вроде бы все хорошо, но мы забыли об одной немаловажной детали – адаптации под мобильные устройства. Другими словами наша шапка хорошо смотрится на экранах размером от 1006 пикселей и выше. А вот если разрешение экрана будет меньше, то вся эта красота изрядно подпортится:

Результат не радует, из-за того что строка поиска не влезает в отведенное под неё место в блоке она попросту исчезает (благодаря свойству overflow: hidden) и все бы ничего, но чем меньше экран тем больше элементов шапки становятся скрытыми.

Чтобы избежать такого эффекта предлагаю сделать следующее:

  • При помощи медиа-запросов уменьшать отступы и размеры элементов в зависимости от разрешения экрана;
  • При помощи Bootstrap скрывать лишние элементы (в моем случае строку поиска) на мобильных устройствах, а вместо них выводить некую кнопку, при нажатии на которую будут отображаться дополнительные элементы меню.

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

Кнопка-открывалка как я её называю, готова. Сохраняем изменения и смотрим на получившийся результат:

Действительно, при уменьшении размера экрана до 767 пикселей появляется та самая кнопка, но если на неё понажимать Вы не заметите никакой разницы, все дело в стилях, которые мы прописали ранее (overflow: hidden). Теперь предстоит заняться медиа-запросами для того чтобы придать нашей шапке законченный вид и сделать её адаптивной под любые устройства.

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

Читайте также:  Что такое перьевой шарф

Теперь все готово, шапка нашего шаблона адаптирована совершенно для любых доступных на данный момент устройств. Кнопка-открывалка (или как её еще называют кнопка-бутерброд) выглядит отлично, а после того как пользователь на неё нажмет, появляется скрытая часть меню:

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

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

На этом статья очередная статья по созданию шаблона для CMS Joomla 3 под названием «как сделать шапку для сайта» подошла к концу. Продолжение следует…

Источник

Шапка сайта на Joomla

Пятница, 20 Март 2015 08:59

Что же такое шапка? Как все понимают, ее носить мы не будем. Что такое шапка для Джумла? Так называют титульную часть дизайна макета страницы. Шапка представляет собой сквозной элемент. Он легко проходит через все странички сайта. В шапке сайта располагают все основные элементы. Там есть меню, контактные данные, логотип.

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

Компания «Лето» занимается именно такой работой. Раскрутка сайтов Иваново уже более пяти лет занимаются этим. Они с легкостью займутся продвижением вашего ресурса и смогут вывести сайт на новый уровень.

Чтобы изменить шапку нужно открыть папку с названием темы. Там есть файл header. Это и есть шапка сайта Джумла. Нужно скопировать данный файл и отредактировать его в фоторедакторе. Используйте программы, которые удобны вам. Размеры нельзя изменять, это может повлиять на внешний вид сайта. Затем заменяем файл и все готово.

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

Теперь вы знаете, что очень важно сделать хороший логотип и шапку для Джумла. Это как визитная карточка. Поэтому отнестись нужно очень серьезно к этому.

Похожие материалы:

TZ Yоung Fitness -прекрасный шаблон для Joomla 3.2, разработанный популярной группой разработчиков от дизайнерской студии Templaza . Данный шаблон отлично подходит для создания ярких сайтов на тема

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

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

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

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

Источник