Уважаемые пользователи!
C 7 ноября 2020 года phpBB Group прекратила выпуск обновлений и завершила дальнейшее развитие phpBB версии 3.2.
С 1 августа 2024 года phpBB Group прекращает поддержку phpBB 3.2 на официальном сайте.
Сайт официальной русской поддержки phpBB Guru продолжит поддержку phpBB 3.2 до 31 декабря 2024 года.
С учетом этого, настоятельно рекомендуется обновить конференции до версии 3.3.

Горизонтальный блок на несколько секций

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

Ваш вопрос может быть удален без объяснения причин, если на него есть ответы по приведённым ссылкам (а вы рискуете получить предупреждение ;) ).
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 11234
Стаж: 14 лет 2 месяца
Откуда: fotovideoforum.ru
Благодарил (а): 1782 раза
Поблагодарили: 1340 раз
Контактная информация:

Горизонтальный блок на несколько секций

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

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

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

Попробовал и я смастерить свою конструкцию блока для вывода вот таких ссылок на наиболее интересные опции форума...
Взяв за основу знания полученные отсюда -
Раскрывающиеся блоки ,
отсюда -
Создание блоков в стиле Prosilver
и используя коды от мода
Top Five on Index ,
создадим блок на несколько секций с кликабельными картинками и всплывающими подсказками...

В итоге получим вот такую панельку в шапке форума. (не обязательно именно в шапке)
snap224.jpg
Последний раз редактировалось Пчелкин 09.08.2012 9:24, всего редактировалось 3 раза.
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 11234
Стаж: 14 лет 2 месяца
Откуда: fotovideoforum.ru
Благодарил (а): 1782 раза
Поблагодарили: 1340 раз
Контактная информация:

Re: Горизонтальный блок на несколько секций

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

Естественно мы не будет впихивать код панели тупо в файлы форума напрямую.
Воспользуемся выводом кода через команду INCLUDE для вставки в файлы интерфейса форума.
А для создания блока создадим файл blok_five_body.html .
После его доработки достаточно будет в нужное место интерфейса форума вставить строку -

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

<!-- INCLUDE blok_five_body.html -->
Куда строку разместим, там блок и покажется...

Начнем пожалуй....

Никаких правок в файлах php и CSS делать не надо. Блок основан на стандартных классах стандартного просильвера.

Берем файл blok_five_body.html и вставляем в него код блока.

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

<div class="forabg">
    <div class="inner">
    	<span class="corners-top"><span></span></span>
	    	<table class="table1" cellspacing="1">
		
	     	<thead>
	        	<tr>
		        ЗДЕСЬ БУДУТ НАЗВАНИЯ СЕКЦИЙ 	
	    	    </tr>
		    </thead>
		
		    <tbody>
			    <tr class="bg2">
				ЗДЕСЬ БУДУТ ИЛИ ССЫЛКИ-КАРТИНКИ ИЛИ ПРОСТО ССЫЛКИ-ФРАЗЫ	
		     	</tr>
		     </tbody>
		
	    	</table>
    	<span class="corners-bottom"><span></span></span>
	</div>
</div>
Получаем оформленный под стиль форума блок с верхней широкой полосой, в которой есть место для размещения в нем языковых переменных с наименованием ссылок.

Пока он выглядит не впечатляюще....
snap225.jpg
Последний раз редактировалось Пчелкин 09.08.2012 9:28, всего редактировалось 2 раза.
Аватара пользователя
МайскийЖук
phpBB 3.0.7-PL1
Сообщения: 2535
Стаж: 14 лет 6 месяцев
Благодарил (а): 17 раз
Поблагодарили: 366 раз

Горизонтальный блок на несколько секций

Сообщение МайскийЖук »

Теперь уже не сотрусь, прав нету. :)
Любовь и боль, покой и бой я как любой несу с собой…
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 11234
Стаж: 14 лет 2 месяца
Откуда: fotovideoforum.ru
Благодарил (а): 1782 раза
Поблагодарили: 1340 раз
Контактная информация:

Re: Горизонтальный блок на несколько секций

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

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

Поехали делить блок на необходимое нам количество секций...

Вооружившись парой уроков из ХТМЛбука и решив что секций будет пять, в класс оглавления секций

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

<thead>
	        	<tr>
		        ЗДЕСЬ БУДУТ НАЗВАНИЯ СЕКЦИЙ 	
	    	    </tr>
		    </thead>
Вставляем пять строк вот такого вида...

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

<th style="width: 20%;">{L_BLOK_1}</th>
где "width: 20%;" дает возможность указать в процентном соотношении горизонтальную часть от всей длинны блока для той или иной секции. Я вставляю пять секций, значит и делю горизонтальную длину блока на пять равных частей...
И если вся вставляемая часть будет выглядить так

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

       	<th style="width: 20%;">{L_BLOK_1}</th>
		         	<th style="width: 20%;">{L_BLOK_2}</th>
		         	<th style="width: 20%;">{L_BLOK_3}</th>
                    <th style="width: 20%;">{L_BLOK_4}</th>
                    <th style="width: 20%;">{L_BLOK_5}</th>
то, естественно для каждой секции я устанавливаю процентное соотношение в 20%.
Главное здесь то, что в сумме все цифры процентов обязательно должны составлять 100, иначе блок может просто покривиться....
В общем, часть файла blok_five_body.html , в которой будут выводиться названия секций готова...
Не забываем для языковых переменных сделать свои переводы и взяв файл language/ru/common.php и найдя в нем последнюю языковую переменную на букву "В", добавляем после

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

    'BLOK_1'						    => 'Название первой секции',
    'BLOK_2'					        => 'Название второй секции',	
    'BLOK_3'					        => 'Название третьей секции',	
    'BLOK_4'					        => 'Название четвертой секции',
    'BLOK_5'					        => 'Название пятой секции',
А выглядит теперь это у нас так -
snap226.jpg
Уже видна разметка под секции и названия секций стоят ровненько и строго поделив всю длину блока на пять частей.
Можно процентные соотношения делать любые...Можно даже код языковых переменных не вставлять...
Блок все равно поделился уже на пять частей и готов при следующих правках выдать нам пять секций с нужными нам ссылками...

Теперь поехали создавать содержимое секций, вмуровывая в них нужные нам ссылки...

Часть файла blok_five_body.html

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

		    <tbody>
			    <tr class="bg2">
				ЗДЕСЬ БУДУТ ИЛИ ССЫЛКИ-КАРТИНКИ ИЛИ ПРОСТО ССЫЛКИ-ФРАЗЫ	
		     	</tr>
		     </tbody>
готова к тому , что бы мы над ней слегка поиздевались...

Если мы не будем пользоваться кликабельными картинками, а воспользуемся и внутри секций названиями секций для вызова тех или иных опций, составляем такую строку кода

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

<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}">{L_BLOK_1}</a></div></td>
Все! У нас в секции есть кликабельная надпись, которая откроет то, что будет назначено в коде {U_ТУТ_КОД_ОПЦИИ}
Но нам этого мало и мы хотим иметь всплывающее описание кликабельной ссылки...
Добавляем в секцию в класс href команду title с новой языковой переменной L_BLOK1_INF
В итоге получаем код кликабельной ссылки с всплывающей подсказкой..

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

<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}" title="{L_BLOK1_INF}">{L_BLOK_1}</a></div></td>
Но нам и этого мало...хотя пока хватит...надо разобраться в новыми переменными....
А они у нас для всплывающих подсказок...
Ничего сложного, опять берем language/ru/common.php и найдя наши предыдущие вставки в него, добавляем ниже еще пять переменных

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

    'BLOK1_INF'						    => 'Всплывающая подсказка первой секции',
    'BLOK2_INF'					        => 'Всплывающая подсказка второй секции',	
    'BLOK3_INF'					        => 'Всплывающая подсказка третьей секции',	
    'BLOK4_INF'					        => 'Всплывающая подсказка четвертой секции',
    'BLOK5_INF'					        => 'Всплывающая подсказка пятой секции',
естественно вписывая вместо заготовок перевода нужный нам текст...

Ну, а в саму часть файла blok_five_body.html

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

		    <tbody>
			    <tr class="bg2">
				ЗДЕСЬ БУДУТ ИЛИ ССЫЛКИ-КАРТИНКИ ИЛИ ПРОСТО ССЫЛКИ-ФРАЗЫ	
		     	</tr>
		     </tbody>
добавляем пять таких частей-близнецов

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

		    <tbody>
			    <tr class="bg2">
					<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}" title="{L_BLOK1_INF}">{L_BLOK_1}</a></div></td>
					<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}" title="{L_BLOK2_INF}">{L_BLOK_2}</a></div></td>
					<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}" title="{L_BLOK3_INF}">{L_BLOK_3}</a></div></td>
					<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}" title="{L_BLOK4_INF}">{L_BLOK_4}</a></div></td>
					<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}" title="{L_BLOK5_INF}">{L_BLOK_5}</a></div></td>
			   	</tr>
		     </tbody>
Вот...у нас теперь все пять секций имеют пять ссылок на пять опций форума со своими индивидуальными названиями (дважды) и с всплывающими подсказками...

Но нам ведь и это мало!!! Мы решили вместо названий ссылок вмуровать картинки, да еще и с всплывающими подсказками...
Значит опять полезли на ХТМЛбук, полистав несколько определений и уроков, сооружаем такую конструкцию, добавив в ней новый класс для вывода изображения, с использованием, опять же, стандартных классов двига в CSS...
При этом вывод названия опции {L_BLOK_1} выкидываем, она у нас и так уже есть в названии секции и вставляем вместо нее картинку...
Получаем такую строку...

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

<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}" title="{L_BLOK1_INF}"><img src="{T_IMAGESET_PATH}/blok_logo_1.png" alt=""  /></a></div></td>
в которой все сейчас еще раз разложим по полочкам...
{U_ТУТ_КОД_ОПЦИИ} - тут код вызова необходимой нам опции
{L_BLOK1_INF} - это языковая переменная всплывающей подсказки
{T_IMAGESET_PATH} - это путь к папке двига, в котрой лежат наши будущие кликабельные картинки...
По умолчанию это папка styles/prosilver/imageset
А картинки делаем с названиями blok_logo_1.png , blok_logo_2.png , blok_logo_3.png , blok_logo_4.png , blok_logo_5.png .

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

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

		    <tbody>
			    <tr class="bg2">
					<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}" title="{L_BLOK1_INF}"><img src="{T_IMAGESET_PATH}/blok_logo_1.png" alt="" /></a></div></td>
					<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}" title="{L_BLOK2_INF}"><img src="{T_IMAGESET_PATH}/blok_logo_2.png" alt="" /></a></div></td>
					<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}" title="{L_BLOK3_INF}"><img src="{T_IMAGESET_PATH}/blok_logo_3.png" alt="" /></a></div></td>
					<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}" title="{L_BLOK4_INF}"><img src="{T_IMAGESET_PATH}/blok_logo_4.png" alt="" /></a></div></td>
					<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}" title="{L_BLOK5_INF}"><img src="{T_IMAGESET_PATH}/blok_logo_5.png" alt="" /></a></div></td>
			   	</tr>
		     </tbody>	
Открываем фотошоп и создаем пять картинок в формате png, которые комфортно будут смотреться во всех пяти секциях...
Внимательно подгоняем их размеры под смотрительные...
Затем помещаем их в папку styles/prosilver/imageset
Все почти готово....

Тока я вас малость надурил на счет комфортных картинок...Слишком точно по размерам их подгонять не обязательно....
Можно ведь в строку

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

<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}" title="{L_BLOK1_INF}"><img src="{T_IMAGESET_PATH}/blok_logo_1.png" alt=""  /></a></div></td>
добавить команды ресайзера картинок, для того, что бы они САМИ уменьшались до необходимого размера в случаях, если их размеры немного разные или вам просто некогда их подгонять друг к дружке...
Наша строка получит теперь вот такой вид...

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

<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}" title="{L_BLOK1_INF}"><img src="{T_IMAGESET_PATH}/blok_logo_1.png" width="120" height="30" alt="" /></a></div></td>
где width="120" - необходимая нам ширина картинок, а height="30" - необходимая высота.
Теперь часть файла blok_five_body.html принимает такой внушительный вид -

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

		    <tbody>
			    <tr class="bg2">
					<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}" title="{L_BLOK1_INF}"><img src="{T_IMAGESET_PATH}/blok_logo_1.png" width="120" height="30" alt="" /></a></div></td>
					<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}" title="{L_BLOK2_INF}"><img src="{T_IMAGESET_PATH}/blok_logo_2.png" width="120" height="30" alt="" /></a></div></td>
					<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}" title="{L_BLOK3_INF}"><img src="{T_IMAGESET_PATH}/blok_logo_3.png" width="120" height="30" alt="" /></a></div></td>
					<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}" title="{L_BLOK4_INF}"><img src="{T_IMAGESET_PATH}/blok_logo_4.png" width="120" height="30" alt="" /></a></div></td>
					<td valign="top"><div class="copyright"><a href="{U_ТУТ_КОД_ОПЦИИ}" title="{L_BLOK5_INF}"><img src="{T_IMAGESET_PATH}/blok_logo_5.png" width="120" height="30" alt="" /></a></div></td>
			   	</tr>
		     </tbody>	
Вот теперь, кажется, с построением файла blok_five_body.html мы закончили.

Теперь осталось только определится с кодами вывода необходимых нам опций форума, на которые должны перенаправлять кликабельные картинки ссылки....
Где их брать? Да где угодно...
Какие? Да какие вам надо...
Например из файла overall_header.html, в нем потом удалить их...
Или использовать какие-то особые и специфические...
В шапке моего основного форума в данный блок вмурованы ссылки на открытие Галереи, Блогов, Кинозала, Спасибок, Медалей, Ленту новостей и Аркады.
Поэтому часть файла blok_five_body.html, в которой прописаны коды на вывод опций выглядит так -

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

		    <tbody>
			    <tr class="bg2">
					<td valign="top"><div class="copyright"><a href="{U_GALLERY_MOD}" title="{L_GALLERY_INF2}"><img src="{T_IMAGESET_PATH}/blok_logo_1.png" width="120" height="30" alt="" /></a></div></td>
					<td valign="top"><div class="copyright"><a href="{U_BLOG}" title="{L_BLOGS_INF2}"><img src="{T_IMAGESET_PATH}/blok_logo_2.png" width="120" height="30" alt="" /></a></div></td>
					<td valign="top"><div class="copyright"><a href="{U_ADVENT}" title="{L_ADVENT_INF2}"><img src="{T_IMAGESET_PATH}/blok_logo_3.png" width="120" height="30" alt="" /></a></div></td>
                    <td valign="top"><div class="copyright"><a href="{U_THANKSLIST}" title="{L_THANKS_USER_INF2}"><img src="{T_IMAGESET_PATH}/blok_logo_4.png" width="120" height="30" alt="" /></a></div></td>
                    <td valign="top"><div class="copyright"><a href="{U_MEDALS}" title="{L_MEDALS_INF2}"><img src="{T_IMAGESET_PATH}/blok_logo_5.png" width="120" height="30" alt="" /></a></div></td>
                    <td valign="top"><div class="copyright"><a href="{U_NEWS}" title="{L_NEWS_INF2}"><img src="{T_IMAGESET_PATH}/blok_logo_6.png" width="120" height="30" alt="" /></a></div></td>
                    <td valign="top"><div class="copyright"><a href="{U_ARCADE}" title="{L_ARCADE_INF2}"><img src="{T_IMAGESET_PATH}/blok_logo_7.png" width="120" height="30" alt="" /></a></div></td>
		     	</tr>
		     </tbody>
Что в итоге дает вот такую картинку -
snap228.jpg
На страницах форумов использую несколько таких схем-файлов-блоков, естественно, каждый раз их переименовывая..
blok_five_body1.html , blok_five_body2.html , blok_five_body3.html

Полный код файла blok_five_body.html получился таким -

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

<div class="forabg">
    <div class="inner">
    	<span class="corners-top"><span></span></span>
	    	<table class="table1" cellspacing="1">
		
	     	<thead>
	        	<tr>
		    	<th style="width: 14%;">{L_BLOK_1}</th>
		    	<th style="width: 14%;">{L_BLOK_2}</th>
		    	<th style="width: 14%;">{L_BLOK_3}</th>
                <th style="width: 16%;">{L_BLOK_4}</th>
                <th style="width: 14%;">{L_BLOK_5}</th>
                <th style="width: 14%;">{L_BLOK_6}</th>
                <th style="width: 14%;">{L_BLOK_7}</th>
	    	    </tr>
		    </thead>
		
		    <tbody>
			    <tr class="bg2">
					<td valign="top"><div class="copyright"><a href="{U_GALLERY_MOD}" title="{L_GALLERY_INF2}"><img src="{T_IMAGESET_PATH}/blok_logo_1.png" width="120" height="30" alt="" /></a></div></td>
					<td valign="top"><div class="copyright"><a href="{U_BLOG}" title="{L_BLOGS_INF2}"><img src="{T_IMAGESET_PATH}/blok_logo_2.png" width="120" height="30" alt="" /></a></div></td>
					<td valign="top"><div class="copyright"><a href="{U_ADVENT}" title="{L_ADVENT_INF2}"><img src="{T_IMAGESET_PATH}/blok_logo_3.png" width="120" height="30" alt="" /></a></div></td>
                    <td valign="top"><div class="copyright"><a href="{U_THANKSLIST}" title="{L_THANKS_USER_INF2}"><img src="{T_IMAGESET_PATH}/blok_logo_4.png" width="120" height="30" alt="" /></a></div></td>
                    <td valign="top"><div class="copyright"><a href="{U_MEDALS}" title="{L_MEDALS_INF2}"><img src="{T_IMAGESET_PATH}/blok_logo_5.png" width="120" height="30" alt="" /></a></div></td>
                    <td valign="top"><div class="copyright"><a href="{U_NEWS}" title="{L_NEWS_INF2}"><img src="{T_IMAGESET_PATH}/blok_logo_6.png" width="120" height="30" alt="" /></a></div></td>
                    <td valign="top"><div class="copyright"><a href="{U_ARCADE}" title="{L_ARCADE_INF2}"><img src="{T_IMAGESET_PATH}/blok_logo_7.png" width="120" height="30" alt="" /></a></div></td>
		     	</tr>
		     </tbody>
		
	    	</table>
    	<span class="corners-bottom"><span></span></span>
	</div>
</div>
Выше кода

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

<div class="forabg">
и ниже

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

</div>
</div>
внесены условия показа самого блока...
Ну, а данный блок на основном форуме размещен прямо под лого в файле overall_header.html вот так

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

			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
			</div>

		<span class="corners-bottom"><span></span></span></div>
    </div>
	
<!-- INCLUDE blok_five_body.html -->

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

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
Еще несколько примеров использования данной схемы создания блоков
blok_five_body2.html выводит на главную облако тегов и дополнительное видеокно видеозала...

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

<div class="forabg"><div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1">
		<thead>
		<tr>
			<th style="width: 50%;">{L_TAG_CLOUD}</th>
			<th style="width: 50%;">{L_VIDEO_CLIPS_FORUM}</th>

 		</tr>
		</thead>
		<tbody>
			<tr class="bg2">
				<td>
                   <center> 
				   {L_TAG_TEG}
 <!-- IF CLOUD_ENABLED -->
    <div id="contentError">{L_TAG_CLOUD_ERROR}</div>
    <script type="text/javascript" src="{T_TEMPLATE_PATH}/swfobject.js"></script>
    <script type="text/javascript">
        var so = new SWFObject("{T_TEMPLATE_PATH}/tagcloud.swf", "tagcloud", "{CLOUD_WIDTH}", "{CLOUD_HEIGHT}", "7", "#{CLOUD_BGCOLOR}");
        so.addVariable("tcolor", "0x{CLOUD_TCOLOR}");
        so.addVariable("tcolor2", "0x{CLOUD_TCOLOR2}");
        so.addVariable("hicolor", "0x{CLOUD_HICOLOR}");
        so.addVariable("distr", "{CLOUD_DISTR}");
        so.addVariable("tspeed", "{CLOUD_TSPEED}");
        <!-- IF CLOUD_TRANS -->so.addParam("wmode", "transparent");<!-- ENDIF -->
        so.addVariable("mode", "tags");
        <!-- IF CLOUD_MODE == 'titles' -->
        so.addVariable("tagcloud", "<tags><!-- BEGIN forumrow --><!-- IF forumrow.S_IS_CAT --><a href='{forumrow.U_VIEWFORUM}' style='20' color='0x{CLOUD_COLOR_CAT}'>{forumrow.FORUM_NAME}</a><!-- ENDIF --><!-- END forumrow --></tags>");
        <!-- ELSEIF CLOUD_MODE == 'search' -->
        so.addVariable("tagcloud", "<tags><!-- BEGIN cloud_search_loop -->{cloud_search_loop.CLOUD_SEARCH_LINK}<!-- END cloud_search_loop --></tags>");
        <!-- ELSE -->
        so.addVariable("tagcloud", "<tags><!-- BEGIN cloud_users_loop -->{cloud_users_loop.CLOUD_USERS_LINK}<!-- END cloud_users_loop --></tags>");
        <!-- ENDIF -->
        so.write("contentError");
    </script>
<!-- ENDIF --> 
					</center>   
				</td>
				<td>
                   <center> 
				    {L_VIDEO_PLEER_INDEX}
	                <div id="container">Плеер грузится ...</div>
	                <script type="text/javascript"> 
					jwplayer("container").setup({ flashplayer: "{T_SUPER_TEMPLATE_PATH}/player.swf", 
					file: "./video_instruk/{VIDEO_INSTRUK}", 
					height: 300, width: 450 }); 
					</script>
                   </center>
        		</td>
			</tr>
		</tbody>
		</table>

	<span class="corners-bottom"><span></span></span></div>
</div>
Вот так смотрится...
snap229.jpg
blok_five_body3.html выводит на главную рандомные новости и в центре последние записи с блогов...

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

<div class="forabg"><div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1">
		<thead>
		<tr>
		    <th style="width: 33%;">{L_DYK_TITLE}</th>
			<th style="width: 34%;">{L_BLOGS} &bull; {L_RECENT_BLOGS}</th>
			<th style="width: 33%;">{L_DYK_TITLE}</th>
 		</tr>
		</thead>
		<tbody>
			<tr class="bg2">
				<td>
                   <center> 
                        {DID_YOU_KNOW}
                   </center>
        		</td>
				<td>
                   <center> 
					<!-- IF .recent_blogs -->
					<!-- BEGIN recent_blogs -->
					<div class="postbody" style="width: 100%;">
					<strong>
						<!-- IF recent_blogs.S_HAS_POLL -->
							<img src="{T_THEME_PATH}/images/blog/icon_poll.gif" style="float: right;" alt="" /> 
						<!-- ENDIF -->
						<a href="{recent_blogs.U_VIEW}">{recent_blogs.TITLE}</a>
					</strong> 
						{L_POST_BY_AUTHOR} 
						<strong>{recent_blogs.USER_FULL}</strong>  
						<br />
					<div class="content" style="width: 95%; padding: 4px;">
						{recent_blogs.MESSAGE}
					</div>                
					<div class="clear">
					</div>
					</div>
					<!-- END recent_blogs -->
						<!-- ENDIF -->	
				</td>
				<td>
                   <center> 
                        {DID_YOU_KNOW}
                   </center>
        		</td>
			</tr>
		</tbody>
		</table>
	<span class="corners-bottom"><span></span></span></div>
</div>
Вот так смотрится -
snap230.jpg
blok_five_body4.html выводит счетчик просмотров страниц форума и рекламно-информационные буклеты

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

<div class="forabg"><div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1">
		<thead>
		<tr>
		    <th style="width: 33%;"></th>
			<th style="width: 34%;">{L_COUNTER}</th>
			<th style="width: 33%;"></th>
 		</tr>
		</thead>
		<tbody>
			<tr class="bg2">
				<td>
                        <div class="copyright">
			         		<a href="http://realmeteo.ru/vladivostok/1" title="Реальная погода во Владивостоке"><img src="http://realmeteo.ru/vladivostok/1/images/data/info1.png" border="0" width="100" height="31" /></a>
							<a href="http://www.google-pagerank.net" target="_blank"><img src="http://www.google-pagerank.net/rank.php?s=1" alt="what is my pagerank" border="0"></a>
                            <a href="http://push2check.com/fotovideoforum.ru" target="_blank"  title="Push 2 Check"><img src="http://auto.push2check.com/p.php?d=fotovideoforum.ru&w=88&h=32&bw=1&bg=F7E900&f=1C89E8&b=1C89E8&png=1&pngi=1&psn=Fotovideoforum&plc=all" style="border-style: none" alt="Push 2 Check"/></a>
                        </div> 
        		</td>
				
				<td>
                   <center> 
                   <!-- IF S_COUNTER -->
                      {COUNTER}
                      <!-- IF S_COUNTER_STATS -->
                      {L_HITS_PER_USER}: {HITS_PER_USER} &bull; {L_HITS_PER_HOUR}: {HITS_PER_HOUR} &bull; {L_HITS_PER_DAY}: {HITS_PER_DAY} &bull; {L_HITS_PER_WEEK}: {HITS_PER_WEEK} &bull; {L_HITS_PER_MONTH}: {HITS_PER_MONTH} &bull; {L_HITS_PER_YEAR}: {HITS_PER_YEAR} &bull; 
                      <!-- ELSE -->
                      <!-- ENDIF -->
                      {COUNTER_STARTDATE}
                   <!-- ENDIF -->	
					</center>
				</td>
				
				<td>
                         <div class="copyright">
                            <a href="http://www.metabot.ru/" target="_blank"><img src="http://www.metabot.ru/metabot.gif" alt="MetaBot.ru - Мощнейшая российская мета-поисковая система!" width=88 height=31 border=0></a>
							<a href="http://www.cy-pr.com/" target="_blank"><img src="http://www.cy-pr.com/e/fotovideoforum.ru_23.gif" border="0" width="88" height="31" alt="Анализ веб сайтов" /></a>
							<a href="http://realmeteo.ru/moscow/5" title="Реальная погода в Москве"><img src="http://realmeteo.ru/moscow/5/images/data/info1.png" border="0" width="100" height="31" /></a>
                         </div> 
        		</td>
			</tr>
		</tbody>
		</table>
	<span class="corners-bottom"><span></span></span></div>
</div>
Так это смотрится -
snap231.jpg
Сам файл blok_five_body4.html размещен не в index_body.html , а в подвале форума - в overall_footer.html , буквально в самом его начале...
Короче творить с данным блоком можно много и возможности с его манипулированием - предостаточно...
Творите и помните phpBB - это просто (с)
Удачи....
ПыСы...если на днях решусь - выложу тему о создании подобных боковых вертикальных блоков для расположения их слева-справа на главной и на любых страницах форума...
Последний раз редактировалось Пчелкин 09.08.2012 8:47, всего редактировалось 3 раза.
Аватара пользователя
МайскийЖук
phpBB 3.0.7-PL1
Сообщения: 2535
Стаж: 14 лет 6 месяцев
Благодарил (а): 17 раз
Поблагодарили: 366 раз

Горизонтальный блок на несколько секций

Сообщение МайскийЖук »

Пчелкин, ты хочешь, чтобы все форумы, основанные на phpBB3, стали столь же насыщенными, как твой? Чтобы для того, чтобы найти сообщение из трех слов, надо было просмотреть пятьсот миллионов рюшек?

:)
Любовь и боль, покой и бой я как любой несу с собой…
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 11234
Стаж: 14 лет 2 месяца
Откуда: fotovideoforum.ru
Благодарил (а): 1782 раза
Поблагодарили: 1340 раз
Контактная информация:

Re: Горизонтальный блок на несколько секций

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

Я ничего не хочу...я поделился тем, о чем постоянно спрашивают и спрашивают и спрашивают и в личку, и на моем форуме, и через мыло..вот выдай им этот мод и все...
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 11234
Стаж: 14 лет 2 месяца
Откуда: fotovideoforum.ru
Благодарил (а): 1782 раза
Поблагодарили: 1340 раз
Контактная информация:

Re: Горизонтальный блок на несколько секций

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

Ув. модераторы..два верхних сообщения МайскогоЖука можно удалить?
Zhenjka
phpBB 1.4.1
Сообщения: 46
Стаж: 11 лет 2 месяца
Откуда: Кемерово
Благодарил (а): 4 раза
Поблагодарили: 1 раз

Re: Горизонтальный блок на несколько секций

Сообщение Zhenjka »

Уважаемый Пчелкин, не подскажете где вставить ссылку на blok_five_body.html в overall_header?
Запутался в коде

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

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
Заранее спасибо.
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 11234
Стаж: 14 лет 2 месяца
Откуда: fotovideoforum.ru
Благодарил (а): 1782 раза
Поблагодарили: 1340 раз
Контактная информация:

Re: Горизонтальный блок на несколько секций

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

А у вас основной поиск не в редбаре? Зря...
Тогда еще ниже перед кодом -

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

		<div class="navbar">
			<div class="inner"><span class="corners-top"><span></span></span>
Это начало редбара....
Zhenjka
phpBB 1.4.1
Сообщения: 46
Стаж: 11 лет 2 месяца
Откуда: Кемерово
Благодарил (а): 4 раза
Поблагодарили: 1 раз

Re: Горизонтальный блок на несколько секций

Сообщение Zhenjka »

Спасибо большое.
Zhenjka
phpBB 1.4.1
Сообщения: 46
Стаж: 11 лет 2 месяца
Откуда: Кемерово
Благодарил (а): 4 раза
Поблагодарили: 1 раз

Re: Горизонтальный блок на несколько секций

Сообщение Zhenjka »

Возник еще один вопрос, надо вставить флеш-баннер, дали код а он мне ломает блок. Блок у меня для счетчиков.
Вот код

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

<p style="text-align: left;"><iframe src="http://files.bannersnack.com/iframe/embed.html?hash=bu8yxqyq&bgcolor=%233D3D3D&wmode=opaque&clickTag=chinachay42.ru&t=1361018484" frameborder="0" scrolling="no" width="435" height="150"></iframe><a href="/page/content/
Подскажите пожалуйста.
Аватара пользователя
Татьяна5
Поддержка
Поддержка
Сообщения: 12372
Стаж: 12 лет 7 месяцев
Благодарил (а): 223 раза
Поблагодарили: 3517 раз
Контактная информация:

Re: Горизонтальный блок на несколько секций

Сообщение Татьяна5 »

Ошибка в синтаксисе кода, 2 незакрытых тега <a> и <p>

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

<p style="text-align: left;"><iframe src="http://files.bannersnack.com/iframe/embed.html?hash=bu8yxqyq&bgcolor=%233D3D3D&wmode=opaque&clickTag=chinachay42.ru&t=1361018484" frameborder="0" scrolling="no" width="435" height="150"></iframe></p>
Zhenjka
phpBB 1.4.1
Сообщения: 46
Стаж: 11 лет 2 месяца
Откуда: Кемерово
Благодарил (а): 4 раза
Поблагодарили: 1 раз

Re: Горизонтальный блок на несколько секций

Сообщение Zhenjka »

Татьяна5, тут похоже что не обрабатывает флеш.
Вот часть кода блока

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

<div class="forabg"><div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1">
		<thead>
		<tr>
		    <th style="width: 33%;"></th>
			<th style="width: 34%;"></th>
			<th style="width: 33%;"></th>
 		</tr>
</thead>
		<tbody>
			<tr class="bg2">
<td>
				   <p style="text-align: left;"><iframe src="http://files.bannersnack.com/iframe/embed.html?hash=bu8yxqyq&bgcolor=%233D3D3D&wmode=opaque&clickTag=chinachay42.ru&t=1361018484" frameborder="0" scrolling="no" width="435" height="150"></iframe></p>
				</td>
</tr>
		</tbody>
		</table>
	<span class="corners-bottom"><span></span></span></div>
</div>
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 11234
Стаж: 14 лет 2 месяца
Откуда: fotovideoforum.ru
Благодарил (а): 1782 раза
Поблагодарили: 1340 раз
Контактная информация:

Re: Горизонтальный блок на несколько секций

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

Zhenjka писал(а):width="435" height="150"
Ну дык и уменьшай пропорционально пока не станет ровно...а?
Я флеши пихал...но ресайзил вразрез полученных кодов
И если делишь на три - где второй и третий блок?

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

<div class="forabg">
    <div class="inner">
    	<span class="corners-top"><span></span></span>
	    	<table class="table1" cellspacing="1">
		
	     	<thead>
	        	<tr>
                    <th style="width: 33%;"></th>
		         	<th style="width: 34%;"></th>
		        	<th style="width: 33%;"></th>		    	
	    	    </tr>
		    </thead>
		
		    <tbody>
			    <tr class="bg2">
					<td valign="top"><div class="copyright"><p style="text-align: left;"><iframe src="http://files.bannersnack.com/iframe/embed.html?hash=bu8yxqyq&bgcolor=%233D3D3D&wmode=opaque&clickTag=chinachay42.ru&t=1361018484" frameborder="0" scrolling="no" width="435" height="150"></iframe></p></div></td>
					<td valign="top"><div class="copyright"><p style="text-align: left;"><iframe src="ВТОРОЙ"></iframe></p></div></td>
					<td valign="top"><div class="copyright"><p style="text-align: left;"><iframe src="ТРЕТИЙ"></iframe></p></div></td>
		     	</tr>
		     </tbody>
		
	    	</table>
    	<span class="corners-bottom"><span></span></span>
	</div>
</div>
Топ и див от стиля зачем выкинул?
если выкидывать тока и в столбцах и ниже тож надо
Zhenjka
phpBB 1.4.1
Сообщения: 46
Стаж: 11 лет 2 месяца
Откуда: Кемерово
Благодарил (а): 4 раза
Поблагодарили: 1 раз

Re: Горизонтальный блок на несколько секций

Сообщение Zhenjka »

Вот весь код

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

<div class="forabg"><div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1">
		<thead>
		<tr>
		    <th style="width: 33%;"></th>
			<th style="width: 34%;"></th>
			<th style="width: 33%;"></th>
 		</tr>
		</thead>
		<tbody>
			<tr class="bg2">
				<td>
                        <div class="copyright">
			         		 <!-- HotLog -->
							 <!--www.e-kuzbass counter-->
    <script>
    (new Image).src = 'http://www.e-kuzbass.ru/rank/logo/?id=11853;r='+
    escape(document.referrer)+((typeof(screen)=='undefined')?'':
    ';s='+screen.width+'*'+screen.height+'*'+(screen.colorDepth?
    screen.colorDepth:screen.pixelDepth))+';u='+escape(document.URL)+
    ';m='+Math.random();
    </script>
    <a href="http://www.e-kuzbass.ru/rank/statistic/?id=11853" title="еКузбасс.ру">
    <img src="http://www.e-kuzbass.ru/rank/logo/?id=11853&c=v1f0f0f0" border="0" height="31" width="88" alt="города Новокузнецк, Кемерово"></a>
    <!--/www.e-kuzbass counter-->
<script type="text/javascript">
hotlog_r=""+Math.random()+"&s=2277149&im=560&r="+
escape(document.referrer)+"&pg="+escape(window.location.href);
hotlog_r+="&j="+(navigator.javaEnabled()?"Y":"N");
hotlog_r+="&wh="+screen.width+"x"+screen.height+"&px="+
(((navigator.appName.substring(0,3)=="Mic"))?screen.colorDepth:screen.pixelDepth);
hotlog_r+="&js=1.3";
document.write('<a href="http://click.hotlog.ru/?2277149" target="_blank"><img '+
'src="http://hit18.hotlog.ru/cgi-bin/hotlog/count?'+
hotlog_r+'" border="0" width="88" height="31" alt="HotLog"><\/a>');
</script>
<noscript>
<a href="http://click.hotlog.ru/?2277149" target="_blank"><img
src="http://hit18.hotlog.ru/cgi-bin/hotlog/count?s=2277149&im=560" border="0"
width="88" height="31" alt="HotLog"></a>
</noscript>
<!-- /HotLog -->

                        </div> 
        		</td>
				
				<td><div class="copyright">
                   <a href="http://weather.infobot.ru/current/russia/kemerovo/kemerovo.html"><img alt="Погода в Кемерово" src="http://informer.infobot.ru/weather/russia.kemerovo.kemerovo.current.88x31.gif" width=88 height=31 border=0></a>
				   <!-- begin of Top100 code -->

<script id="top100Counter" type="text/javascript" src="http://counter.rambler.ru/top100.jcn?2847756"></script>
<noscript>
<a href="http://top100.rambler.ru/navi/2847756/">
<img src="http://counter.rambler.ru/top100.cnt?2847756" alt="Rambler's Top100" border="0" />
</a>

</noscript>
<!-- end of Top100 code -->
<a href="http://kemerovo7.ru/top/?do=v&i=178" title="Рейтинг сайтов Кемерово"><img src="http://kemerovo7.ru/top/?do=in&id=178" border="0"></a>
				</td>
				
				<td><div class="copyright"><p style="text-align: left;"><iframe src="http://files.bannersnack.com/iframe/embed.html?hash=bu8yxqyq&bgcolor=%233D3D3D&wmode=opaque&clickTag=chinachay42.ru&t=1361018484" frameborder="0" scrolling="no" width="88" height="31"></iframe></p>
</div></td>
			</tr>
		</tbody>
		</table>
	<span class="corners-bottom"><span></span></span></div>
</div>
http://kem-club.ru , счетчики отображаются а флеш нет.
Закрыто

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