Единый форум поддержки

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

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



CSS трюки

Сообщений 121 страница 127 из 127

1

Данная тема призвана помочь в решении специфических и актуальных задач для Вашего форума с помощью css методов


Дополнения к текущей темеИнтересные решения для форумов

+4

121

В связи с тем, что появился функционал создания подфорумов от сервиса, выкладываю альтернативный способ оформления. Подфорумы в одну строку как на phpbb
http://forumupload.ru/uploads/0000/14/1c/15964/t896694.jpg
и тогда вместо такого вида:
http://forumupload.ru/uploads/0000/14/1c/15964/t951225.jpg
получится такой:

тыц
Код:
<!-- Подфорумы в одну строку -->
<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>

+10

122

Для того, чтобы сделать подфорумы такими же как при использовании скрипта Подфорумы "не скриптом".

Код:
<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"/>

Его можно использовать без изменений.

https://forumupload.ru/uploads/0000/14/1c/2/871515.png

Можно отдельным файлом использовать скрипт:

Код:
<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

123

Устаревший вариант

Кому нужен и компактный вид подфорумов, но и переход к последнему сообщению подфорумов, а так же всплывающее Сколько тем и сообщений. Иконки свои, нужны три типа иконок: для подфорумов, где нет сообщений, для обычных сообщений и для новых. По умолчанию стоят размеры 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)

+7

124

Mirra Bell написал(а):

Поставила скрипт Цветовыделение ников По ГРУППАМ, т.к. прежнее напрочь перестало работать. Но и этот почему-то отказывается выделять группу с 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)

+2

125

код
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"/>

Его можно использовать без изменений.

https://forumupload.ru/uploads/0000/14/1c/2/871515.png

Можно отдельным файлом использовать скрипт:
Выделить код

    <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>

Можете подсказать куда первый скрипт, вами предложенный, вставлять?  :glasses:

Отредактировано Демиан (Пн, 10 Май 2021 20:19:02)

0

126

Демиан
Обычно скрипты ставят в html низ, а все style ставят в html верх

+3

127

Индикатор активности пользователя

За основу взят код от @Reysler.
В отличие от оригинального кода, данный код аналогично оформляет поле Последний визит, если пользователь не в сети.
Преимущество перед другими вариантами исполнения в том, что это решение на чистом CSS без скриптов.
В разделе Администрирование - Поля профиля соответствующие поля Активен и Последний визит должны быть показаны!

https://forumupload.ru/uploads/0000/14/1c/32995/546965.png https://forumupload.ru/uploads/0000/14/1c/32995/768829.png
(вид в десктопном браузере)

https://forumupload.ru/uploads/0000/14/1c/32995/t858526.jpg https://forumupload.ru/uploads/0000/14/1c/32995/t411701.jpg
(вид на мобильных устройствах)

В Свой стиль или в 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;
}

Пример можно наблюдать на этом форуме.

+4