Данная тема призвана помочь в решении специфических и актуальных задач для Вашего форума с помощью 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 трюки] | Архив | Вт, 18 Июн 2013 | 
| Каталог скриптов/CSS | Форум для новичков | Вт, 1 Окт 2013 | 
| Изменение оформления опросов в CSS | Вопросы по оформлению форума | Пн, 18 Апр 2016 | 
| Внутренняя тень на аватарах, подобие рамки через CSS | Архив | Пт, 24 Фев 2017 | 
| Справочники и учебники по CSS, HTML, JavaScript | Справочная | Пн, 7 Окт 2013 | 
Вы здесь » Единый форум поддержки » Новые возможности форумов » CSS трюки