ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Вкладки в постах (HTML и CSS)

Сообщений 1 страница 10 из 10

1

Вкладки в постах
Добавляет вкладки в посты (и не только!). Код адаптирован под HTML в сообщениях от сервиса майбб.ру.

Автор скрипта: kolobdur74

В теории должен работать не только в сообщениях. Код состоит из двух частей, первая часть для вставки в НТМЛ верх или туда где все css-cтили (но без <style></style>), вторая в сам пост. Оформление по умолчанию минимальное. Предусмотрено добавка вкладок до 10 вкладок на каждую сторону (сверху, слева, справа и снизу), по умолчанию стоит 4 вкладки на сторону.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Коды для постов ниже.


С 4 сторон, ёжик

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.


Только верх

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.


Верх и слева

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.


Верх и справа

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.


Сверху, слева и справа

Код
Код:
<!-- В пост. Сверху, слева и справа. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация верх */
                 "nav-top-start nav-top-1 nav-top-2 nav-top-3 nav-top-4 nav-top-end" 1fr                                    
         
         /* навигация слева и справа и поле */
    	     "nav-left-1 tabs-body tabs-body tabs-body tabs-body nav-right-1" 1fr
         "nav-left-2 tabs-body tabs-body tabs-body tabs-body nav-right-2" 1fr
         "nav-left-3 tabs-body tabs-body tabs-body tabs-body nav-right-3" 1fr
         "nav-left-4 tabs-body tabs-body tabs-body tabs-body nav-right-4" 1fr     
         
         /* Коллонки */
    	     / 1fr 1fr 1fr 1fr 1fr 1fr;
  width: 100%;         
}
</style>
 
<div class="tabbed">
  <!-- Навигация верх -->
  <!-- Нулевой -->
  <input type="radio" name="tabs-body" id="nav-top-start">
  <label for="nav-top-start" class="nav-top-start"></label>
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-top-1" checked>
  <label for="nav-top-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-top-2">
  <label for="nav-top-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-top-3">
  <label for="nav-top-3">Вкладка 3</label>
  <!-- Четвертый -->
  <input type="radio" name="tabs-body" id="nav-top-4">
  <label for="nav-top-4">Вкладка 4</label>
  <!-- Нулевой с конца  -->
  <input type="radio" name="tabs-body" id="nav-top-end">
  <label for="nav-top-end" class="nav-top-end"></label>
  
  <!-- Навигация слева и справа -->
  
  <!-- Слева 1 -->
  <input type="radio" name="tabs-body" id="nav-left-1">
  <label for="nav-left-1">Вкладка 1</label>  
  <!-- Справа 1 -->
  <input type="radio" name="tabs-body" id="nav-right-1">
  <label for="nav-right-1">Вкладка 1</label>
  
  <!-- Слева 2 -->
  <input type="radio" name="tabs-body" id="nav-left-2">
  <label for="nav-left-2">Вкладка 2</label> 
  <!-- Справа 2 -->
  <input type="radio" name="tabs-body" id="nav-right-2">
  <label for="nav-right-2">Вкладка 2</label>
  
  <!-- Слева 3 -->
  <input type="radio" name="tabs-body" id="nav-left-3">
  <label for="nav-left-3">Вкладка 3</label>
  <!-- Справа 3 -->
  <input type="radio" name="tabs-body" id="nav-right-3">
  <label for="nav-right-3">Вкладка 3</label>
  
  <!-- Слева 4 -->
  <input type="radio" name="tabs-body" id="nav-left-4">
  <label for="nav-left-4">Вкладка 4</label>
  <!-- Справа 4 -->
  <input type="radio" name="tabs-body" id="nav-right-4">
  <label for="nav-right-4">Вкладка 4</label>
  
 
  <div class="tabs-body">
	<!-- Контент вкладок сверху -->
	<div class="body-top-1">
	  <p>Текст вкладки верх 1</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	</div>
    <div class="body-top-2">Текст вкладки верх 2</div>
    <div class="body-top-3">Текст вкладки верх 3</div>
    <div class="body-top-4">Текст вкладки верх 4</div>
	
	<!-- Контент вкладок слева -->
    <div class="body-left-1">Текст вкладки слева 1</div>
    <div class="body-left-2">Текст вкладки слева 2</div>
    <div class="body-left-3">Текст вкладки слева 3</div>
    <div class="body-left-4">Текст вкладки слева 4</div>
	
	<!-- Контент вкладок справа -->
    <div class="body-right-1">Текст вкладки справа 1</div>
    <div class="body-right-2">Текст вкладки справа 2</div>
    <div class="body-right-3">Текст вкладки справа 3</div>
    <div class="body-right-4">Текст вкладки справа 4</div>
  </div>
</div>

Верх и низ

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.


Только низ

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.


Справа и слева

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.


Только слева

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.


Только справа

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

+4

2

#p159431,Automation Baby написал(а):

Добавляет вкладки в посты (и не только!).

А куда еще это можно добавить?
В объявление, описание форума…?

0

3

#p159432,marusya написал(а):

А куда еще это можно добавить?
В объявление, описание форума…?

Хтмл-верх, хтмл-низ, объявление, форма ответа (хотя хз, зачем оно там), описание форума (в теории, если оно достаточно широкое, иначе может фигня выйти), страницы, в общем, везде, где поддерживается хтмл.

Подпись автора

https://forumupload.ru/uploads/0018/1e/e2/2/295990.png
мой графоний
заказать вёрстку

+2

4

#p159432,marusya написал(а):

А куда еще это можно добавить?

В посты ещё можно, через
[html]тут код[/html]

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

+1

5

#p159434,Automation Baby написал(а):

В посты ещё можно, через
[html]тут код[/html]

Это хорошая подсказка  :cool:

А надо наверно еще в админке «разрешить в сообщениях html“ установить? А то я тут у вас попробовала вставить - не получается.

Отредактировано marusya (08.08.21 23:06)

0

6

#p159435,marusya написал(а):

А надо наверно еще в админке «разрешить в сообщениях html“ установить? А то я тут у вас попробовала вставить - не получается.

Надо, да.

Подпись автора

https://forumupload.ru/uploads/0018/1e/e2/2/295990.png
мой графоний
заказать вёрстку

+1

7

.

Отредактировано marusya (08.08.21 23:22)

0

8

#p159435,marusya написал(а):

Это хорошая подсказка  :cool:

А надо наверно еще в админке «разрешить в сообщениях html“ установить? А то я тут у вас попробовала вставить - не получается.

Так надо же ещё первую часть установить (а у нас она не установлена).

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

+1

9

#p159440,Automation Baby написал(а):

Так надо же ещё первую часть установить (а у нас она не установлена).

Ну по идее если первую часть тоже в хтмл загнать в тегах стайл, то всё должно работать. Или отдельным css файлом, подгруженным в хтмл.

Подпись автора

https://forumupload.ru/uploads/0018/1e/e2/2/295990.png
мой графоний
заказать вёрстку

+2

10

Все получилось! Спасибо!  :cool:
Интересная штука.

Отредактировано marusya (09.08.21 15:52)

+2