CSS код

/* Стили для всех ссылок внутри флекс контейнера */
header a {
display: block;
color: #212121;
padding: 12px;
text-decoration: none; /* убирает подчеркивание */
font-size: 100%;
text-shadow: 0 1px 0 #fff;
border-radius: 4px;
}

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

/* Ширина дочернего блока под логотип */
.wrap-logo {
width: 30%;
}

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

/* Стилизация логотипа */
.wrap-logo #logo {
font-family: "Roboto Slab", serif;
font-size: 200%;
font-weight: bold;
}

Логотип смотрится свежее, если его сделать двухцветным.

/* Зеленый цвет у части логотипа */
.wrap-logo span {
color: #b2db41;

Как изменить шапку сайта. Поговорим сейчас о том, как изменить шапку сайта на wordpress и как изменить его название всего за 5 минут. Сразу же объясню, что такое шапка сайта и что в нее входит. Если знаете, то хорошо, но знают не все. И так, шапка сайта (header) это верхняя часть сайта, которая является неизменной для всех страниц. В шапку сайта, всегда встраивают наиболее важные части проекта, такие как его название, краткое описание, обратную связь, логотип, и основные страницы.
В интернет магазинах, так же указывают адрес и основной номер телефона. Шапка, это как реклама Вашего проекта, и она должна по мере возможности, быть заметной, и более того запоминаемой.
По этому, нельзя наплевательски относиться к этой части вашего проекта. Вы же делаете его для людей, так делайте же его уникальным и приятным для посетителя. Шапка сайта, это первое что видит посетитель, попав на Ваш ресурс, и ее вид должен, отложится у него в памяти. Да, к стати, почитайте еще статью, она даст вам дополнительные знания по созданию и управлению вашим проектом. Ну, все, хватит теории, приступаем к практике.

Как изменить название сайта

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


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

Для того, что бы поменять сам рисунок, который находится в шапке сайта, необходимо знать его размеры, так как вариантов это сделать много, я покажу самый простой и быстрый. Так как я пользуюсь Google chrome, скажу, как узнать размер шапки именно в этом браузере. Наводите курсор мышки на шапку сайта, нажимаете правую кнопку, и видите в выпадающем меню, в самом его низу пункт «просмотр кода элемента», нажимаете на него. В окне с кодом, ищем выделенную строку со словом header, которая и отвечает за шапку, наводите на нее курсор мышки, и видите размер, который вам и нужен. Смотрите пример на рисунке.


Зная размер шапки, ее можно подобрать, введя в строку поиска «шапки для сайта wordpress», можно заказать фрилансеру, а можно сделать самому. Что бы сделать самому, достаточно найти нужный вам рисунок подходящего размера ширины, и обрезать его по высоте, или же если рисунок очень большой, вырезать из него нужную вам часть, и сохранить.
Для того, что бы поменять шапку, необходимо зайти на Ваш хостинг (у меня sprinthost), выбрать в меню «файловый менеджер » выбрать папку public html → ваш сайт (у меня сайт) → wp-content → themes → выбрать тему, которая у вас установлена, войти в папку image, и найти здесь файл с названием header. Обязательно его просмотрите, точно ли это рисунок Вашей шапки, если да, то скопируйте название этого файла, и дайте его файлу шапки, которую хотите установить.
Теперь у Вас есть на рабочем столе готовый рисунок с названием файла шапки (у меня header.jpeg). Находясь на хостинге в папке image (как показано ниже на видео), загрузите нужный Вам рисунок для шапки (который находится на рабочем столе) в текущую директорию и нажмите сохранить(находясь в папке image, в низу есть кнопка загрузить файлы, воспользуйтесь ней для загрузки).
Кликните на звездочку, и выберите качество видео 720HD

Скачивается с бесплатных ресурсов. При всем многообразии вариантов полной оригинальности в дизайне сайта ждать не приходится. По истечении времени, развития сайта, приобретения опыта и навыков у молодого блогера естественным является желание что-то изменить в дизайне сайта, хотя бы поменять шапку (header) и, тем самым, придать оригинальность своему творению. В интернете достаточно разрозненной информации по описанию методов, инструкций смены шапки. Каждая из них предназначена для определенных вариантов тем сайта, функционал которых и механизм отражения, а значит, открытия для редактирования основных элементов дизайна различны. Обычно это и вызывает затруднения у новичков при сталкивании с конкретным вариантом темы. В настоящем материале попробуем систематизировать, дать краткое описание хотя бы основных методов замены шапки сайта . Кроме того, приведем примеры механизмов замены и редактирования шапки в виде существующих видео уроков.

Открытие картинки шапки

Копирование картинки посредством открытия меню с кнопкой«Копировать изображение» при нажатии правой кнопки мыши (рисунок 1).

Рисунок 1. Открытие картинки кнопкой "Копировать изображение"

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

Открытие картинки в браузере Mozilla Firefox. Такой метод применяется, когда настройки темы не позволяют напрямую копировать изображение шапки в браузере Opera (рисунок 2). В открывающемся окне мы не находим кнопки «Копировать изображение».

Рисунок 2. Настройки темы не позволяют копировать по кнопке "Копировать изображение"

В этом случае копируем URL сайта и вставляем в браузер Mozilla Firefox (рисунок 3).

Рисунок 3. Открытие картинки в браузере Mozilla Firefox

Открываем окно и нажимаем кнопку «Открыть фоновое изображение». Открывается (рисунок 4) header.jpg (изображение “JPEG” 962х289 пикселов). Правой кнопкой мыши открываем окно и в нем нажимаем кнопку «Копировать изображение».

Рисунок 4. Копирование картинки из браузера Mozilla Firefox

Открытие картинки из папки «Темы», сохраненной на жестком диске компьютера. Разархивируем сохраненную на нашем компьютере архивную папку с текущей темой (рисунок 5).

Рисунок 5. Архивная папка с текущей темой

Открываем разархивированную папку с текущей темой (рисунок 6).

Рисунок 6. Разархивированная папка с текущей темой

Находим папку с изображениями images, открываем ее, находим отдельное изображение шапки header (рисунок 7) и копируем его.

Рисунок 7. Изображение шапки header

Открытие картинки в браузере через скопированный URL адрес самой шапки. Этот метод можно использовать, если настройки темы позволяют скопировать адрес изображения (рисунок 8). Скопированный URL помещаем в поисковую строку браузера, открываем изображение и производим его редактирование.

Рисунок 8. Открытие картинки в браузере через скопированный URL адрес самой шапки

Открытие картинки на хостинге по коду элемента , находимому в окне, открывающемуся по кнопке «Проинспектировать элемент». Если настройки темы не позволяют напрямую скопировать адрес изображения, нажимаем на кнопку «Проинспектировать элемент» (рисунок 9)..for sale 1/images/header.ipg”).

Рисунок 9. Открытие адреса картинки шапки

Теперь заходим в файловый менеджер посредством Total Commander или FTR-менеджераFileZilla . В открывшейся файловой структуре нашего сайта находим наш сайт, каталог /wp-content/themes/ wp-content/themes/business.for sale 1/images/header.ipg и картинку шапки header.ipg (рисунок 10).

Рисунок 10. Картинка шапки header.ipg в файловом менеджере

Правой кнопкой мыши нажимаем на строку header.ipg.В открывшемся окне можем картинку для редактирования скопировать в буфер обмена, а можем нажать на кнопку «Просмотр/Правка» и картинка откроется в новом окне (рисунок 11). Щелкаем правой кнопкой мыши по открывшейся картинке, в открывшемся окне нажимаем строку «Открыть с помощью», выбираем программу для редактирования нашей шапки и открываем ее в выбранной программе.

Рисунок 11. Просмотр и открытие картинки по адресу в файловом менеджере

Редактирование картинки

В программе Adobe Photoshop;

В программе Microsoft Office.

В программе Xheader;

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

Варианты замены тем

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

Второй вариант – тема, в консоли которой отсутствует прямая кнопка «Заголовок». Тогда может быть также несколько методов:

Находим кнопку «Заголовок» через редактор тем : админ панель -> консоль –>внешний вид –> редактор –> заголовок. В нем меняемHTML код картинки на отредактированный (рисунок 12).

Рисунок 12. Замена картинки через кнопку "Заголовок" в редакторе тем

В админ панели находим «Список стилей» по пути: админ панель -> консоль –>внешний вид –> редактор –> список стилей. Находим в редакторе header и меняем на отредактированный HTML код (рисунок 13).

Рисунок 13. Замена HTML кода картинки в редакторе через список стилей

Открываем файловый менеджер посредством Total Commander или FTR-менеджера FileZilla. В открывшейся файловой структуре нашего сайта находим каталог /wp-content/themes/наименование нашей темы/images/header.ipg (рисунок 10). Нашу отредактированную картинку,сохраненную на жестком диске под тем же именем, что и header на хостинге, просто заливаем с заменой существующей.

Разархивируем сохраненную на жестком диске нашу текущую тему , находим картинку-шапку (header), редактируем ее или делаем новую и сохраняем новую в той же папке. Затем архивируем папку с темой в формате ZIP и заливаем ее на хостинг вместо существующей текущей темы по механизму предыдущего варианта.

Замена шапки сайта WP, когда прямо в консоли темы присутствует кнопка «Заголовок» ичерез файловый менеджер, открываемый посредством Total Commander или FTR-менеджера FileZilla; редактирование имеющейся и создание новой картинки в программе Adobe Photoshop

Видео урок Вячеслава Федоткина

Замена шапки сайта с объяснением процесса замены файла шапки через FTR

Замена шапки блога WordPressпо адресу URL шапки или с использованием «просмотра кода элемента»

Начинаем серию уроков по редактированию шаблона 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.

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

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

Не забудьте обновить соответствующий компонент стиля после того, как вы сделали все изменения. Для этого зайдите в Админиcтраторский раздел => вкладка Стили => prosilver (шаблоны или темы) и нажмите Обновить.

Добавить собственное изображение в заголовок

1. Прежде всего загрузите ваше изображение в папку styles/prosilver/theme/images/
2. Откройте файл styles/prosilver/theme/common.css
   Найдите:
   .headerbar { background: #ebebeb none repeat-x 0 0; color: #FFFFFF; margin-bottom: 4px; padding: 0 5px;

   Добавьте после найденного:
   height: 100px;

3. Измените высоту в соответствии с вашим изображением.
   Откройте файл styles/prosilver/theme/colours.css
   Найдите:
   

   Измените имя файла bg_header.gif на имя файла вашего изображения.

4. 
   Найдите:
   
   
   Перед найденным, добавьте:
   

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

   Найдите:
   {L_SEARCH_ADV} {S_SEARCH_HIDDEN_FIELDS}

   Перед найденным, добавьте:
   

5. Обновите тему и шаблоны.

Удалить логотип сайта

1. 
   Откройте файл styles/prosilver/template/overall_header.html
   Найдите и удалите код:
   {SITE_LOGO_IMG}
2. Обновите шаблоны.

Удалить Название и описание сайта

Откройте файл styles/prosilver/template/overall_header.html
Найдите и удалите код:

{SITENAME}

{SITE_DESCRIPTION}

Удалить окно поиска

1. 
   Откройте файл s tyles/prosilver/template/overall_header.html
   Найдите и удалите код:
   
   
   {L_SEARCH_ADV} {S_SEARCH_HIDDEN_FIELDS}
2. Обновите шаблоны.

Добавить случайное изображение заголовка

Этот способ основан на следующей статье автора pentapenguin : Knowledge Base - Adding a Random Header Image
Он поможет отображать случайный фон в заголовке, а не логотип, как указано в упомянутой статье.

1. Создайте собственные изображение и назовите их следующим образом: header_random_1.EXT (где EXT - тип файла, gif, png, jpg и т.п., учтите, что все файлы должны быть одного типа.)
2. Загрузите ваши файлы в папку images styles/prosilver/theme/images/ .
3. Откройте файл includes/functions.php .
   Найдите:
   "T_STYLESHEET_NAME" => $user->theme["theme_name"],
   Добавьте после найденного:
   "RANDOM_HEADER" => mt_rand(1, NUMBER-OF-IMAGES),
   Замените NUMBER-OF-IMAGES на количество изображений, созданных вами.
4. Откройте файл style.php.
   Найдите:
   "{S_USER_LANG}" => $user["user_lang"]
   Замените найденное на:
   "{S_USER_LANG}" => $user["user_lang"], "{RANDOM_HEADER}" => mt_rand(1, NUMBER-OF-IMAGES)

   Перед заменой вместо: NUMBER-OF-IMAGES поставьте количество созданных вами изображений.

5. Откройте файл styles/prosilver/theme/colours.css .
   Найдите:
   .headerbar { background-color: #12A3EB; background-image: url("{T_THEME_PATH}/images/bg_header.gif"); color: #FFFFFF; }
   Замените найденное на:
   .headerbar { background-color: #12A3EB; background-image: url("{T_THEME_PATH}/images/header_random_{RANDOM_HEADER}.EXT"); color: #FFFFFF; }
   Смените EXT на используемый вами тип файлов изображений.
6. Обновите тему.

Заменить значок "Изменить размер шрифта" на окно поиска

1. 
   
   Найдите:
   
2. {L_CHANGE_FONT_SIZE}

Замените найденное на:

3. 
   {S_SEARCH_HIDDEN_FIELDS}
4. Откройте файл styles/prosilver/theme/common.css .
   Найдите:
   #search-box { color: #FFFFFF; position: relative; margin-top: 30px; margin-right: 5px; display: block; float: right; text-align: right; white-space: nowrap; /* For Opera */ }
   Замените найденное на: #search-box { color: #FFFFFF; position: relative; display: block; text-align: right; white-space: nowrap; /* For Opera */ line-height: 1em; }
5. Обновите тему и шаблоны.

Добавить пункт поиска в меню

1. 
   Откройте файл styles/prosilver/template/overall_header.html .
   Найдите:
   
2. {L_FAQ}

Добавьте после найденного:


3. {L_SEARCH}
4. Обновите шаблоны.