phpBB Guru • Изменяем заголовок (шапку) prosilver • Официальная русская поддержка форума phpBB3

Палыч, 08.04.2011, 00:56

Краткая инструкция по модифицированию заголовка стиля prosilver

Этот материал является переводом статьи автора prototech с сайта http://www.phpBB.com
Оригинал статьи

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

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

Добавить собственное изображение в заголовок
Удалить логотип сайта
Удалить Название и описание сайта
Удалить окно поиска
Добавить случайное изображение заголовка
Заменить значок "Изменить размер шрифта" на окно поиска
Добавить пункт поиска в меню

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

Прежде всего загрузите ваше изображение в папку styles/prosilver/theme/images/

Откройте файл styles/prosilver/theme/common.css
Найдите:

.headerbar {
   background: #ebebeb none repeat-x 0 0;
   color: #FFFFFF;
   margin-bottom: 4px;
   padding: 0 5px;

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

 height: 100px;

Измените высоту в соответствии с вашим изображением.
Откройте файл styles/prosilver/theme/colours.css
Найдите:
```
.headerbar {
   background-color: #12A3EB;
   background-image: url("{T_THEME_PATH}/images/bg_header.gif");
   color: #FFFFFF;
} 
```
Измените имя файла bg_header.gif на имя файла вашего изображения.
Откройте файл styles/prosilver/template/overall_header.html
Найдите:
```
<div id="site-description"> 
```
Перед найденным, добавьте:
```
<div style="height: 90px;"> 
```
Примечание: Высота должна быть указана на 10 пикселей меньше высоты вашего изображения!

Найдите:
```
<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
            </fieldset>
            </form>
         </div>
       
```
Перед найденным, добавьте:
```
</div> 
```
Обновите тему и шаблоны.

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

Откройте файл styles/prosilver/template/overall_header.html
Найдите и удалите код:
```
<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a> 
```
Обновите шаблоны.

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

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

<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>

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

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

        <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
            <div id="search-box">
                <form action="{U_SEARCH}" method="post" id="search">
                <fieldset>
                    <input name="keywords" id="keywords" type="text" maxlength="128"
 title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="
<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->
" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
                    <input class="button2" value="{L_SEARCH}" type="submit" /><br />
                    <a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
                </fieldset>
                </form>
            </div>
        <!-- ENDIF -->

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

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

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

Создайте собственные изображение и назовите их следующим образом: header_random_1.EXT (где EXT - тип файла, gif, png, jpg и т.п., учтите, что все файлы должны быть одного типа.)
Загрузите ваши файлы в папку images styles/prosilver/theme/images/ .
Откройте файл includes/functions.php .
Найдите:
```
'T_STYLESHEET_NAME'      => $user->theme['theme_name'],
```
Добавьте после найденного:
```
'RANDOM_HEADER'      => mt_rand(1, NUMBER-OF-IMAGES), 
```
Замените NUMBER-OF-IMAGES на количество изображений, созданных вами.
Откройте файл 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 поставьте количество созданных вами изображений.

Откройте файл 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 на используемый вами тип файлов изображений.

Обновите тему.

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

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

 <li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

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

            <li class="rightside" style="font-size: 1em;">
          <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
             <div id="search-box">
                <form action="{U_SEARCH}" method="post" id="search">
                <fieldset>
                   <input name="keywords" id="keywords" type="text" maxlength="128" 
title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="
<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->
" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
                   <input class="button2" value="{L_SEARCH}" type="submit" /><br />
                    {S_SEARCH_HIDDEN_FIELDS}
                </fieldset>
                </form>
             </div>
          <!-- ENDIF -->
        </li>

Откройте файл 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;
}

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

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

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

<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>

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

<li class="icon-search"><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH}</a></li>

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

Оглавление

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

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

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

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

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

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

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

Новые статьи

Новые файлы

Частые вопросы

Полезные ссылки

Оглавление

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

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

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

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

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

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

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

Схожие материалы

Новые статьи

Новые файлы

Частые вопросы

Полезные ссылки