Главная
Статьи » Стилизация phpBB3
 

| ПРОСМОТРОВ: 3411
 

Некоторые изменения не могут быть проделаны в администраторской панели управления, поэтому вместо этого лучше редактировать файл таблицы стилей (css). Если вы собираетесь проделывать изменения в файлах css с помощью администраторской панели управления, то сделайте эти файлы доступными для записи (права к файлам - chmod 777), затем в панели администрирования перейдите на страницу «Темы оформления» и для темы prosilver щёлкните ссылку «Экспорт». Этим действие вы сохраните резервную копию файлов css.

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

Для редактирования файлов css открывайте их в любом простом текстовом редакторе, редактируйте файлы, загружайте их на сервер, затем в администраторской панели управления в разделе «Стили» перейдите на страницу «Темы оформления» и щёлкните ссылку «Обновить» для темы proSilver.

1. Рисунок «В сети» (Online)

Сначала необходимо создать новый рисунок для пользователей, находящихся в данный момент на конференции. Этот рисунок обычно отображается возле аватар пользователей, находящихся в данный момент на форуме phpBB. Откройте файл styles/prosilver/imageset/en/icon_user_online.gif в Photoshop (или в другом графическом редакторе).
1. Измените режим изображения в RGB: Image -> Mode -> RGB Color
2. Затем поверните изображение: Edit -> Transform -> Rotate 90 CCW
3. Затем сохраните изображение: File -> Save for Web
4. Замените исходный рисунок новым.

Можете забрать уже повёрнутый рисунок:

http://bb3x.ru/design/article_img/prof-ru.gif

Или английский:

http://bb3x.ru/design/article_img/prof-en.gif

2. Изменения в CSS

В администраторской панели управления перейдите в раздел «Стили», а в нём на страницу «Темы оформления». Нажмите ссылку «Изменить», находящуюся возле стиля prosilver.

1. Выберите класс ".postbody", но лучше откройте файл content.css в текстовом редакторе, и найдите в нём строки, похожие на следующие:

.postbody {
padding: 0;
line-height: 1.48em;
color: #333333;
width: 76%;
float: left;
clear: both;
}

Измените float: left на float: right

2. Затем выберите класс ".postprofile", или опять же откройте файл content.css. Найдите в нём следующие строки:


.postprofile {
/* Also see tweaks.css */
margin: 5px 0 10px 0;
min-height: 80px;
color: #666666;
border-left: 1px solid #FFFFFF;
width: 22%;
float: right;
display: inline;
}

Измените float: right на float: left, и border-left на border-right

3. Затем выберите класс ".pm .postprofile", или откройте тот же файл content.css. Измените border-left на border-right (вы можете пропустить этот шаг: смотрите «Примечание» в «Дополнительных изменениях» ниже на этой странице).

4. Выберите класс ".online", или в файле content.css найдите такие строки:

background-image: none;
background-position: 100% 0;
background-repeat: no-repeat;

И замените их следующими:

background-image: none;
background-position: 0 0;
background-repeat: no-repeat;

3. Дополнительные изменения

После всех вышеописанных изменений границы на страницах тем не будут выглядеть «правыми». Граница слишком далеко от содержимого, и выглядит так, как будто содержимое «плавает» далеко справа. Это легко исправляется перемещением границ из класса ".postprofile" в класс ".postbody".

В класс ".postbody" добавьте следующее (увеличьте значение padding-left, если необходимо):

padding-left: 10px;
border-left: 1px solid #FFFFFF;

В классе ".postprofile" удалите параметр border-right (всю строку).

Переименуйте класс ".pm .postprofile" в ".pm .postbody", и измените обратно border-right на border-left

Примечания

Если при выборе класса вы видите другой код, то проверьте другой селектор класса. Некоторые классы имеют несколько селекторов.

После редактирование файлов css необходимо выполнять обновление. Для этого в администраторской панели управления в разделе «Стили» перейдите на страницу «Темы оформления» и щёлкните ссылку «Обновить» для темы proSilver.

После изменения кода "online" рисунок может быть за аватарой. Это нормальное явление, вызванное данной заменой. Когда профили находятся на правой стороне, тексты в блоки профилей выровнены по левой стороне, поэтому рисунок «В сети» и аватара находятся на разных сторонах. А когда профили находятся на правой стороне, то выравнивание текстов по правой стороне выглядит нелогично и ужасно, поэтому текст должен быть выровненным по левому краю или по центру, и в обоих случаях рисунок «В сети» перекрывает аватару. Наилучшее решение состоит в том, чтобы вообще удалить этот рисунок, или заменить его каким-нибудь другим.

АВТОРСКИЕ ПРАВА
Автор: CyberAlien
Перевод: Kastaneda
Права на статью принадлежат teosofia.ru
При перепечатке ссылка на источник обязательна
Форум phpBB, русская поддержка форума phpBB
2008 - 2015 © BB3x.ru - русская поддержка форума phpBB
авторов модов
разработчиков скинов
русификаторов
и всех поклонников phpBB3