Внимание!
Не все расширения для phpBB 3.2 совместимы с phpBB 3.3, главным образом из-за неверного синтаксиса в определениях сервисов (отсутствия обрамляющих кавычек - '...').
Перед обновлением необходимо убедиться в совместимости всех расширений.
Рекомендуется предварительно тестировать обновление на копии конференции (локально или на сервере).

Создание блоков в стиле Prosilver

Есть любые вопросы, связанные со стилями/темами для phpBB 3.0.x? Задайте их здесь!
Правила форума
Местная Конституция | Шаблон запроса | Документация (phpBB3) | Переход на 3.0.6 и выше | FAQ-3 (phpbb3) | Как задавать вопросы | Как устанавливать моды

Ваш вопрос может быть удален без объяснения причин, если на него есть ответы по приведённым ссылкам (а вы рискуете получить предупреждение ;) ).
Аватара пользователя
Warlock75
Former team member
Сообщения: 1379
Зарегистрирован: 24.02.2008 3:24
Откуда: Москва
Благодарил (а): 38 раз
Поблагодарили: 91 раз

Создание блоков в стиле Prosilver

Сообщение Warlock75 »

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

Рассмотрим для стиля Prosilver.
test.jpg
Вариант 1:

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

	<div class="forumbg">
		<div class="inner"><span class="corners-top"><span></span></span>

		<table class="table1" cellspacing="1">
		<thead>
		<tr>
			<th align="left">&nbsp;{Языковая переменная/название блока}</th>
		</tr>
		</thead>
		<tbody>
		<tr class="bg1">
			<td>
Ваш код
                        </td>
		</tr>
		</tbody>
		</table>
		<span class="corners-bottom"><span></span></span>
    </div>
</div>
Классы forumbg и bg1 можно менять. Первый на forabg, второй на bg2 или на bg3.

Вариант 2:

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

<div class="forabg">
	<div class="inner">
		<span class="corners-top"><span></span></span>
		<ul class="topiclist">
			<li class="header"><dl><dt>{Языковая переменная/название блока}</dt></dl></li>
		</ul>
			<div class="postbody" style="width: 100%">
Ваш код
			</div>
		<span class="corners-bottom"><span></span></span>
	</div>
</div>

Вариант 3:
Если нужно что-то особенное, то за основу берется любой вариант и создаются блоки в отдельном стилевом листе, назовем его youstyle.css
Открываем папку \styles\prosilver\theme, находим файл stylesheet.css, открываем и вписываем в конце строчку:

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

@import url("youstyle.css.css");
Мешать свои блоки со стандартными в одном листе не желательно. Можно что-нибудь потерять при обновлении форума.
При базовом знании html и css, можно создать любой дизайн.

Что нужно знать при создании или редактировании стилей и шаблонов:
1. Блоки должны открываться и закрываться последовательно, например: <li><dl><dt> </dt></dl></li>, а не <li><dl><dt> </dl></dt></li>.
2. Параметры стилей не должны дублироваться для одного блока.
3. Мешать в одном файле html и css - признак дурного тона.
4. Читаем пост: http://www.phpbbguru.net/community/topic25182.html
5. Все остальное тут: http://www.htmlbook.ru/

Вариант 4:
Если вышеописанное недоступно для понимания, то идем сюда: http://www.phpbbguru.net/community/forum3.html
Внимательно изучаем форум и чиаем FAQ. 95% всех ответов на возможные вопросы там уже есть!

Правила
Мини FAQ по phpBB 3.1
Как устанавливать расширения

romeo_piter
phpBB 2.0.15
Сообщения: 1033
Зарегистрирован: 02.04.2009 17:28
Благодарил (а): 168 раз
Поблагодарили: 20 раз

Re: Создание блоков в стиле Prosilver

Сообщение romeo_piter »

Если не сложно, маленький вопрос.
bg1, 2 и 3 описаны в colours так:

.bg1 { background-color: #ECF3F7; }
.bg2 { background-color: #e1ebf2; }
.bg3 { background-color: #cadceb; }

Это исходный фон.
А где искать цвет фона при наведении?


Нашел. Вот оно:
table.table1 tbody tr:hover, table.table1 tbody tr.hover {
background-color: #??????;
color: #000;
}

romeo_piter
phpBB 2.0.15
Сообщения: 1033
Зарегистрирован: 02.04.2009 17:28
Благодарил (а): 168 раз
Поблагодарили: 20 раз

Re: Создание блоков в стиле Prosilver

Сообщение romeo_piter »

Копал-копал, не могу понять, почему имею разные результаты для 2х вариантов.
В случае с таблицей - всё работает.
Вот код:

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

<div class="forabg">
      <div class="inner"><span class="corners-top"><span></span></span>

      <table class="table1" cellspacing="1">
      <thead>
      <tr>
         <th align="left">&nbsp;{L_INFOBLOCK}</th>
      </tr>
      </thead>
      <tbody>
      <tr  class="bg4">
         <td>




<!-- IF S_DISPLAY_ONLINE_LIST -->
	<!-- IF U_VIEWONLINE --><h3 class="forumtitle"><img src="./styles/prosilver/theme/images/now.gif" width="40px" height="24px" alt=""/>&nbsp;<a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3><img src="./styles/prosilver/theme/images/now.gif" width="40px" height="24px" alt=""/>&nbsp;{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
	
	<p style="font-size: 8pt">&nbsp;{TOTAL_USERS_ONLINE}<br />&nbsp;{LOGGED_IN_USER_LIST}
</p>
<!-- ENDIF -->


<!-- IF not S_IS_BOT -->
<h3 class="forumtitle"><img src="./styles/prosilver/theme/images/who_was.gif" width="40px" height="24px" alt=""/>&nbsp;{L_WHO_WAS_ONLINE}</h3>
<P style="font-size: 8pt">&nbsp;{USERS_24HOUR_TOTAL}: <!-- BEGIN lastvisit -->{lastvisit.USERNAME_FULL}<!-- IF not lastvisit.S_LAST_ROW -->, <!-- ENDIF --><!-- END lastvisit --></p>
	<!-- ENDIF -->	


<!-- IF NEWEST_USER -->
	<h3 class="forumtitle"><img src="./styles/prosilver/theme/images/statistica.gif" width="40px" height="24px" alt=""/>&nbsp;{L_STATISTICS}</h3>
	<p style="font-size: 8pt">&nbsp;{TOTAL_POSTS} &bull; {TOTAL_TOPICS}<!-- IF TOTAL_IMAGES --> &bull; {TOTAL_IMAGES}<!-- ENDIF --> &bull; {TOTAL_USERS} &bull; {NEWEST_USER}
<!-- IF not S_IS_BOT -->
<br/>&nbsp;{24HOUR_POSTS} &bull; {24HOUR_TOPICS} &bull; {24HOUR_USERS}</p>
	<!-- ENDIF -->
<!-- ENDIF -->



<!-- IF TOP_POSTERS_LIST -->
	<h3 class="forumtitle"><img src="./styles/prosilver/theme/images/birthday_3.gif" width="40px" height="24px" alt=""/>&nbsp;{L_TOP_POSTERS}</h3>
	<p style="font-size: 8pt">&nbsp;{TOP_POSTERS_LIST}<br />
<!-- IF TOP_POSTERS_HOURS_LIST -->
	<i>&nbsp;{TOP_POSTERS_HOURS}</i> 	
	{TOP_POSTERS_HOURS_LIST}
<!-- ENDIF -->
</p>
<!-- ENDIF -->


<h3 class="forumtitle"><img src="./styles/prosilver/theme/images/birthday_1.gif" width="40px" height="24px" alt=""/>&nbsp;{L_REPA}</h3>   
<P style="font-size: 8pt">&nbsp;<!-- BEGIN reputation_user --><!-- IF not reputation_user.S_FIRST_ROW -->, <!-- ENDIF -->{reputation_user.USERNAME} ({reputation_user.REPUTATION})<!-- END reputation_user --></p>




<!-- IF S_DISPLAY_BIRTHDAY_LIST and BIRTHDAY_LIST -->
	<h3 class="forumtitle"><img src="./styles/prosilver/theme/images/birthday_2.gif" width="40px" height="24px" alt=""/>&nbsp;{L_BIRTHDAYS}</h3>
	<p style="font-size: 8pt">&nbsp;<!-- IF BIRTHDAY_LIST -->{L_CONGRATULATIONS}: <strong>{BIRTHDAY_LIST}</strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF --></p>
<!-- ENDIF -->


                        </td>
      </tr>
      </tbody>
      </table>
      <span class="corners-bottom"><span></span></span>
    </div>
</div>
В варианте с дивами имею то что на скриншоте, код:

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

<div class="forabg">
       <div class="inner">
          <span class="corners-top"><span></span></span>
          <ul class="topiclist">
             <li class="header"><dl><dt>xl</dt></dl></li>
          </ul>
             <div class="postbody" style="width: 100%">
    <!-- IF S_DISPLAY_ONLINE_LIST -->
	<!-- IF U_VIEWONLINE --><h3  class="forumtitle"><img src="./styles/prosilver/theme/images/now.gif" width="40px" height="24px" alt=""/>&nbsp;<a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3><img src="./styles/prosilver/theme/images/now.gif" width="40px" height="24px" alt=""/>&nbsp;{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
	
	<p style="font-size: 8pt">&nbsp;{TOTAL_USERS_ONLINE}<br />&nbsp;{LOGGED_IN_USER_LIST}
</p>
<!-- ENDIF -->


<!-- IF not S_IS_BOT -->
<h3 class="forumtitle"><img src="./styles/prosilver/theme/images/who_was.gif" width="40px" height="24px" alt=""/>&nbsp;{L_WHO_WAS_ONLINE}</h3>
<P style="font-size: 8pt">&nbsp;{USERS_24HOUR_TOTAL}: <!-- BEGIN lastvisit -->{lastvisit.USERNAME_FULL}<!-- IF not lastvisit.S_LAST_ROW -->, <!-- ENDIF --><!-- END lastvisit --></p>
	<!-- ENDIF -->	


<!-- IF NEWEST_USER -->
	<h3 class="forumtitle"><img src="./styles/prosilver/theme/images/statistica.gif" width="40px" height="24px" alt=""/>&nbsp;{L_STATISTICS}</h3>
	<p style="font-size: 8pt">&nbsp;{TOTAL_POSTS} &bull; {TOTAL_TOPICS}<!-- IF TOTAL_IMAGES --> &bull; {TOTAL_IMAGES}<!-- ENDIF --> &bull; {TOTAL_USERS} &bull; {NEWEST_USER}
<!-- IF not S_IS_BOT -->
<br/>&nbsp;{24HOUR_POSTS} &bull; {24HOUR_TOPICS} &bull; {24HOUR_USERS}</p>
	<!-- ENDIF -->
<!-- ENDIF -->



<!-- IF TOP_POSTERS_LIST -->
	<h3 class="forumtitle"><img src="./styles/prosilver/theme/images/birthday_3.gif" width="40px" height="24px" alt=""/>&nbsp;{L_TOP_POSTERS}</h3>
	<p style="font-size: 8pt">&nbsp;{TOP_POSTERS_LIST}<br />
<!-- IF TOP_POSTERS_HOURS_LIST -->
	<i>&nbsp;{TOP_POSTERS_HOURS}</i> 	
	{TOP_POSTERS_HOURS_LIST}
<!-- ENDIF -->
</p>
<!-- ENDIF -->


<h3 class="forumtitle"><img src="./styles/prosilver/theme/images/birthday_1.gif" width="40px" height="24px" alt=""/>&nbsp;{L_REPA}</h3>   
<P style="font-size: 8pt">&nbsp;<!-- BEGIN reputation_user --><!-- IF not reputation_user.S_FIRST_ROW -->, <!-- ENDIF -->{reputation_user.USERNAME} ({reputation_user.REPUTATION})<!-- END reputation_user --></p>




<!-- IF S_DISPLAY_BIRTHDAY_LIST and BIRTHDAY_LIST -->
	<h3 class="forumtitle"><img src="./styles/prosilver/theme/images/birthday_2.gif" width="40px" height="24px" alt=""/>&nbsp;{L_BIRTHDAYS}</h3>
	<p style="font-size: 8pt">&nbsp;<!-- IF BIRTHDAY_LIST -->{L_CONGRATULATIONS}: <strong>{BIRTHDAY_LIST}</strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF --></p>
<!-- ENDIF -->

             </div>
          <span class="corners-bottom"><span></span></span>
       </div>
    </div>
На скрине сверху табличный вариант, под ним вариант на дивах.
Вложения
test.jpg

Аватара пользователя
Warlock75
Former team member
Сообщения: 1379
Зарегистрирован: 24.02.2008 3:24
Откуда: Москва
Благодарил (а): 38 раз
Поблагодарили: 91 раз

Re: Создание блоков в стиле Prosilver

Сообщение Warlock75 »

Второй вариант в основном предназначен для вывода форумов, там есть класс row. Он может заменяться на любой самописный, если планируется использовать что-то нестандартное. С первым гемора меньше, он проще реализован и использует только стандартные стили.

При вставке форумов или тем используется такая конструкция:

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

		<li class="row<!-- IF topicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF --><!-- IF topicrow.S_POST_ANNOUNCE --> announce<!-- ENDIF --><!-- IF topicrow.S_POST_STICKY --> sticky<!-- ENDIF --><!-- IF topicrow.S_TOPIC_REPORTED --> reported<!-- ENDIF -->">
.........................................................
</li>
Где bg1 и bg2 - это фон форума (конструкция класса row может быть любая).

А вы же ничего не втавляете, вот и нет фона.
Внимательно изучаем форум и чиаем FAQ. 95% всех ответов на возможные вопросы там уже есть!

Правила
Мини FAQ по phpBB 3.1
Как устанавливать расширения

Буржуй
phpBB 1.2.1
Сообщения: 24
Зарегистрирован: 13.12.2009 16:03

Re: Создание блоков в стиле Prosilver

Сообщение Буржуй »

а если так на каждый блог:

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

<!-- IF S_DISPLAY_ONLINE_LIST -->
<div class="panel bg1">
	<div class="inner"><span class="corners-top"><span></span></span>

	<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
	<p style="font-size: 1.1em;">{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{LOGGED_IN_USER_LIST}
	<!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>

</div><span class="corners-bottom"><span></span></span></div>
<!-- ENDIF -->
а если так для всех блогов:

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

<!-- IF S_DISPLAY_ONLINE_LIST -->
<div class="panel bg1">
	<div class="inner"><span class="corners-top"><span></span></span>

	<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
	<p style="font-size: 1.1em;">{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{LOGGED_IN_USER_LIST}
	<!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>

<!-- IF S_DISPLAY_BIRTHDAY_LIST -->

	<h3>{L_BIRTHDAYS}</h3>
	<p style="font-size: 1.1em;"><!-- IF BIRTHDAY_LIST -->{L_CONGRATULATIONS}: <strong>{BIRTHDAY_LIST}</strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF --></p>

<!-- ENDIF -->

<!-- IF NEWEST_USER -->

	<h3>{L_STATISTICS}</h3>
	<p style="font-size: 1.1em;">{TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}</p>

<!-- ENDIF -->

</div><span class="corners-bottom"><span></span></span></div>
<!-- ENDIF -->
Вложения
demo.JPG

dengood
phpBB 1.0.0
Сообщения: 3
Зарегистрирован: 06.02.2010 11:56

Re: Создание блоков в стиле Prosilver

Сообщение dengood »

Добрый всем день.

Я воспользовался примерами этого поста для создания блоков в стиле Prosilver на дополнительной странице aboutus.php


Подскажите пожалуйста как сделать что бы при наведение мышкой на блоке не менялся его бекграун? :?:

Аватара пользователя
Nekstati
Поддержка
Поддержка
Сообщения: 2797
Зарегистрирован: 19.03.2009 17:43
Благодарил (а): 23 раза
Поблагодарили: 1008 раз

Re: Создание блоков в стиле Prosilver

Сообщение Nekstati »

dengood, а тему почитать? См. второе сообщение.

dengood
phpBB 1.0.0
Сообщения: 3
Зарегистрирован: 06.02.2010 11:56

Re: Создание блоков в стиле Prosilver

Сообщение dengood »

Спасибо, я видел это сообщение поэтому в этот пост и задал вопрос.

Как мне сделать что бы не менялся бекраунд только на aboutus.php странице?
Я не хочу трогать глобальный стиль для всего форума.

Может как то локально его перехватывать по событию onmouseover="..." и ставить то что нужно?

Аватара пользователя
Nekstati
Поддержка
Поддержка
Сообщения: 2797
Зарегистрирован: 19.03.2009 17:43
Благодарил (а): 23 раза
Поблагодарили: 1008 раз

Re: Создание блоков в стиле Prosilver

Сообщение Nekstati »

Задайте фон непосредственно в шаблоне:

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

<td style="background-color: #ECF3F7">

dengood
phpBB 1.0.0
Сообщения: 3
Зарегистрирован: 06.02.2010 11:56

Re: Создание блоков в стиле Prosilver

Сообщение dengood »

Большое - Спасибо - Сработало!!!

Аватара пользователя
Warlock75
Former team member
Сообщения: 1379
Зарегистрирован: 24.02.2008 3:24
Откуда: Москва
Благодарил (а): 38 раз
Поблагодарили: 91 раз

Re: Создание блоков в стиле Prosilver

Сообщение Warlock75 »

А можно новый класс прописать в стилях.
Если добавлений много, то лучше создать свой стилевой лист и мудрить там как угодно.
Внимательно изучаем форум и чиаем FAQ. 95% всех ответов на возможные вопросы там уже есть!

Правила
Мини FAQ по phpBB 3.1
Как устанавливать расширения

Аватара пользователя
Пчелкин
phpBB 3.1.9
Сообщения: 10213
Зарегистрирован: 15.01.2010 13:57
Откуда: От Москвы 9 часов на Боинге
Благодарил (а): 1359 раз
Поблагодарили: 1305 раз

Re: Создание блоков в стиле Prosilver

Сообщение Пчелкин »

У меня все пять форумов находятся в одном блоке..А можно их разделить по отдельным блокам?
Я правильно понял что это в forumlist_body.html ?

Аватара пользователя
Палыч
Former team member
Сообщения: 9683
Зарегистрирован: 24.05.2006 23:20
Откуда: Питер
Благодарил (а): 3 раза
Поблагодарили: 453 раза

Re: Создание блоков в стиле Prosilver

Сообщение Палыч »

Сделайте их категориями.
Не все то WINDOWS, что висит... phpBB только учусь.
ICQ, email, ЛС - только для личных сообщений. Вопросы по phpbb только на форумах. По найму не работаю.

Аватара пользователя
Пчелкин
phpBB 3.1.9
Сообщения: 10213
Зарегистрирован: 15.01.2010 13:57
Откуда: От Москвы 9 часов на Боинге
Благодарил (а): 1359 раз
Поблагодарили: 1305 раз

Re: Создание блоков в стиле Prosilver

Сообщение Пчелкин »

То есть разделами? У меня нет категорий в просильвере....
Всего три варианта раздел, форум,ссылка.
Ой Сообразил..У меня ж еще и список форумов и подфорумов столбиками, а не строчками.

Добавлено спустя 20 минут 3 секунды:
Извиняюсь...Переделываю в раздел и ничего не выходит...Бывшие пофорумы становятся форумами с темами внутри, а список форумов столбиком не хочет становиться..Сразу появились строчки форумов. Главная страница становится слишком длинной вверх-низ.

Аватара пользователя
Палыч
Former team member
Сообщения: 9683
Зарегистрирован: 24.05.2006 23:20
Откуда: Питер
Благодарил (а): 3 раза
Поблагодарили: 453 раза

Re: Создание блоков в стиле Prosilver

Сообщение Палыч »

Пчелкин писал(а): У меня нет категорий в просильвере....
У вас и разделов нет в просильвере, как и у всех.
Есть только форумы разных типов. Как их называть: раздел или категория - дело вкуса. В официальном переводе - категория.
Не все то WINDOWS, что висит... phpBB только учусь.
ICQ, email, ЛС - только для личных сообщений. Вопросы по phpbb только на форумах. По найму не работаю.

Вернуться в «Стили для phpBB 3.0.x»