календарь и вкладки в постах от ForumD.ru

Страница: 1

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

Поделиться12023-09-26 15:06:43

Автор: сука, плек
Администратор
Сообщений: 90
Уважение: +0
Биография

устарело

HTML низ

Код:

<!-- Ивент-календарь и вкладки в постах © ForumD.ru | Gerda -->
<script type="text/javascript" src="https://forumstatic.ru/files/001b/d8/6a/25658.js"></script>

Стиль (в свой стиль или рядом с календарем в HTML низ внутри тегов <style>тут коды</style>)

Код:

/* Ивент-календарь и вкладки в постах © ForumD.ru | Gerda */

.punbb .post-content .switcher p,
.punbb .post-content .fdklinks p,
.punbb .post-content .multik .button p,
.punbb .post-content .kelendar .date p,
.punbb .post-content .kelendar .event .close p {padding: 0; margin: 0;}

.punbb .post-content.fdk-post {overflow: unset;}

.fdk-wrap {position: relative;}
.kelendar {
position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr); 
  grid-auto-rows: 1fr; 
  grid-gap: 2px;
}

.kelendar .item {
color: #000;
box-shadow: 0px 0px 6px #b7b7b766, 0px 0px 10px #5e5e5c38 inset;
background: #e6e6e6;
border: 1px solid #b5b5b5;
}
.kelendar .item.action {
background: #eee390;
border: 1px solid #ccb718;
transition: all 1s;
-webkit-transition: all 1s;
cursor: pointer;
}
.kelendar .item.action:hover {
background: #000;
border: 1px solid #000;
}
.kelendar .item.action .date {
color: #800808;
font-weight: bold;
}
.kelendar .item.action:hover .date {color: #fff;}
.kelendar .item.empty {opacity: 0.35; color: #626262;}
.kelendar .date {
padding: 0 0 0 10px;
font-family: 'BEWARE';
}
.kelendar .date div {display: inline-block;}
.kelendar .number {font-size: 30px;}
.kelendar .day {
padding: 0 0 0 5px;
font-size: 15px;
vertical-align: top;
}

.kelendar .event {
position: absolute;
z-index: 100;
top: 0;
left: 0;
padding: 10px 30px 10px 40px;
visibility: hidden;
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
max-height: 330px;
overflow-y: auto;
cursor: default;

box-shadow: 0px 0px 6px #b7b7b766, 0px 0px 10px #5e5e5c38 inset;
background: #e6e6e6;
border: 5px solid #000;
}
.kelendar .event.show {visibility: visible; opacity: 1;}

.kelendar .event .close {
cursor: pointer;
position: absolute;
top: -5px;
left: 0px;
padding: 10px;
background: #000;
color: #fff;
font-weight: bold;
}

.post-content.multik {position: relative;}
.post-content.multik .kelendar {
position: absolute;
width: 100%;
top: 0;
right: 0;
visibility: hidden;
opacity: 0;
transition: all 0.8s;
-webkit-transition: all 0.8s;
}
.post-content.multik .kelendar.active {position: relative;visibility: visible; opacity: 1; display: grid;}

.post-content.multik .kelendar.tab.active {display: block;}
.post-content.multik .kelendar.tab {
display: none;
transition: all 1.2s;
-webkit-transition: all 1.2s;
}

.fdklinks, .multik .switcher {text-align: center; padding: 0 10px 5px;}
.fdklinks a, .multik .button {
display: inline-block;
cursor: pointer;
background-color: #a6a6b0;
vertical-align: middle;
text-transform: uppercase;
margin: 5px;
padding: 4px 15px;
transition: all 0.8s;
-webkit-transition: all 0.8s;
border-radius: 5px;
color: #292e3e;
}
.fdklinks a:hover, .multik .button:hover {background: #000; color: #fff;}
.multik .button.but-act, .multik .button.but-act:hover {
cursor: default; 
background: #eee390;
color: #000;
}

.fdklinks br {display: none;}

.fdkpost .fdk-header {display: none;}

.kelendar.tab .item {padding: 10px; margin: 5px; height: auto !important;}

.kelendar.tab .date {padding: 0;}
.kelendar.tab .item.action {display: inline-block; vertical-align: top;}
.kelendar.tab .item.action .event {color: #000;}
.kelendar.tab .item.action:hover {color: #fff;}

HTML в форме ответа (инструментарий)

Код:

<!-- Инструментарий ивент-календаря в вкладок © ForumD.ru | Gerda -->

<div class="fdk-tags">

<div class="instr-col">
<h3>Календари</h3>

<div><p>Календарь
<i>[block="kelendar"]
,
[/block]
</i></p>
<span>Вставка блока календаря. Ячейки нужно вставлять внутрь этого блока.</span>
</div>

<div><p>Ячейка календаря
<i>[block="item"]
[block="date"][block="number"],[/block]
[block="day"][/block][/block]

[/block]
</i></p>
<span>Вставляем число внутрь блока <b>number</b>.<br>
Вставляем день недели внутрь блока <b>day</b>.</span>
</div>

<div><p>Пустая ячейка
<i>[block="item empty"],[/block]
</i></p>
<span>Пустая ячейка служит для заполнения остатка пространства календаря. Каждая строка должна содержать 7 ячеек.</span>
</div>

<div><p>Вставить дату
<i>[block="date"]
[block="number"],[/block]
[block="day"][/block]
[/block]
</i></p>
<span>Отдельный тег для вставки числа и дня недели.<br>
Вставляем число внутрь блока <b>number</b>.<br>
Вставляем день недели внутрь блока <b>day</b>.</span>
</div>

<div><p>Событие
<i>[block="event"]
,
[block="close"]✘[/block][/block]
</i></p>
<span>Блок для описания события. Вставляется внутрь ячейки календаря <u>ОТДЕЛЬНО от даты</u>.<br>
Внутри блока с событиями можно использовать любые бб-теги, картинки, спойлеры, цитаты и т.д.</span></div>

<br><h3>Дополнительные теги</h3>

<div><p>Кнопки-ссылки
<i>[block="fdklinks"],[/block]</i></p>
<span>Вставляйте внутрь этого блока простые бб-ссылки, чтобы превратить их в стилизованные кнопки.</div>

</div>

<div class="instr-col">
<h3>Переключаемые вкладки</h3>

<div><p>Добавить вкладку
<i>[block="kelendar tab"]
,
[/block]
</i></p>
<span>Вставка блока вкладки. Внутри можно использовать любой бб-контент.<br>
У вас также есть опции переключать календари. Для этого используйте вместо вкладки коды календаря. <br>
<u>ВНИМАНИЕ!</u> оборачивать календари вкладкой НЕ НУЖНО.</span>
</div>

<div><p>Переключатель вкладок
<i>[block="switcher"]
[block="button"]1-я кнопка,[/block]
[block="button"]2-я кнопка[/block]
[block="button"]3-я кнопка[/block]
[/block]</i></p>
<span>Кнопки переключения должны вставляться отдельно - ВНЕ блоков <b>kelendar</b> или <b>fdk-wrap</b>.<br>
Вы можете вставить переключатель как над вкладками или календарями, так и под ними.<br>
Количество кнопок должно соответствовать количеству вкладок, они автоматически закрепляются за блоками <b>kelendar</b> или <b>kelendar tab</b> в том порядке, в котором они у вас расставлены в посте.</span>
</div>


<div><p>Обернуть календари или вкладки
<i>[block="fdk-wrap"]
,
[/block]</i></p>
<span>Оберните все блоки <b>kelendar</b> или <b>kelendar tab</b> в этот тег.<br>
Это позволит избежать проблемы с "прыжками" календарей при переключенивкладок.</span>
</div>

<br><h3>Отгрузка на страницу</h3>

<div><p>Неотгружаемый контент
<i>[block="fdk-header"],[/block]</i></p>
<span>При отгрузке сообщения на страницу все, что находится внутри этого блока, будет скрыто на странице, но при этом отображаться в посте.
</div>

</div>

<div class="close">✘</div></div>

<style>
#fdk-instr {
display: none;
padding: 10px;
margin: 10px;
background: #cfccca;
border: 1px solid #c8c4c1;
}
#fdk-instr.show {display: block;}
#fdk-instr .fdk-tags p i {display: none;}

#fdk-instr .instr-row {grid-column: 1/-1;}

.fdk-tags {display: grid; grid-template-columns: repeat(2, 1fr); position: relative; gap: 10px;}
.fdk-tags h3 {font-size: 14px; text-transform: uppercase; margin: 0 0 5px;}
.punbb .fs-box .fdk-tags p,
.fdk-tags .close  {
background: #a6a6b0;
padding: 4px;
color: #292e3e;
border-radius: 3px;
cursor: pointer;
transition: all 0.6s;
-webkit-transition: all 0.6s;
}
.punbb .fs-box .fdk-tags p {display: inline-block; margin: 5px 0 0;}
.punbb .fs-box .fdk-tags p:hover, .fdk-tags .close:hover {background: #000; color: #fff;}
.fdk-tags span {
display: block;
margin: 5px 0;
color: #4f4f4f;
}
.fdk-tags b {
display: inline-block;
background: #eee390;
padding: 0 3px;
color: #000;
font-weight: normal;
}
.fdk-tags u {font-weight: bold;}

.fdk-tags .close {position: absolute; top 0; right: 0;}
</style>

<script type="text/javascript">
$(document).ready(function() {
$('#addition-area').append('<div class="fdk-tags-but"><span>Календарь</span></div>');
$('#form-buttons').after('<div id="fdk-instr"></div>');
$('.fdk-tags').appendTo('#fdk-instr');
$('#addition-area .fdk-tags-but').click(function(){$('#fdk-instr').toggleClass('show');});
$('#fdk-instr .close').click(function(){$('#fdk-instr').removeClass('show');});

$('#fdk-instr .fdk-tags p').click(function(){
var L=$(this).find('i').html();
var P=L.split(',');
bbcode(P[0],P[1])
return false;
});

});
</script>

Страница

<div class="post-content">

<div class="switcher">
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button">4</div>
<div class="button">5</div>
<div class="button">6</div>
<div class="button">7</div>
<div class="button">8</div>
<div class="button">9</div>
<div class="button">10</div>
<div class="button">11</div>
<div class="button">12</div>
</div>

<div class="fdkpost" style="display: none"></div></div>
<div class="post-loader">Загрузка...</div>
<script>
var posts = [17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28];
$.getJSON('/api.php?method=post.get&post_id=' + posts.join(','), function(jsondata) {
if (jsondata.response && (jsondata.response.length > 0)) {
var messages = jsondata.response.map((el, index) => el.message);
$('.fdkpost').html(messages.join('')).show();
$('.post-loader').hide();
} else {
$('.post-loader').html('Ошибка загрузки');
}
});
</script>

кнопки переключения вставляются на HTML. надо просто вставить столько кнопок, сколько постов отгружается.
красным через запятую - ID сообщений, которые отгружаются на страницу. чтобы узнать ID поста, можно кликнуть по ссылке-дате на сообщении и в конце ссылке будет ID https://forumd.ru/viewtopic.php?id=7479#p184743

HTML низ

Код:

<!-- Ивент-календарь, вкладки и слайдеры в постах © ForumD.ru | Gerda -->
<script>
//скорость анимации слайдера
var fdksTime = '800';

//кнопки слайдера
var fdksArrows = 'always'; //стрелки (always - показывать, never - скрыть)
var fdksBullets = 'always'; //буллеты: кружки по количества слайдов (always - показывать, never - скрыть)
var fdksPlayStop = 'true'; //кнопка включения/выключения слайдшоу (true - показывать, false - скрыть)
var fdksPlay = 'Включить слайдшоу'; //текст кнопки включения слайдшоу
var fdksStop = 'Отключить слайдшоу'; //текст кнопки отключения слайдшоу

//автопроигрывание слайдера
var fdksAutoPlay = 'false';  //включить/отключить (true - включить, false - отключить)
var fdksHoverStop = 'true'; //останавка при наведении курсора (true - останавливать, false - не останавливать)
var fdksAutoTime = '400'; //скорость показа следующего слайда

//направление прокрутки слайдов: toRight - направо, toLeft - налево, toTop - наверх, toBottom - вниз
var fdksNext = 'toLeft'; //следующий
var fdksPrev = 'toRight'; //предыдущий

</script>
<script type="text/javascript" src="https://forumstatic.ru/files/001b/de/5c/19321.js"></script>

Стиль (в свой стиль или рядом с календарем в HTML низ внутри тегов <style>тут коды</style>)

Код:

/* Ивент-календарь, вкладки и слайдеры в постах © ForumD.ru | Gerda */

.punbb .post-content .switcher p,
.punbb .post-content .fdklinks p,
.punbb .post-content .multik .button p,
.punbb .post-content .kelendar .date p,
.punbb .post-content .kelendar .event .close p {padding: 0; margin: 0;}

.punbb .post-content.fdk-post {overflow: unset;}

.fdk-wrap {position: relative;}
.kelendar {
position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr); 
  grid-auto-rows: 1fr; 
  grid-gap: 2px;
}

.kelendar .item {
color: #000;
box-shadow: 0px 0px 6px #b7b7b766, 0px 0px 10px #5e5e5c38 inset;
background: #e6e6e6;
border: 1px solid #b5b5b5;
}
.kelendar .item.action {
background: #eee390;
border: 1px solid #ccb718;
transition: all 1s;
-webkit-transition: all 1s;
cursor: pointer;
}
.kelendar .item.action:hover {
background: #000;
border: 1px solid #000;
}
.kelendar .item.action .date {
color: #800808;
font-weight: bold;
}
.kelendar .item.action:hover .date {color: #fff;}
.kelendar .item.empty {opacity: 0.35; color: #626262;}
.kelendar .date {
padding: 0 0 0 10px;
font-family: 'BEWARE';
}
.kelendar .date div {display: inline-block;}
.kelendar .number {font-size: 30px;}
.kelendar .day {
padding: 0 0 0 5px;
font-size: 15px;
vertical-align: top;
}

.kelendar .event {
position: absolute;
z-index: 100;
top: 0;
left: 0;
padding: 10px 30px 10px 40px;
visibility: hidden;
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
max-height: 330px;
overflow-y: auto;
cursor: default;
z-index: 999;

box-shadow: 0px 0px 6px #b7b7b766, 0px 0px 10px #5e5e5c38 inset;
background: #e6e6e6;
border: 5px solid #000;
}
.kelendar .event.show {visibility: visible; opacity: 1;}

.kelendar .event .close {
cursor: pointer;
position: absolute;
top: -5px;
left: 0px;
padding: 10px;
background: #000;
color: #fff;
font-weight: bold;
}

.post-content.multik {position: relative;}
.post-content.multik .kelendar {
position: absolute;
width: 100%;
top: 0;
right: 0;
visibility: hidden;
opacity: 0;
transition: all 0.8s;
-webkit-transition: all 0.8s;
}
.post-content.multik .kelendar.active {position: relative;visibility: visible; opacity: 1; display: grid;}

.post-content.multik .kelendar.tab.active {display: block;}
.post-content.multik .kelendar.tab {
display: none;
transition: all 1.2s;
-webkit-transition: all 1.2s;
}

.fdklinks, .multik .switcher {text-align: center; padding: 0 10px 5px;}
.fdklinks a, .multik .button {
display: inline-block;
cursor: pointer;
background-color: #a6a6b0;
vertical-align: middle;
text-transform: uppercase;
margin: 5px;
padding: 4px 15px;
transition: all 0.8s;
-webkit-transition: all 0.8s;
border-radius: 5px;
color: #292e3e;
}
.fdklinks a:hover, .multik .button:hover {background: #000; color: #fff;}
.multik .button.but-act, .multik .button.but-act:hover {
cursor: default; 
background: #eee390;
color: #000;
}

.fdklinks br {display: none;}

.fdkpost .fdk-header {display: none;}

.kelendar.tab .item {padding: 10px; margin: 5px; height: auto !important;}

.kelendar.tab .date {padding: 0;}
.kelendar.tab .item.action {display: inline-block; vertical-align: top;}
.kelendar.tab .item.action .event {color: #000;}
.kelendar.tab .item.action:hover {color: #fff;}

.kelendar.tags {display:block;}
.kelendar .popup {cursor: alias;}

.fdk-slider {max-height: 390px;}
.fdk-slider .slide {max-height: 350px; min-height: 350px;}
.rhino-container {padding: 0 0 36px;}

.fdk-slider .slide {
width: calc(100% - 102px) !important;
margin: 0 40px !important;
height: auto !important;
overflow: auto !important;

padding: 10px;
  box-shadow: 0px 0px 6px #b7b7b766, 0px 0px 10px #5e5e5c38 inset;
  background: #e6e6e6;
  border: 1px solid #b5b5b5;
}


.rhino-prev, .rhino-next {top: calc(50% - 40px); font-size: 0;}
.rhino-prev {left: 0;}
.rhino-next {right: 0;}
.rhino-prev:before {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.rhino-next:before {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.rhino-prev:before, 
.rhino-next:before {
content: '';
    border: solid #79798a;
    border-width: 0 5px 5px 0;
    display: inline-block;
    padding: 12px;
transition: all 0.8s;
  -webkit-transition: all 0.8s;
}

.rhino-prev:hover:before, 
.rhino-next:hover:before {border-color: #000;}


.rhino-bullets {
margin: 0;
padding: 0 40px 0 230px;
  width: calc(100% - 270px);
text-align: right; 
z-index: 20;
}
.punbb .rhino-bullets li {
line-height: 36px;
margin: 0 5px;
display: inline-block;
}
.rhino-bullets a {
height: 12px;
  width: 12px;
background: #79798a;
transition: all 0.8s;
  -webkit-transition: all 0.8s;
cursor: pointer;
font-size: 0;
display: block;
border-radius: 50%;
}
.rhino-bullets a:hover {background: #000;}
.rhino-bullets a.rhino-active-bullet {background: #ccb718;}

.rhino-toggle {
background-color: #a6a6b0;
text-transform: uppercase;
padding: 4px 15px;
transition: all 0.8s;
-webkit-transition: all 0.8s;
border-radius: 5px;
color: #292e3e;
z-index: 40;
}
.rhino-toggle:hover {background: #000; color: #fff;}

HTML в форме ответа (инструментарий)

Код:

<!-- Инструментарий ивент-календаря, вкладок и слайдера © ForumD.ru | Gerda -->

<div class="fdk-tags post-content">
<div class="switcher">
 <div class="button">Календари</div>
 <div class="button">Вкладки</div>
 <div class="button">Слайдеры</div>
 <div class="button">Всплывающие окна и другое</div>
</div>

<div class="fdk-wrap">
 <div class="kelendar tab">

<div class="instr-col"><!-- Календари -->
<h3>Создание ячеек</h3>

<div><p>Календарь
<i>[block="kelendar"]
,
[/block]
</i></p>
<span>Вставка блока календаря. Ячейки нужно вставлять внутрь этого блока.</span>
</div>

<div><p>Ячейка календаря
<i>[block="item"]
[block="date"][block="number"],[/block]
[block="day"][/block][/block]

[/block]
</i></p>
<span>Вставляем число внутрь блока <b>number</b>.<br>
Вставляем день недели внутрь блока <b>day</b>.</span>
</div>

<div><p>Пустая ячейка
<i>[block="item empty"],[/block]
</i></p>
<span>Пустая ячейка служит для заполнения остатка пространства календаря. Каждая строка должна содержать 7 ячеек.</span>
</div>

<!-- Календари --></div>

<div class="instr-col"><!-- Календари -->
<h3>Контент ячеек</h3>


<div><p>Вставить дату
<i>[block="date"]
[block="number"],[/block]
[block="day"][/block]
[/block]
</i></p>
<span>Отдельный тег для вставки числа и дня недели.<br>
Вставляем число внутрь блока <b>number</b>.<br>
Вставляем день недели внутрь блока <b>day</b>.</span>
</div>

<div><p>Событие
<i>[block="event"]
,
[block="close"]✘[/block][/block]
</i></p>
<span>Блок для описания события. Вставляется внутрь ячейки календаря <u>ОТДЕЛЬНО от даты</u>.<br>
Внутри блока с событиями можно использовать любые бб-теги, картинки, спойлеры, цитаты и т.д.</span></div>

<!-- Календари --></div>

 </div>
 <div class="kelendar tab">

<div class="instr-col"><!-- Вкладки -->

<div><p>Добавить вкладку
<i>[block="kelendar tab"]
,
[/block]
</i></p>
<span>Вставка блока вкладки. Внутри можно использовать любой бб-контент.<br>
У вас также есть опции переключать календари. Для этого используйте вместо вкладки коды календаря. <br>
<u>ВНИМАНИЕ!</u> оборачивать календари вкладкой НЕ НУЖНО.</span>
</div>

<div><p>Обернуть календари или вкладки
<i>[block="fdk-wrap"]
,
[/block]</i></p>
<span>Оберните все блоки <b>kelendar</b> или <b>kelendar tab</b> в этот тег.<br>
Это позволит избежать проблемы с "прыжками" календарей при переключенивкладок.</span>
</div>

<!-- Вкладки --></div>

<div class="instr-col"><!-- Вкладки -->

<div><p>Переключатель вкладок
<i>[block="switcher"]
[block="button"]1-я кнопка,[/block]
[block="button"]2-я кнопка[/block]
[block="button"]3-я кнопка[/block]
[/block]</i></p>
<span>Кнопки переключения должны вставляться отдельно - ВНЕ блоков <b>kelendar</b> или <b>fdk-wrap</b>.<br>
Вы можете вставить переключатель как над вкладками или календарями, так и под ними.<br>
Количество кнопок должно соответствовать количеству вкладок, они автоматически закрепляются за блоками <b>kelendar</b> или <b>kelendar tab</b> в том порядке, в котором они у вас расставлены в посте.</span>
</div>

<!-- Вкладки --></div>

 </div>

 <div class="kelendar tab">

<div class="instr-row"><!-- Cлайдеры -->

<div><p>Слайдер
<i>[block="fdk-slider"]
,
[/block]
</i></p>
<span>Вставка блока слайдера. Слайды нужно вставлять внутрь этого блока.</span>
</div>

<div><p>Добавить слайд
<i>[block="slide"]
,
[/block]
</i></p>
<span>Вставка блока слайда. Внутри можно использовать любой бб-контент.<br>
У вас также есть опции вставлять внутрь слайда календари.<br> 
Вкладки вместе со слайдером НЕ СОВМЕСТИМЫ.</span>
</div>

<!-- Cлайдеры --></div>
 </div>

 <div class="kelendar tab">


<div class="instr-col"><!-- Всплывающ и др -->

<h3>Всплывающие окна</h3>

<div><p>Пост с всплывающими окнами
<i>[block="kelendar tags"]
,
[/block]
</i></p>
<span>Оберните содержимое поста в этот блок, чтобы в нем работали всплывающие окна.<br>
<u>ВНИМАНИЕ!</u> если вы используете вкладки, вставлять этот тег НЕ НУЖНО - внутри вкладок всплывающие окна работают без дополнительных тегов.</span>
</div>

<div><p>Всплывающее окно
<i>[block="popup"]
отображаемый контент,

[block="event"]
всплывающий контент

[block="close"]✘[/block][/block]
[/block]
</i></p>
<span>Внутри блока <b>popup</b> вставляется видимый по умолчанию контент.<br>
Внутри блока <b>event</b> вставляется контент, который будет всплывать при клике на видимый контент.<br>
В обоих случаях можно использовать любые бб-теги, картинки и т.д.</span></div>

<!-- Всплывающ и др --></div>

<div class="instr-col"><!-- Всплывающ и др -->

<h3>Дополнительные теги</h3>

<div><p>Кнопки-ссылки
<i>[block="fdklinks"],[/block]</i></p>
<span>Вставляйте внутрь этого блока простые бб-ссылки, чтобы превратить их в стилизованные кнопки.</div>

<br><h3>Отгрузка на страницу</h3>

<div><p>Неотгружаемый контент
<i>[block="fdk-header"],[/block]</i></p>
<span>При отгрузке сообщения на страницу все, что находится внутри этого блока, будет скрыто на странице, но при этом отображаться в посте.
</div>

<!-- Всплывающ и др --></div>


 </div>
</div>

<div class="close">✘</div></div>

<style>
#fdk-instr {
display: none;
padding: 10px;
margin: 10px;
background: #cfccca;
border: 1px solid #c8c4c1;
}
#fdk-instr.show {display: block;}
#fdk-instr .fdk-tags p i {display: none;}

#fdk-instr .instr-row {grid-column: 1/-1;}

.fdk-tags.post-content.multik .kelendar.tab.active {display: grid; grid-template-columns: repeat(2, 1fr); position: relative; gap: 10px; padding: 10px 0 0;}
.fdk-tags h3 {font-size: 14px; text-transform: uppercase; margin: 0 0 5px;}
.punbb .fs-box .fdk-tags p,
.fdk-tags .close  {
background: #a6a6b0;
padding: 4px;
color: #292e3e;
border-radius: 3px;
cursor: pointer;
transition: all 0.6s;
-webkit-transition: all 0.6s;
}
.punbb .fs-box .fdk-tags p {display: inline-block; margin: 5px 0 0;}
.punbb .fs-box .fdk-tags p:hover, .fdk-tags .close:hover {background: #000; color: #fff;}
.fdk-tags span {
display: block;
margin: 5px 0;
color: #4f4f4f;
}
.fdk-tags b {
display: inline-block;
background: #eee390;
padding: 0 3px;
color: #000;
font-weight: normal;
}
.fdk-tags u {font-weight: bold;}

.fdk-tags .close {position: absolute; top 0; right: 0;top: 0;}
</style>
<script type="text/javascript">
$(document).ready(function() {$('#addition-area').append('<div class="fdk-tags-but"><span>Календарь, вкладки, слайдеры</span></div>');});
</script>

Поделиться22023-09-26 15:07:51

Автор: сука, плек
Администратор
Сообщений: 90
Уважение: +0
Биография

Просто календарь (месяц начинается в среду)

пн

вт

ср

чт

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

✘

пт

сб

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.

✘

вс

пн

вт

ср

чт

пт

сб

вс

пн

вт

ср

чт

пт

сб

вс

пн

вт

ср

чт

пт

сб

вс

пн

вт

ср

чт

пт

сб

вс

Код:

[block="kelendar"]

[block="item empty"][block="date"][block="number"]30[/block][block="day"]пн[/block][/block][/block]

[block="item empty"][block="date"][block="number"]31[/block][block="day"]вт[/block][/block][/block]

[block="item"]
[block="date"][block="number"]1[/block][block="day"]ср[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]2[/block][block="day"]чт[/block][/block]

[block="event"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.
[block="close"]✘[/block][/block]

[/block]

[block="item"]
[block="date"][block="number"]3[/block][block="day"]пт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]4[/block][block="day"]сб[/block][/block]

[block="event"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.[block="close"]✘[/block][/block]

[/block]

[block="item"]
[block="date"][block="number"]5[/block][block="day"]вс[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]6[/block][block="day"]пн[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]7[/block][block="day"]вт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]8[/block][block="day"]ср[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]9[/block][block="day"]чт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]10[/block][block="day"]пт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]11[/block][block="day"]сб[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]12[/block][block="day"]вс[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]13[/block][block="day"]пн[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]14[/block][block="day"]вт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]15[/block][block="day"]ср[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]16[/block][block="day"]чт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]17[/block][block="day"]пт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]18[/block][block="day"]сб[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]19[/block][block="day"]вс[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]20[/block][block="day"]пн[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]21[/block][block="day"]вт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]22[/block][block="day"]ср[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]23[/block][block="day"]чт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]24[/block][block="day"]пт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]25[/block][block="day"]сб[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]26[/block][block="day"]вс[/block][/block]
[/block]


[block="item"]
[block="date"][block="number"]27[/block][block="day"]пн[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]28[/block][block="day"]вт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]29[/block][block="day"]ср[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]30[/block][block="day"]чт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]31[/block][block="day"]пт[/block][/block]
[/block]

[block="item empty"]
[block="date"][block="number"]1[/block][block="day"]сб[/block][/block]
[/block]

[block="item empty"]
[block="date"][block="number"]2[/block][block="day"]вс[/block][/block]
[/block]


[/block]

Поделиться32023-09-26 15:09:51

Автор: сука, плек
Администратор
Сообщений: 90
Уважение: +0
Биография

Календарь с вкладками

1-я неделя

2-я неделя

3-я неделя

пн

✘

вт

ср

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.

✘

чт

пт

сб

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.

✘

вс

пн

вт

ср

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.

✘

чт

пт

сб

вс

пн

вт

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.

✘

ср

чт

пт

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.

✘

сб

вс

Код:

[block="switcher"]
[block="button"]1-я неделя[/block] [block="button"]2-я неделя[/block] [block="button"]3-я неделя[/block]
[/block]

[block="fdk-wrap"]
[block="kelendar"]
[block="item"]
[block="date"][block="number"]6[/block][block="day"]пн[/block][/block]

[block="event"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.
[block="close"]✘[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]7[/block][block="day"]вт[/block][/block]


[/block]

[block="item"]
[block="date"][block="number"]8[/block][block="day"]ср[/block][/block]

[block="event"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.[block="close"]✘[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]9[/block][block="day"]чт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]10[/block][block="day"]пт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]11[/block][block="day"]сб[/block][/block]

[block="event"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.[block="close"]✘[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]12[/block][block="day"]вс[/block][/block]
[/block]

[/block]

[block="kelendar"]

[block="item"]
[block="date"][block="number"]13[/block][block="day"]пн[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]14[/block][block="day"]вт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]15[/block][block="day"]ср[/block][/block]

[block="event"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.[block="close"]✘[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]16[/block][block="day"]чт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]17[/block][block="day"]пт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]18[/block][block="day"]сб[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]19[/block][block="day"]вс[/block][/block]
[/block]

[/block]

[block="kelendar"]

[block="item"]
[block="date"][block="number"]20[/block][block="day"]пн[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]21[/block][block="day"]вт[/block][/block]
[block="event"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.[block="close"]✘[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]22[/block][block="day"]ср[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]23[/block][block="day"]чт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]24[/block][block="day"]пт[/block][/block]
[block="event"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.[block="close"]✘[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]25[/block][block="day"]сб[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]26[/block][block="day"]вс[/block][/block]
[/block]

[/block]

[/block]

Поделиться42023-09-26 15:10:21

Автор: сука, плек
Администратор
Сообщений: 90
Уважение: +0
Биография

Демонстрация вкладок и доп.функций

вкладка без календаря

вкладка-календарь

теги календаря в простой вкладке

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.

цитата

еще несного текста

спойлер

текст внутри спойлера

отступ и новый параграф

еще один параграф

вот так вот

пн

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.

✘

вт

ср

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.

✘

чт

пт

сб

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.

✘

вс

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

ячейка с ивентом

какой-то кликабельный текст

✘

цитата

✘

ячейка

текст в блоке с обводкой как у ячейки

ячейка с датой

Большой текст

маленький текст сверху

и еще текст внутри ячейки

июня, 18:00

Приходите играть какой-то такой-то ивент!

тег даты без ячейки

Большой текст

маленький текст сверху

пустая ячейка

полупрозрачный блок с текстом

Код:

[block="switcher"]
[block="button"]вкладка без календаря[/block]
[block="button"]вкладка-календарь[/block]
[block="button"]теги календаря в простой вкладке[/block]
[/block]

[block="fdk-wrap"]

[block="kelendar tab"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.
[quote]цитата[/quote]
еще несного текста 
[spoiler="спойлер"]текст внутри спойлера[/spoiler]

отступ и новый параграф

еще один параграф

вот так вот

[/block]

[block="kelendar"]
[block="item"]
[block="date"][block="number"]6[/block][block="day"]пн[/block][/block]

[block="event"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.[block="close"]✘[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]7[/block][block="day"]вт[/block][/block]


[/block]

[block="item"]
[block="date"][block="number"]8[/block][block="day"]ср[/block][/block]

[block="event"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.[block="close"]✘[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]9[/block][block="day"]чт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]10[/block][block="day"]пт[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]11[/block][block="day"]сб[/block][/block]

[block="event"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.[block="close"]✘[/block][/block]
[/block]

[block="item"]
[block="date"][block="number"]12[/block][block="day"]вс[/block][/block]
[/block]

[/block]

[block="kelendar tab"]

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

ячейка с ивентом
[block="item"]какой-то кликабельный текст
[block="event"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.
[block="close"]✘[/block][/block]
[/block]

[block="item"][quote]цитата[/quote]
[block="event"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.
[block="close"]✘[/block][/block]
[/block]

[block="item"][img]https://upforme.ru/uploads/001b/de/5c/2/541580.gif[/img]

[block="event"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.
[block="close"]✘[/block][/block]
[/block]

ячейка
[block="item"]
текст в блоке с обводкой как у ячейки
[/block]

ячейка с датой
[block="item"]
[block="date"][block="number"]Большой текст[/block]
[block="day"]маленький текст сверху[/block][/block]
и еще текст внутри ячейки
[/block]

[block="item"]
[block="date"][block="number"]11[/block]
[block="day"]июня, 18:00[/block][/block]
Приходите играть какой-то такой-то ивент!
[/block]

тег даты без ячейки
[block="date"][block="number"]Большой текст[/block]
[block="day"]маленький текст сверху[/block][/block]

пустая ячейка
[block="item empty"]полупрозрачный блок с текстом[/block]

[/block]


[/block]

Поделиться52023-09-30 16:41:19

Автор: сука, плек
Администратор
Сообщений: 90
Уважение: +0
Биография

Пример слайдера:

ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ul

tricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Код:

rem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pra

esent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut. In non sodales elit. Vestibulum eu convallis lectus, at malesuada lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus maximus ex ut tincidunt dictum. Vivamus sollicitudin aliquam augue, quis blandit ex maximus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta mauris at fringilla pellentesque. Maecenas ornare vitae velit eu consequat. Nullam eget odio pharetra, ultricies augue vitae, vehicula arcu. Duis orci nulla, imperdiet eu enim ac, condimentum imperdiet lacus. Mauris nec tincidunt sem, sed dignissim nunc. Nullam justo arcu, blandit in quam eu, viverra commodo justo.

Поделиться62023-09-30 16:42:09

Автор: сука, плек
Администратор
Сообщений: 90
Уважение: +0
Биография

Слайдер, где ооочень много слайдов

Поделиться72023-09-30 16:42:23

Автор: сука, плек
Администратор
Сообщений: 90
Уважение: +0
Биография

Слайдер с календарями внутри слайдов

ср

чт

✘

пт

сб

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.

✘

вс

пн

вт

ср

чт

пт

сб

вс

пн

вт

пн

✘

вт

ср

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.

✘

чт

пт

сб

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.

✘

вс

Просто календарь (месяц начинается в среду)

пн

вт

ср

чт

✘

пт

сб

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt pulvinar leo, nec ultrices nisi rutrum ut.

✘

вс

пн

вт

ср

чт

пт

сб

вс

пн

вт

ср

чт

пт

сб

вс

пн

вт

ср

чт

пт

сб

вс

пн

вт

ср

чт

пт

сб

вс

Страница: 1

My Skin

Меню навигации

Пользовательские ссылки

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

календарь и вкладки в постах от ForumD.ru

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

Поделиться12023-09-26 15:06:43

Поделиться22023-09-26 15:07:51

Поделиться32023-09-26 15:09:51

Поделиться42023-09-26 15:10:21

Поделиться52023-09-30 16:41:19

Поделиться62023-09-30 16:42:09

Поделиться72023-09-30 16:42:23