Краткая инструкция по модифицированию заголовка стиля 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> <!-- ENDIF -->
Перед найденным, добавьте:
</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>
- Обновите шаблоны.