Как на юкозе поменять шапку. Изменяем заголовок (шапку) prosilver

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

Изменить шапку Вашего сайта в «Нубексе» очень легко: для этого зайдите в админку, в меню управления (слева) выберите раздел «Оформление» , а в нем — пункт «Шапка страницы» .

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

Также Вы можете выбрать пустую шапку (без фона) , если хотите сконцентрировать внимание пользователей на логотипе и текстовой информации.

Как сделать собственную шапку сайта

Если ни один из готовых шаблонов Вам не подошел, можно создать шапку самостоятельно. Для этого найдите в списке пункт «Собственная шапка» и нажмите кнопку «Редактировать» .

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

Обратите внимание: допустимые форматы файла для загрузки — jpeg, jpg, gif, png, ico ; максимальный размер — 10 Мб ; в высоту изображение должно иметь не меньше 90 пикселей . Верхней границы для высоты шапки нет, но не стоит грузить слишком большие изображения. Иначе шапка займет большую часть экрана, не оставив места для информации самих страниц. Как правило, высоты в 250-300 пикселей достаточно для размещения логотипа, слогана, адреса и контактных данных.

После загрузки изображения настройте выравнивание шапки : по центру, слева или справа. Особенно это важно, когда ширина загруженного изображения сильно превышает ширину колонки (940 пикселей) . В этом случае от выравнивания будет зависеть, какие части картинки отобразятся в шапке, а какие — нет.

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

Начинаем серию уроков по редактированию шаблона Joomla 2.5. В этом уроке мы рассмотрим

Необходимо сразу сказать, что этот процесс на разных шаблонах разных разработчиков будет проходить по своему. Поэтому постараюсь рассказать сам принцип поиска местонахождения позиции хейдера, логотипа и правки CSS. Как всегда рекомендую все манипуляции с сайтом делать на локальном сервере Денвер (Denwer) Чтобы не заморачиваться давайте возьмем шаблон, установленный на этом сайте.

Для начала необходимо определить в какой позиции модуля находится наш header и какие еще в шапке сайта есть позиции. Для определения позиций модулей в шаблоне Joomla 2.5 после нашего сайта набираем ?tp=1 . То есть это будет выглядеть так: http://ваш_сайт/?tp=1 .

Обновляем страницу (F5) и… ничего не видим. Значит в административной части сайта отключен показ позиций сайта. Идем в админку, заходим в настройки

и включаем показ позиций как показано на фото внизу. Не забываем сохранится.

Обновляем еще раз страницу. Все. Позиции модулей появились. Видим, что их несколько: headerbar, logo, counter, banner. При этом видим, что условные размеры позиций подсвечиваются (counter, banner), а вот headerbar, logo нет.

Чисто логически понимаем, что позиция модуля headerbar отвечает за шапку сайта, а позиция logo за логотип.

Мое личное убеждение, что всегда надо проверить простые пути решения проблемы, а если не получилось, то тогда и лезть вглубь. Самое простое это зайти в настройки самого шаблона Joomla 2.5 и посмотреть, какие настройки там есть. В любом случае, как при установке просто шаблона на Joomla 2.5 , или после установки шаблона Joomla 2.5 из быстрого старта «QuickStart» первым делом необходимо заходить в настройки шаблона и разбираться с его возможностями по настройке. При этом даже нет необходимость русифицировать Joomla 2.5 так как сам шаблон все равно не будет переведен на русский язык.

Многие разработчики шаблона в его настройках дают возможность редактирования шапки (Header) , а также Footer (футер) сайта и многих других примочек. Однако среди множества настроек в этом шаблоне легкого пути не нашлось.

И так, зная позицию шапки, как headerbar идем в «Расширения – Менеджер модулей» и в выпадающем меню «Выбор позиции» ищем позицию headerbar. Ее там нет и это правильно, потому что самой шапки в шаблоне нет. Есть только логотип. Наиболее правильный и быстрый способ вывода header на сайте это в «Менеджере модулей» жмем кнопку «Создать».

И в выборе типа модуля выбираем «HTML код». С его помощью мы сможем не только вывести часть Html кода, но и разместить картинку нашей шапки.

Однако, что бы выводить header в позицию модуля его необходимо предварительно подготовить, а для этого нам надо знать ширину и длину позиции модуля. Вспоминаем классный плагин Firebug для Firefox и начинаем его использовать. С помощью этого расширения исследуем позицию headerbar и видим

что за его позиционирование отвечает файл layout.css и его высота составляет 110 пикселов. Кстати вы можете изменить ширину до нужных вам размеров в этом файле CSS. Теперь необходимо определиться с длиной нашей шапки. В большинстве шаблонов ширина его задается в настройках. Заходим в наш шаблон и в настойках видим что длина нашего шаблона составляет 1100 пикселов. Вот теперь мы можем подготовить нашу шапку с необходимыми параметрами с помощью программы для редактирования графики (допустим Adobe Photoshop). Я не буду рассказывать как это делается. Этому посвящены целые сайты.

Подготовленный файл с шапкой забрасываем в папку «images – stories» сайта, но не шаблона. Теперь размещаем его с помощью модуля «HTML код». Заголовок скрываем. Выбираем позицию headerbar и сохраняемся.

Кстати так можно сделать, что бы на разных страницах сайта отображался различный header. Готовим несколько шапок, переносим их в вышеуказанную папку и размешаем с помощью нескольких модулей «HTML код» с выводом на определенных пунктах меню.

С хейдером разобрались. Отредактируем теперь логотип. Зная позицию модуля, а именно logo проверяем ее. Заходим в «Расширения – Менеджер модулей» и в выпадающем меню «Менеджер позиции» ищем позицию logo. Есть такая и в ней даже указан путь к картинке с именем logo.png. Но отключив ее, изменений на сайте мы не видим. Значит, эта картинка используется только при накатывании просто шаблона на уже установленную Joomla 2.5. Но при установке шаблона Joomla 2.5 из быстрого старта «QuickStart» как у нас используется картинка из другой папки. И естественно из шаблона.

Поэтому начинаем искать другой путь. Опять же с помощью плагина Firebug для Firefox исследуем логотип шаблона и видим,

что за его позиционирование отвечает тот же файл layout.css и чтобы увидеть, где он находится (путь к файлу) открываем его в новой вкладке. С помощью программы Notepad++ открываем и ищем строку 259.

Тут мы можем экспериментировать с шириной, длиной логотипа. Не забываем сохранятся, и обновлять страницу сайта, чтобы посмотреть результат. Еще одно огромное преимущество Notepad++ это то, что можно всегда вернуться к исходному состоянию файла, но только если вы не закрыли окно Notepad++. К исходному состоянию возвращаемся при помощи кнопки «Отмена».

Ну а для изменения дизайна логотипа нам потребуется Adobe Photoshop и элементарные знания данной программы.

Таким образом мы рассмотрели с вами как отредактировать (поменять) шапку (Header) в шаблоне Joomla 2.5.

Удачи Вам в ваших начинаниях.

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

Итак, как поменять шапку сайта на okis.ru ? Для начала разархивируйте файл, который Вы скачали и найдите там шапку сайта, которая имеет название shapka.png . Нам нужно её загрузить на наш сайт. Как это сделать? Зайдите в пункт «Загрузка фото» в панели управления сайта.

Здесь Вы можете загружать изображения на сайт.

Прежде чем загружать шапку нашего коктейльного сайта, обязательно снимите галочку с «Уменьшить размер изображение до 500 х 500 px» , так как шапка шире чем 500 px. Галочку сняли, теперь жмем «Обзор», затем находим файл shapka.png и нажимаем «Открыть».

После того, как Вы загрузили изображение, ниже Вы увидите ссылку, где находится шапка нашего сайта.

Зайдите в редактор CSS -> Редактировать CSS . На этот раз мы воспользуемся вспомогательными кнопками. Нажмите на кнопку «Шапка сайта» и введите тот адрес ссылки на картинку с шапкой, который показан в админке Вашего сайта, после чего нажмите «Сохранить».

Нажмите «Обновить». Вы увидите, что в поле, где пишутся все стили, появился новый код:

div.art-header-jpeg {background: url(/ПУТЬ_К_ФАЙЛУ/ shapka.png );}

Это и есть стили для шапки сайта.

В моём случае путь к файлу такой: /img/cocktail60/shapka.png

Значит в моей админке написан следующий код:
div.art-header-jpeg {background: url(/img/cocktail60/shapka.png );}
У Вас же ПУТЬ_К_ФАЙЛУ к шапке другой , поэтому Вы копируете ту ссылку, которая показывается у Вас в админке.

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

Дело в том, что во всех шаблонах сайта okis.ru, где есть закругленные углы , шапка состоит из двух частей: из основной картинки , которую мы загрузили и из контура шапки . Давайте поменяем контур шапки. Зайдите снова в пункт «Загрузка фото» в панели управления сайта и загрузите там файл shapka_kontur.png . Перед загрузкой контура шапки не забудьте снять галочку с «Уменьшить размер изображение до 500 х 500 px». В админке нет кнопки «Контур шапки», поэтому мы добавим стили вручную для данного элемента. В редакторе CSS с новой строчки нам нужно прописать следующий код:

div.art-header-png {background: url(ПУТЬ_К_ФАЙЛУ/ shapka_kontur.png );}

В моем случае путь к файлу контура шапки такой:
Поэтому я прописываю следующий код:
div.art-header-png {background: url(/img/cocktail60/shapka_kontur.png );}
Не забывайте о том, что Ваш путь к файлу отличается от моего.

Сохраните изменения.

Если Вы обновите наш сайт, то увидите, что синих уголков больше не наблюдается.

Теперь Вы знаете, как поменять шапку сайта в конструкторе сайтов ОКИС. В следующем уроке Вы узнаете, как поменять низ сайта на okis.ru .

Дополнительные уроки по созданию и ведению сайта на OKIS:
Урок№9. Как организовать общение на сайте, сделанном на okis.ru
Урок№10. Как активировать сайт на okis.ru с помощью WebMoney
Урок №11. Учимся добавлять новую страничку на okis.ru и работать с содержимым страницы

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

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

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

Специально для этой статьи, я сделал скриншот одной чудесной шапки, случайно найденной в интернете, у какого-то сайта и буду её улучшать, подробно описывая весь процесс.

Так выглядела шапка до изменений:

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

Что бы я изменил в дизайне?

1. Шрифт и цвет у логотипа
2. Размер и цвет остального шрифта
3. Убрать зеленую полосу
4. Блок с контактами разместить на верхней панели

После изменений:

Между тегами head в HTML файле:

//прописываем мета тег для адаптивности

//подключаем другие шрифты

//подключаем библиотеку Font Awesome

//подключаем внешний файл стилей, сюда будем писать стили

//скачиваем и подключаем файл нормализации стилей

Делать верстку мы будем на flexbox .

Первый ряд – панель с контактами (top header).

HTML разметка

В блок-контейнер с классом top-header , поместим три флекс-элемента – абзацы с текстом.

CSS стили

Инфоблоки встанут в ряд благодаря display: flex . Свойство space-around равномерно распределяет пустое пространство между инфоблоками. Однопиксельная серая рамка, визуально разграничит верхнюю панель от самой шапки.

/* Флекс контейнер для верхних инфо-блоков */
.top-header {
display: flex;

padding: 5px;
font-size: 100%;
border-bottom: 1px solid #efd0d0;
position: relative;
}

Выделим некоторые слова зеленым цветом.

/* Зеленый цвет у текста инфо-блоков */
.top-header .green {
color: #b2db41;
font-weight: bold;
}

Временно подсветим красной и черной рамками, чтобы было ясно, где флекс-контейнер, а где флекс-элементы.

Второй ряд – шапка (header)

Слева направо, первым идет логотип, а затем навигационное меню.

HTML код

Начинается с открывающего тега header , внутри которого блок с логотипом. Логотип вставляется, как ссылка, ведущая на главную страницу.