Данная тема призвана помочь в решении специфических и актуальных задач для Вашего форума с помощью css методов
Дополнения к текущей теме: Интересные решения для форумов
Единый форум поддержки |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Единый форум поддержки » Новые возможности форумов » CSS трюки
Данная тема призвана помочь в решении специфических и актуальных задач для Вашего форума с помощью css методов
Дополнения к текущей теме: Интересные решения для форумов
В связи с тем, что появился функционал создания подфорумов от сервиса, выкладываю альтернативный способ оформления. Подфорумы в одну строку как на phpbb
и тогда вместо такого вида:
получится такой:
<!-- Подфорумы в одну строку --> <style> .isub { display: flex; flex-direction: row; float: left; font-size: 9px; } .isub .tc2, .isub .tc3, .isub .tcr { display: none; } .isub .tcl { width: max-content !important; } </style>
<!-- Подфорумы в одну строку --> <script> $(document).ready(function(){ $('tr.isub .tcl').each(function (){ var t = $(this).siblings('.tc2').text(), s= $(this).siblings('.tc3').text(), l= $(this).siblings('.tcr').html(), h = 'Тем: '+t+'<br> Сообщений: '+s+'<br>'+l; $(this).attr('original-title',h).tipsy({live:!0,fade:!0,gravity:'s',opacity:1,html:!0,delayOut:2e3}); }); }); </script>
Для того, чтобы сделать подфорумы такими же как при использовании скрипта Подфорумы "не скриптом".
<script> $(document).ready(function(){ var subforums = {}; $('.category tr').each(function () { var is_sub = $(this).hasClass('isub'); if (is_sub) { var parent = $(this).data('parent'), id = $(this).attr('id').match(/forum_f(\d+)/), forum_id = id[1], last = $(this).find('.tcr > a').attr('href'); link = $(this).find('.tcl h3').html(); if (typeof subforums[parent] == 'undefined') subforums[parent] = []; subforums[parent].push({forum_id: forum_id, link: link, last: last}); } }); for (var forum_id in subforums) { var el = '<div class="subforums"><p class="d_title"><strong>Подфорумы: </strong></p><div class="Inner">'; for (var subforum of subforums[forum_id]) { el += '<span class="sf' + subforum['id'] + '">' + subforum['link']; if (!subforum['last']) el += '<img class="Icon_LastPost O" src="https://forumstatic.ru/files/0016/4f/7e/12924.jpg" title="Подфорум пуст">'; else el += '<a class="Icon_LastPost N" href="' + subforum['last'] + '" title="К последнему сообщению"><img src="https://forumstatic.ru/files/0016/4f/7e/75803.jpg"></a>'; el += '</span>'; } el += '</div></div>'; $('#forum_f' + forum_id + ' .tclcon').append(el); $('.parent-' + forum_id).remove(); } }); </script>
И вот родной css Подфорумов "не скриптом":
<link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/0016/4f/7e/73859.css"/>
Его можно использовать без изменений.
Можно отдельным файлом использовать скрипт:
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/0016/4f/7e/73859.css"/> <script type="text/javascript" src="https://forumstatic.ru/files/0000/14/1c/91546.js"></script>
Кому нужен и компактный вид подфорумов, но и переход к последнему сообщению подфорумов, а так же всплывающее Сколько тем и сообщений. Иконки свои, нужны три типа иконок: для подфорумов, где нет сообщений, для обычных сообщений и для новых. По умолчанию стоят размеры 20х13. Код не универсален, подгонка скорее всего потребуется. По умолчанию настроено в две колонки.
Код:<style> /************************************************************** Подфорумы * ***************************************************************/ .isub, .isub td {display: grid;} .punbb .isub div.tclcon { margin-left: 30px; font-size: 0; } .punbb .main .isub .tcl, .punbb .main .isub .tcr {width: 100%;} .parent, #pun-index tr.isub {background: none;} .isub.alt2 { margin-left: 300px; margin-top: -20px; } .isub {position: relative;} .parent + .isub {margin-top: -10px;} #pun-index tr.isub { grid-template-columns: auto 30px; justify-content: start; width: 300px; top: -50px; left: 80px; } #pun-index .isub td.tcl {padding: 5px 0 5px !important;} #pun-index .isub .tcl h3 {font-size: 14px;} #pun-index .isub .tcl a {color: #61492c;} #pun-index .isub .intd { grid: minmax(1px, auto) / 1fr; grid-template-areas: "tclcon"; } .punbb .isub .tc2, .punbb .isub .tc3, .punbb .isub .icon, .punbb .isub .user-avatar, .punbb .isub .lastpost, .isub .tcr br {display: none;} .isub .tcl:hover ~ .tc2, .isub .tcl:hover ~ .tc3 { display: block; position: absolute; width: 100px; left: -100px; padding: 5px 8px 4px; background-color: #fdefdb; color: var(--theme-color); max-width: 200px; text-align: center; font-size: 12px; } .isub .tc2, .isub .tc3 { border-style: solid; border-color: #d4b943; } .isub .tc2 { margin-top: -25px; margin-left: calc(90px + 2em); border-radius: 5px 0 0 5px; border-width: 1px 0px 1px 1px; } .isub .tc3 { margin-top: -25px; margin-left: calc(113px + 90px + 2em); border-radius: 0 5px 5px 0; border-width: 1px 1px 1px 0px; } .isub .tc2:before { content: "Тем:"; padding: 2px; } .isub .tc2:after { content: ''; border: 10px solid transparent; border-top-color: #fdefdb; position: absolute; margin: 15px 0 0 -70px; } .isub .tc3:before { content: "Сообщений:"; padding: 2px; } #pun-index .main .isub .tcr { grid-template: none; padding: 0; justify-content: end; align-content: center; background: url(Иконка нет сообщений) center center no-repeat; } #pun-index .isub .tcr a { margin-right: 4px; width: 20px; height: 13px; font-size: 0; background: url(Иконка обычное сообщение) no-repeat; background-size: cover; } #pun-index .isub.inew .tcr a {background: url(Иконка новое сообщение) no-repeat;} #pun-index .isub .tcr a:after { content: "К последнему сообщению"; padding: 2px; display: none; position: absolute; top: -30px; width: 200px; text-align: center; background: #fdefdb; border: 1px solid #d4b943; border-radius: 5px; font-size: 12px; color: red; } #pun-index .isub .tcr a:hover:after{display: block;} </style>Включать полное отображение подфорумов.
Новый вариант: Подфорумы и форумы на главной в две колонки не скриптом
Отредактировано kolobdur74 (Вс, 8 Авг 2021 00:12:37)
Поставила скрипт Цветовыделение ников По ГРУППАМ, т.к. прежнее напрочь перестало работать. Но и этот почему-то отказывается выделять группу с ID=14. Как его можно заставить или выделить ники каким-либо другим не устаревшим способом? На http://almarein.spybb.ru/
Ну, как то так:
По месту расположения:
<style> /* Цветовыделение ников по группам с помощью CSS */ /* В постах */ div[data-group-id="1"] li.pa-author>a {color: red;} div[data-group-id="2"] li.pa-author>a {color: blue;} div[data-group-id="3"] li.pa-author>a {color: green;} div[data-group-id="4"] li.pa-author>a {color: purple;} /* Участники и Статистика форума*/ .group1 a {color: red;} .group2 a {color: blue;} .group3 a {color: green;} .group4 a {color: purple;} /* Статистика низ форума */ a.group1 {color: red;} a.group2 {color: blue;} a.group3 {color: green;} a.group4 {color: purple;} </style>
Или вариант объединения по группам:
<style> /* Цветовыделение ников по группам с помощью CSS */ /* Группа 1 */ div[data-group-id="1"] li.pa-author>a, .group1 a, a.group1 {color: red;} /* Группа 2 */ div[data-group-id="2"] li.pa-author>a, .group2 a, a.group2 {color: blue;} /* Группа 3 */ div[data-group-id="3"] li.pa-author>a, .group3 a, a.group3 {color: green;} /* Группа 4 */ div[data-group-id="4"] li.pa-author>a, .group4 a, a.group4 {color: purple;} </style>
Где: div[data-group-id="1"] li.pa-author>a, .group1 a, a.group1 - номер группы..
Ставить в НТМЛ Верх.
Эти два кода делают одно и тоже, только первый код дает возможность одной группе ставить разные цвета в разных местах..
Вроде ничего не пропустил, но не проверял..
Ну, и скрипты теперь для этого не нужны))
Отредактировано kolobdur74 (Чт, 1 Апр 2021 01:17:19)
kernel написал(а):Для того, чтобы сделать подфорумы такими же как при использовании скрипта Подфорумы "не скриптом".
Выделить код<script>
$(document).ready(function(){
var subforums = {};
$('.category tr').each(function () {
var is_sub = $(this).hasClass('isub');
if (is_sub) {
var parent = $(this).data('parent'),
id = $(this).attr('id').match(/forum_f(\d+)/),
forum_id = id[1],
last = $(this).find('.tcr > a').attr('href');
link = $(this).find('.tcl h3').html();
if (typeof subforums[parent] == 'undefined') subforums[parent] = [];
subforums[parent].push({forum_id: forum_id, link: link, last: last});
}
});
for (var forum_id in subforums) {
var el = '<div class="subforums"><p class="d_title"><strong>Подфорумы: </strong></p><div class="Inner">';
for (var subforum of subforums[forum_id]) {
el += '<span class="sf' + subforum['id'] + '">' + subforum['link'];
if (!subforum['last']) el += '<img class="Icon_LastPost O" src="https://forumstatic.ru/files/0016/4f/7e/12924.jpg" title="Подфорум пуст">';
else el += '<a class="Icon_LastPost N" href="' + subforum['last'] + '" title="К последнему сообщению"><img src="https://forumstatic.ru/files/0016/4f/7e/75803.jpg"></a>';
el += '</span>';
}
el += '</div></div>';
$('#forum_f' + forum_id + ' .tclcon').append(el);
$('.parent-' + forum_id).remove();
}
});
</script>И вот родной css Подфорумов "не скриптом":
Выделить код<link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/0016/4f/7e/73859.css"/>
Его можно использовать без изменений.
Можно отдельным файлом использовать скрипт:
Выделить код<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/0016/4f/7e/73859.css"/>
<script type="text/javascript" src="https://forumstatic.ru/files/0000/14/1c/91546.js"></script>
Можете подсказать куда первый скрипт, вами предложенный, вставлять?
Отредактировано Демиан (Пн, 10 Май 2021 20:19:02)
Демиан
Обычно скрипты ставят в html низ, а все style ставят в html верх
Индикатор активности пользователя
За основу взят код от @Reysler.
В отличие от оригинального кода, данный код аналогично оформляет поле Последний визит, если пользователь не в сети.
Преимущество перед другими вариантами исполнения в том, что это решение на чистом CSS без скриптов.
В разделе Администрирование - Поля профиля соответствующие поля Активен и Последний визит должны быть показаны!
(вид на мобильных устройствах)
В Свой стиль или в HTML верх в тегах <style></style>:
/* Индикатор активности пользователя */ .post .post-author ul { position: relative; } .post-author .pa-online, .post-author:not(.online) .pa-author .acchide { position: absolute; display: inline-block !important; top: .25rem; right: .6rem; left: auto !important; line-height: unset; background: #8ac176 !important; height: .6rem !important; width: .6rem !important; margin: 0 0 0 -5px !important; padding: 0 !important; border: 0 !important; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; cursor: pointer; } .post-author .pa-online:hover { background: #aad79a !important; } .post-author .pa-online:before, .post-author.online .pa-author:after { content: unset !important; } .post-author:not(.online) .pa-author .acchide { background: #bbb !important; } .post-author:not(.online) .pa-author .acchide:hover { background: #ccc !important; } .post-author .pa-online:hover strong, .post-author:has(.acchide:hover) .pa-last-visit, .post-author .pa-last-visit:hover { opacity: .7; visibility: visible; } .post-author .pa-online strong, .post-author .pa-last-visit { position: absolute; display: inline-block !important; top: 16px; right: -6px; padding: 0 8px !important; min-height: 24px; line-height: 24px; background: #000; font-weight: 400; white-space: nowrap; color: #fff; font-size: 90%; text-shadow: rgba(0,0,0,0.2) 0 -1px 0; text-align: center; z-index: 10; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease; opacity: 0; visibility: hidden; cursor: text; } .post-author .pa-last-visit { top: 20px; right: 3px; } .post-author .pa-online strong:before, .post-author .pa-last-visit:before { content: ""; position: absolute; width: 0; height: 0; right: 5px; top: -10px; border-width: 6px 6px; border-style: solid; border-color: transparent transparent #000 transparent; }
Пример можно наблюдать на этом форуме.
Вы здесь » Единый форум поддержки » Новые возможности форумов » CSS трюки