Изменяем заголовок (шапку) prosilver

Печать
Информация о материале
Просмотров: 61340

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

 

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

 

 

Поскольку многие, кажется, постоянно спрашивают, как изменить некоторые части заголовка стиля 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
    Найдите:
    .headerbar {
   background-color: #12A3EB;
   background-image: url("{T_THEME_PATH}/images/bg_header.gif");
   color: #FFFFFF;
}


    Измените имя файла bg_header.gif  на имя файла вашего изображения. 
  4. Откройте файл 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>
  5. Обновите тему и шаблоны.

 

 

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


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

 

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


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

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

 

 

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


  1. Откройте файл 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 -->
  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. Откройте файл 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>
  2. Откройте файл 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;
}
  3. Обновите тему и шаблоны.

 

 

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


  1. Откройте файл 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>
  2. Обновите шаблоны.
Joomla SEF URLs by Artio