phpbb-belk.ru

Небольшой интересный скриптик открытия. Простой

На основе этого скрипта реализованы блоки здесь, внизу страницы.

Можно посмотреть демо (в "голом" варианте - без оформления):

демо

А это демо со встроенным оформлением анимированных кнопок:

демо с css

Никаких файлов на сервер загружать не надо - только код.

Пример:



где



- ссылка на открытие первого блока



- сам первый блок с информацией...

Для работы скрипта у вас должна быть подключена библиотека .
Если у вас её нет - подключить можно примерно так:

В "шапке" сайта найти



Вставить перед найденным



Кому удобнее разбираться самостоятельно у себя на компе - можно скачать демо-версию скрипта:

"голый" вариант:

Скачать из файлового архива сайта

вариант со стилем:

Скачать из файлового архива сайта

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

Я так понимаю, что все изменения должны быть сделаны в файле overall_footer.html

В этом файле вывод информации содержится в этом коде:


Хотелось бы понять, что есть что, для начала. Буду сюда писать свои мысли, если нет возражений.
<!-- IF S_WATCH_FORUM_LINK --> это Список форумов
<!-- IF U_WATCH_TOPIC --> - ? // КТО СЕЙЧАС НА КОНФЕРЕНЦИИ
<!-- IF U_BOOKMARK_TOPIC --> - ? // ТОПЛИСТ БЛАГОДАРНОСТЕЙ
<!-- IF U_BUMP_TOPIC --> - ? // СТАТИСТИКА
{U_MOBILE_ON}">{L_MOBILE_ON} - мобильная версия
<!-- IF U_TEAM --> это наша команда
{U_DELETE_COOKIES} - удалить куки
{S_TIMEZONE} - часовой пояс

Добавлено спустя 11 минут 33 секунды:
1. Теперь дальше. Допустим я хочу вывести несколько блоков.
| Кто сейчас на форуме || Статистика || Топлист Благодарностей || Инфо по форуму
2. Правлю файл overall_footer.html в соответствии с первым постом.
3. Составляю таблицу:
3.1 Первая вкладка: Кто сейчас на форуме
<span><a class="" href="#tab1"><b>Кто сейчас на форуме</b></a></span>
Какую ссылку прописывать?
<!-- IF U_WATCH_TOPIC --><li <!-- IF S_WATCHING_TOPIC -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{U_WATCH_TOPIC}" title="{L_WATCH_TOPIC}">{L_WATCH_TOPIC}</a></li><!-- ENDIF -->

Блок с информацией:
<div id="tab1" class="tab_content">
первый контейнер
</div>

1. в названии блока прописывается не ссылка, а именно название. то есть



прописывается



а в блок вставляется именно информация вывода то есть для этой ссылки это будет (напишу для сабсилвера, можно просто заменить. это - для примера).



то есть сам блок с этим выводом будет таким:



как-то так...

добавлю:

условие для открытия можно прописывать как для всей ссылки, чтобы можно было показывать/не показывать её и информацию её блока. то есть (для дней рождения):



то есть вся ссылка обёрнута в условие. и при запрете показа дней рождения её просто никто не увидит...

Я чего то вообще жестко туплю с этим скриптом.
Если я правильно понимаю, то первая ячейка для КТО СЕЙЧАС НА КОНФЕРЕНЦИИ для стиля просильвер будет выглядеть так:



а блок вывода так:


верно?

Добавлено спустя 3 минуты 2 секунды:
Хотелось бы еще обнаглеть и красивые кнопочки сделать. Странно, почему Вы их не сделали у себя, Андрей. Смотрелось бы лучше чем просто ссылки, на мой взгляд.

нет.



ссылка будет выглядеть так:



эта строка



- начало условия. и ещё оно без закрывающего тэга <!-- ENDIF -->.
сразу получится ошибка.

а в контейнер div надо прописать код



так как здесь есть условие - можно и ссылку "обернуть" в него. тогда ссылка будет выглядеть так:






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

У меня в файле overall_footer.html эта часть отсутствует
эта часть кода что обозначает?
У меня и этого нет: IF U_VIEWONLINE и этого L_ONLINE_EXPLAIN и даже этого: <!-- IF LEGEND -->
Судя по всему на просильвере вывод отличается и название функций тоже

не, не. Я имею в виду на главной странице в вас вывод по вкладкам реализован в виде ссылок: | Кто сейчас на сайте || Статистика || Дни рождения || Кто сегодня был на сайте || Топ 5 Национальных флагов || Инфор по сайту |
А можно было бы сделать в виде кнопок.

Добавлено спустя 5 минут 37 секунд:
У меня вывод стандартный в просильвере такой:

вся эта лабуда находится и выводится в файле index_body.html

всё это у вас есть. я приводил примеры с чистого просилвера.

кстати, добавил в начало темы демо-версии скрипта с оформлением в виде анимированных кнопок.

а, вон оно чего Пошел разбираться.
За кнопочки отдельное спасибо Класс!

Добавлено спустя 2 минуты 29 секунд:
Я правильно понимаю, что этот скрипт надо добавить в файл index_body.html, отредактировав его соответствующим образом

Добавлено спустя 4 минуты 36 секунд:
Ну вроде понятно, как то так:



Добавлено спустя 2 минуты 2 секунды:
Пойду попробую. На всякий оставлю тут свой файл, ДО:

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



удачи.

Что то я намутил не то. Ошибка 500 и белый экран
Сейчас попробую в блокноте сделать и покажу как это у меня выглядит

Добавлено спустя 5 минут 24 секунды:
Вот мой обновленный файл, который выдал ошибку 500



Добавлено спустя 13 минут 24 секунды:
Или, все же, надо в обертку делать:

само собой. недо ведь код встраивать, а не целую html-страницу. для примера создана отдельная страница. c <html>, <body>... вам же нужен только код.

то есть:

проверьте, есть ли у вас в шапке (overall_header.html) код аодключения библотеки



если нет - пропишите его там перед </head>

дальше. этот код (самой кнопки) у вас уже точно есть и прописывать его заново смыла нет (будут совпадения и ошибки чтения)



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



как-то так...

Вот жеж. Это надо понимать, где скрипт подключать надо.
Пошел пробовать Спасибо!

Добавлено спустя 13 минут 36 секунд:
Почти получилось!
Выглядит это так:



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

Еще пробел бы убрать, он явно лишний.

А скруглить этот блок можно же тут, да?



а именно добавить border-radius: 5px; сюда

кнопки отобразились. просто синие на синем фоне.

добавьте в код ссылок белый цвет:



Добавлено спустя 5 минут 31 секунду:
а можете просто другой код прописать этих кнопок (обозвать по другому). тогда они не будут конфликтовать с предыдущими выводами...

ваш полный код:



ушёл по делам.

Ага, по второму варианту получилось. Спасибо, Андрей!
Только вот пробел убрать не могу
тэги <p> по убирал - не помогло Пробел явно лишний
Скругление добавил.
А что если эти кнопки прямо в блок засунуть, а? Тогда бы и накладок не было, и выглядело красиво



Добавлено спустя 16 минут 35 секунд:
Скруглил только нижние края + удалил дни рождения. Они выводятся сверху, когда они есть. Получилось очень даже красиво.
Осталось только пробел/отступ грохнуть.
Андрей, подскажи плз, если знаешь



Добавлено спустя 12 минут 56 секунд:
Хотел также спросить это фиксированный размер блока? А если будет больше пользователей во вкладке КТО СЕЙЧАС НА КОНФЕРЕНЦИИ. Он будет автоматом растягиваться? Такое впечатление, что все вкладки одинаковые по размеру блока и он определяется именно содержимым первой вкладки
P.S. Думаю еще перетащить кнопки из верхнего меню, в нижнее. Тут мне уже все понятно стало Классная доработка.

из строки



уберите <br />

убрать с каждой.

размер блока по длине - резиновый, по ширине - фиксированный. правится здесь:





можно попробовать написать min-height:150px;, тогда вроде долно быть фиксировано минимально 150, а при увеличении информации должен растягиваться. попробуйте.

Блин, сам не допер до br. Сегодня вечером все сделаю
Надо еще немного фон подогнать и обрамление кнопок сделать белым цветом.
Как получится, отпишусь.
Реально очень качественная и нужная доработка.
Форум более приятным становится
Спасибо, Андрей

Добавлено спустя 5 часов 32 минуты 36 секунд:
Убрал br, не помогло

Добавлено спустя 4 минуты 27 секунд:
Как то это связанно с h3 блока <div id="tab1" class="tab_content">

попробуйте убрать внутренний отступ:

в строке



заменить padding:10px; на padding:0;

либо можно попытаться отрегулировать всё внутри отступами. тогда заменить

padding:10px; на padding:-10px 10px 0 10px;, где (по порядку)

-10px - отступ сверху внутри блока
10px - отступ справа
0 - отступ снизу
10px - отступ слева...

К сожалению отступ сохраняется, padding:-10px не работает
Показывает варнинг при просмотре кода



Выставил так: padding:0px 10px 0 10px;
Отступ уменьшился, но все равно остался

Добавлено спустя 9 минут 50 секунд:
И еще один очень важный вопрос.
Сейчас внимательно посмотрев внедренные кнопочки на форуме.
Они оказались у меня все разными
В посте стиль такой:



в index_body.html такой



Кнопки в верхнем меню другие. Стиль еще пока не нашел
Можно же их сделать все одинаковыми, да?
Просто я попробовал, получилось как то криво

Добавлено спустя 16 секунд:
Постараюсь более подробно расписать

Добавлено спустя 10 минут 49 секунд:
Хотелось бы чтобы этот стиль заработал, в нижнем меню:

Кнопки обвелись, но интерактивными не стали (((

Добавлено спустя 2 минуты 16 секунд:
Вот так сделал:

Получил так:



Опять туплю
Причем кнопки стали в виде ссылок с подчеркиванием

можете так попробовать: (заменить стиль внизу):



насчёт отступа. сейчас посмотрел код просилвера - это ваш стандартный вариант с таким отступом. вот ваш стилевой файл h3:



видите? по умолчанию сдвиг сверху 20px

править код в стиле - не выход, так как "поломается" всё на самом сайте.
можно попробовать отредактировать локально:

в каждом коде вывода, где у вас идёт открытие <h3>, можно попробовать заменить его на



то есть "нивелировать" отступ только здесь. может поможет. попробуйте.

Добавлено спустя 2 минуты 24 секунды:
сейчас обратил внимание на косячок - сразу не заметил. в верхнем стилевом файле меню прописаны рабочими два "бордера". замените код на этот:

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




Не пойму где искать этот стиль. У меня в overall_header.html его нет
styles/prosilver/theme/my.css
тут тоже нет. Блин какой же я тупой Нифига не получается

Добавлено спустя 13 минут 49 секунд:

Да, способ рабочий!

по первому коду (перебор внизу):

судя по коду на вашей странице - вы неправильно прописали ссылки. наверное скопировали когда "экспериментировали"...

смотрите:



а должно быть



неправильно класс прописан. исправьте - всё должно работать.

стилевой код меню находится в файле menu.css (вроде этот у вас) в папке theme.

Стоп. Кажись понял по нижней части

Добавлено спустя 4 минуты 11 секунд:
Точно, до самого доперло Работает
Только кнопочки как бы не по центру этой синей полоски...
Но тут вроде очевидно buttond{float:left;margin:2px;padding:2px 4px 2px 4px;
paddingом поиграюсь

Добавлено спустя 3 минуты 20 секунд:
А на счет меню, у меня этот файл называется my.css



это именно тот файл, т.к. он прописан тут
styles/prosilver/theme/stylesheet.css

Но в нем нет этого стиля. Вообще не понятно как у меня все работает

это отступы ВНУТРИ самой кнопки.

скорее надо здесь паддингом поиграться...



Добавлено спустя 12 минут 46 секунд:


судя по коду - это код вывода кнопочек в теме (viewtopic_body),
а вот меню у вас в этом коде есть. ведь его код вот этот:

Да, все верно, Андрей! Заменил и верхнее меню.
Спасибо, все работает!!! Ура!

Добавлено спустя 17 минут 40 секунд:
А просильвер то преображается, Андрей! Уже довольно приятно смотреть становится

Добавлено спустя 21 час 14 минут 26 секунд:
Теперь хочу поставить актуальный информер прогноза погоды в одну из вкладок. Как получится отпишусь тут

а такой в природе вообще существует?

Это с тобой на 100% согласен! Но люди все равно смотрят и потом нервно кусают пальцы в ожидании дождей на море Хотя, по моему опыту, дождь идет в горах и редко доходит до моря. Яндекс врет на 90%
Тем не менее Информер очень хорошо вписался с структуру форума
Делается все просто.

Открываем информер от Яндекса:
https://yandex.ru/pogoda/11463/informer
Вписываем в одну из ссылок название:

Ну и выводим блоки разделяя их пробелами, например:
+ еще выровнил по центру, прописав style="text-align: center;"


Добавлено спустя 8 минут 30 секунд:
Вывел погоду на главную по умолчанию. Не все находят её
Получилось красиво.

да, нормальненько получилось - сейчас глянул.