Канал

Изменяем внешний вид PHPbb3 форума и портала

Стили. Работа над стилем. Видоизменение стилей.

Модераторы: Saga, Snegovic

Правила форума

Дорогие друзья! Если у Вас есть интересные наработки по изменению стиля для форума и портала на основе PHPBB3 - можете смело опубликовывать их в этом разделе!

с 11.08.2010 года, вводится Шаблон запроса, на помощь исключительно и только по моей Premodded сборке phpbb3. Все темы и коментарии не оформленные по шаблону запроса будут закрыты, или оставлены без моего внимания.

Для решения всех сторонних проблем просто с форумом, существуют две Русские службы поддержки (phpbbguru.net или bb3x.ru). Я не занимаюсь более просто помощью по форуму, помощью по стилям, в т.ч. сторонними стилями, ну и т.д.

Изменяем внешний вид PHPbb3 форума и портала

Сообщение Snegovic 08 ноя 2008, 01:24

После установки форума, возникает часто вопрос по смене "шапке" форума, удалению блока "поиск", добавлению своей картинки с логотипом, или смене фона. Как это сделать?

Добавление своей картинки в шапку

Загрузите вашу картинку по адресу 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
найдите
Код: Выделить всё
Code: Select all
    .headerbar {
       background-color: #12A3EB;
       background-image: url("{T_THEME_PATH}/images/bg_header.gif");
       color: #FFFFFF;
    }


измените bg_header.gif на вашу картинку (расширения файлов должны быть идентичны, то есть png=png а не PNG к примеру)

Откройте styles/prosilver/template/overall_header.html
Найдите по тексту
Код: Выделить всё
<div id="site-description">

вставьте выше
Код: Выделить всё
<div style="height: 90px;">

найдите
Код: Выделить всё
<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
Найдите по тексту
Код: Выделить всё
<!-- 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 -->

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

Удаление имени сайта и описания из шапки
Бывает часто, что встроенный текст в шапку мешает, можно его удалить

Откройте styles/prosilver/template/overall_header.html
Найдите по тексту
Код: Выделить всё
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>

Не забудьте потом в административной части форума, обновить рисунки темы, тему и шаблоны.

Вставляем на задний фон форума картинку
откройте styles/prosilver/theme/colours.css
найдите
Код: Выделить всё
/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
   background-color: #7C8891;
   background-image: url("{T_THEME_PATH}/images/bg_header.gif");
   color: #FFFFFF;
}

измените bg_header.gif на вашу картинку (расширения файлов должны быть идентичны, то есть png=png а не PNG к примеру) Картинку следует загрузить по адресу styles/prosilver/theme/images/
Не забудьте потом в административной части форума, обновить рисунки темы, тему и шаблоны.
(в качестве подсказки - могу посоветовать не размещать здоровую обоину на задний план форума - грузится будет долго, ваш форум, а разместить небольшую картинку, так называемый "безшовные Backgrounds" )

Более правильный вариант - смотрите в теме! тут небольшая ошибка.

Меняем ширину форума
Откройте common.css
Найдите:
Код: Выделить всё
/* Main blocks
---------------------------------------- */
#wrap {
   padding: 0 20px;
   min-width: 650px;
   width: 900px;
   margin: 0 auto;

Крутите width: ; например на 1200 т.е. width: 1200px; или так, как нужно.
Не забудьте потом в административной части форума, обновить рисунки темы, тему и шаблоны.

Боковые блоки портала в рамке
Как сделать чтобы боковые блоки портала, были в рамке, так же как и центральные блоки?
На примере "чистого блока" (custom_center.html) вот такой код:

Код: Выделить всё
<!--version $Id: custom_center.html 236 2008-05-18 15:50:06Z kevin74 $ //-->
<div class="forabg">
   <div class="inner">
      <span class="corners-top"><span></span></span>
      
      
   Здесь код блока который нужно поместить в рамку   
      

      <span class="corners-bottom"><span></span></span>
   </div>
</div>
      
<br style="clear:both" />


добавьте в colours.css
background-repeat: repeat; :

Код: Выделить всё
.forabg, .forumbg {
   background-color: #505C65;
   background-image: url("{T_THEME_PATH}/images/bg_list.gif");
background-repeat: repeat;
}

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

Я не гарантирую того, что так правильно. Но работает.. Правда если присмотреться - видно, что внутренние углы имеют пустые клеточки - это из за того, что углы формируют изображения corners_left.png и т.д. (правятся в файле portal.css)

Изображение

Вставляем картинку в боковые блоки портала на задний фон

Это сделать очень просто. Открываем файл portal.css
Ищем в нем:

Код: Выделить всё
.portal-panel {
   background-color: #DDE9F0;
   color: #28313F;

И добавляем в этот блок свою картинку

Код: Выделить всё
background-image: url("{T_THEME_PATH}/images/картинка.gif");
background-repeat: repeat;


Изображение


Другой цвет при наведении на тему
По умолчанию это желтый

Изображение

Чтобы его поменять на любой другой нужно открыть colours.css стиля который используется, найти изменить

Код: Выделить всё
li.row:hover {
   background-color: #F6F4D0;
}
Донна Роза, я - старый солдат и не знаю слов любви...
Аватара пользователя
Snegovic
Любитель всего интересного
Любитель всего интересного
 
Сообщения: 1744
Изображения: 45
Зарегистрирован: 12 апр 2008, 17:29
Баллы репутации: 15

Re: Изменяем внешний вид PHPbb3 форума

Сообщение kulmik 12 дек 2008, 04:25

Добавление своей картинки в шапку
Вот у меня нет этой строчки "Code: Select all" в colours.css
Версия форума 3.02
Аватара пользователя
kulmik
Все решаемо
Все решаемо
 
Сообщения: 21
Зарегистрирован: 12 дек 2008, 04:21
Баллы репутации: 5

Re: Изменяем внешний вид PHPbb3 форума

Сообщение Snegovic 12 дек 2008, 13:44

kulmik писал(а):Вот у меня нет этой строчки "Code: Select all" в colours.css
Версия форума 3.02

А что за тема?
Нужно искать background-image: url("{T_THEME_PATH}/images/bg_header.gif");
Донна Роза, я - старый солдат и не знаю слов любви...
Аватара пользователя
Snegovic
Любитель всего интересного
Любитель всего интересного
 
Сообщения: 1744
Изображения: 45
Зарегистрирован: 12 апр 2008, 17:29
Баллы репутации: 15

Re: Изменяем внешний вид PHPbb3 форума

Сообщение Kelivan 12 дек 2008, 14:48

Ребят помогите со стилями. Стоит phpBB3 + портал + тема prosilver Special Edition. Вроде всё настроил правильно но получается вот такая ерунда... Под меню слева и справа нет бекграудов, статистика почемуто без разделителей и в середине текст едет...
Изображение
Что делать не знаю...
Аватара пользователя
Kelivan
Новичёк
Новичёк
 
Сообщения: 2
Зарегистрирован: 12 дек 2008, 14:37
Баллы репутации: 0

Re: Изменяем внешний вид PHPbb3 форума

Сообщение Snegovic 12 дек 2008, 15:35

Чего то у тебя не то.. получилось
1. Очень странно, что нету бекграундов. Перво наперво попробуй через админку обновить кеш шаблонов стилей, картинок и рисунков и общий кеш форума. Администраторский раздел - стили - компоненты стилей (шаблоны, темы, наборы рисунков - Действия - обновить )(скорее всего причина именно в этом).
2. Если не поможет, можно попробовать перезалить папку с темой форума (быть может залилось неполностью ) и потом тоже обновить кеш темы и обший кеш форума.

Чтобы растянуть форум по ширине, нужно открыть

\styles\prosilver\theme\common.css
Найти

Код: Выделить всё
/* Main blocks
---------------------------------------- */
#wrap {
   padding: 0 20px;
   min-width: 650px;
   width: 1100px;
   margin: 0 auto;

и увеличить число
Код: Выделить всё
width:

А потом почистить кеш тем и форума чтобы изменения вступили в силу.
Донна Роза, я - старый солдат и не знаю слов любви...
Аватара пользователя
Snegovic
Любитель всего интересного
Любитель всего интересного
 
Сообщения: 1744
Изображения: 45
Зарегистрирован: 12 апр 2008, 17:29
Баллы репутации: 15

Re: Изменяем внешний вид PHPbb3 форума

Сообщение Kelivan 12 дек 2008, 16:18

Огромное спасибо!
Блин, как всё оказалось просто :) Я бы не зачто не догадался, что кнопки обновить в шаблонах обновляют кеш. Ещё раз спасибо пойду дальше изучить :)
Аватара пользователя
Kelivan
Новичёк
Новичёк
 
Сообщения: 2
Зарегистрирован: 12 дек 2008, 14:37
Баллы репутации: 0

Re: Изменяем внешний вид PHPbb3 форума

Сообщение Snegovic 12 дек 2008, 17:08

Просто там как бы 2 кеша, первый кеш - это основной кеш - при загрузке админки на этой странице, и кеш шаблонов, рисунков - тем, и прочих элементов которые загружаются или подгружаются в теме.
Донна Роза, я - старый солдат и не знаю слов любви...
Аватара пользователя
Snegovic
Любитель всего интересного
Любитель всего интересного
 
Сообщения: 1744
Изображения: 45
Зарегистрирован: 12 апр 2008, 17:29
Баллы репутации: 15

Re: Изменяем внешний вид PHPbb3 форума

Сообщение kulmik 13 дек 2008, 03:18

Snegovic писал(а):

А что за тема?
Нужно искать background-image: url("{T_THEME_PATH}/images/bg_header.gif");[/quote]
Тема стандартный просильвер,а прикол в том,что когда я хотел поменять фон по вашей инструкции "Вставляем на задний фон форума картинку"то я успешно поменял стандартный градиент в шапке на картинку,но как вставить на задний фон картинку я немогу понять,подскажите пожалуйста какая строчка отвечает за фон.
Аватара пользователя
kulmik
Все решаемо
Все решаемо
 
Сообщения: 21
Зарегистрирован: 12 дек 2008, 04:21
Баллы репутации: 5

Re: Изменяем внешний вид PHPbb3 форума

Сообщение Snegovic 13 дек 2008, 20:18

А что не получается то? в самом 1-м сообщение этой темы, самое последнее..
Ищи
/* Round cornered boxes and backgrounds
в нем меняй
background-image: url("{T_THEME_PATH}/images/bg_header.gif");
на свою картинку. Саму картинку помещай по адресу styles/prosilver/theme/images/
T_THEME_PATH трогать не нужно, я его выделил просто подчеркнуть эту строчку.
Донна Роза, я - старый солдат и не знаю слов любви...
Аватара пользователя
Snegovic
Любитель всего интересного
Любитель всего интересного
 
Сообщения: 1744
Изображения: 45
Зарегистрирован: 12 апр 2008, 17:29
Баллы репутации: 15

Re: Изменяем внешний вид PHPbb3 форума

Сообщение kulmik 13 дек 2008, 22:47

Ну так яж говорю,я поменял но вместо фона у меня поменялась картинка в шапке
Вот как я сделал:

/* Round cornered boxes and backgrounds
---------------------------------------- */

.headerbar {
background-color: #FFFFFF;
background-image: url("{T_THEME_PATH}/images/32.jpg");
color: #F7FFBC;
}

Но фон как был белый так и остался :(
Аватара пользователя
kulmik
Все решаемо
Все решаемо
 
Сообщения: 21
Зарегистрирован: 12 дек 2008, 04:21
Баллы репутации: 5

След.

Вернуться в Стили. Изменение стиля

Кто сейчас на конференции

Сейчас этот форум просматривают: CommonCrawl [Bot] и гости: 1