В общем, создал временный информер на своём форуме и экспериментирую с цветами. Подобрал белый, синий и красный , возможно, кому-то такая расцветка понравится.

CSS

Вставляем на главную форума , это необходимо, чтобы обойти ограничения информера,
так как движок может блокировать присвоенные значения.

Код

<style>
/* Основной стиль сообщений */
.informer-box .bb_box-link {
  position: relative;
  padding-left: 12px; /* место для тени слева */
  margin: 6px 0;
  border-radius: 2px;
  background: #F1F1F1;
  display: block;
  box-sizing: border-box;
}

/* Hover-эффект */
.informer-box .bb_box-link:hover {
  transform: translateY(-2px);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

/* Тень слева */
.left-shadow {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 100%;
  border-radius: 2px 0 0 2px;
  pointer-events: none;
  z-index: 0;
}
</style>

Ниже вставляем скрипт, который поможет нам обойти ограничения системы.

Код

<script>
(function() {
  // Русский флаг сверху вниз: светло-серый → синий → красный
  const colors = ['#d9d9d9', '#0039a6', '#d52b1e'];
  let colorIndex = 0;

  function addShadows() {
    const comments = document.querySelectorAll('.informer-box .bb_box-link');
    comments.forEach(el => {
      if (!el.querySelector('.left-shadow')) {
        const shadow = document.createElement('span');
        shadow.className = 'left-shadow';
        shadow.style.backgroundColor = colors[colorIndex % colors.length];
        el.prepend(shadow);
        colorIndex++;
      }
    });
  }

  // Проверяем каждые 500мс пока информер не загрузится
  const interval = setInterval(() => {
    const hasComments = document.querySelector('.informer-box .bb_box-link');
    if (hasComments) {
      clearInterval(interval);
      addShadows();

      // Следим за динамической подгрузкой новых сообщений
      const observer = new MutationObserver(addShadows);
      document.querySelectorAll('.informer-box').forEach(box => {
        observer.observe(box, { childList: true, subtree: true });
      });
    }
  }, 500);
})();
</script>

«Далее создаём информер на 5 сообщений и вставляем шаблон информера.»

Код

<style>
/* Основной стиль сообщений */
.informer-box .bb_box-link {
position: relative;
padding-left: 12px; /* место для тени слева */
margin: 6px 0;
border-radius: 2px;
background: #F1F1F1;
display: block;
box-sizing: border-box;
}

/* Hover-эффект */
.informer-box .bb_box-link:hover {
transform: translateY(-2px);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

/* Тень слева */
.left-shadow {
position: absolute;
left: 0;
top: 0;
width: 8px;
height: 100%;
border-radius: 2px 0 0 2px;
pointer-events: none;
z-index: 0;
}
</style>

<script>
(function() {
const colors = ['#d52b1e', '#0039a6']; // красный, синий

function addShadows() {
const containers = document.querySelectorAll('.informer-box'); // все информеры
containers.forEach(container => {
const comments = container.querySelectorAll('.bb_box-link');
comments.forEach((el, index) => {
if (!el.querySelector('.left-shadow')) {
const shadow = document.createElement('span');
shadow.className = 'left-shadow';
shadow.style.backgroundColor = colors[index % colors.length];
el.prepend(shadow);
}
});
});
}

// Проверяем каждые 500мс, пока информер не подгрузится
const interval = setInterval(() => {
const hasComments = document.querySelector('.informer-box .bb_box-link');
if (hasComments) {
clearInterval(interval);
addShadows();

// Следим за динамическими подгрузками новых сообщений
const observer = new MutationObserver(addShadows);
document.querySelectorAll('.informer-box').forEach(box => {
observer.observe(box, { childList: true, subtree: true });
});
}
}, 500);
})();
</script>

<style type="text/css">

/* Новая тень */
box-shadow: 5px 5px 5px rgba(0,0,0,0.3);

margin: 6px 0; /* расстояние между сообщениями */
border-radius: 2px;

}

/* Стили информера только внутри контейнера .informer-box */
.informer-box .bb_box1,
.informer-box .bb_box {
position: relative;
border: 1px solid #DFDFDF;
border-left: 0px;
padding: 2px 50px;
background: #F1F1F1 url(/template/amg/images/highlight_strong.png) repeat-x;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
outline: none;
box-sizing: border-box;

}

.informer-box .positiv {
display: inline-block;
height: 18px;
line-height: 18px;
padding: 0 4px;
font-size: 8px;
font-weight: normal;
text-transform: uppercase;
color: #fff;
text-shadow: rgb(0 0 0 / 20%) 0px -1px 0px;
border-radius: 2px;
background: #0d2e4d;
}

.informer-box .infsimg {
border-radius: 50px;
margin-top: 0px;
margin-right: 6px;
box-shadow: 0px 0px 0px 0px #000;
}

/* Стили .new1 внутри информера */
.informer-box .new1 {
border: 1px solid #853b97;
font-size: 12px;
margin: 15px;
padding: 15px;
position: relative;
box-shadow: 5px 5px 0 0 #853b97;
color: #3d4152;
padding-top: 10px;
display: block;
text-align: left;
border-bottom:5px solid #cfcfcf;
background:#fff;
cursor:pointer;
border-radius: 2px;
}

/* Стили .new01 внутри информера */
.informer-box .new01 {
text-align:left;
padding:5px;
border-bottom:1px solid #cfcfcf;
margin:0px;
background:#e0e0e0;
font-size:8pt;
}

.informer-box .bb_box1:hover {
transform: translateY(-3px); /* блок немного поднимается */
box-shadow: 8px 8px 10px rgba(0,0,0,0.4); /* тень становится сильнее */
transition: all 0.3s ease; /* плавный переход */
}

.informer-box .infsimg:hover {
box-shadow: 0 0 10px 2px rgba(133, 59, 151, 0.5);
transition: all 0.3s ease;
}

.informer-box .bb_box1 {
background: linear-gradient(145deg, #F1F1F1, #e8e8e8);
}

.informer-box .bb_box1 span {
transition: color 0.3s ease;
}

/* Подсветка при наведении на блок */
.informer-box .bb_box1:hover {
transform: translateY(-3px);
box-shadow: 8px 8px 10px rgba(133, 59, 151, 0.5); /* rgba из #853b97 */
transition: all 0.3s ease;
}

/* Подсветка текста при наведении */
.informer-box .bb_box1:hover span {
color: #853b97;
}

/* Подсветка аватара при наведении */
.informer-box .infsimg:hover {
box-shadow: 0 0 10px 2px rgba(133, 59, 151, 0.5);
transition: all 0.3s ease;
}

.informer-box .bb_box-link {
display: block; /* важно для размеров */
padding: 8px 12px; /* сохраняем внутренние отступы */
background: #F1F1F1 url(/template/amg/images/highlight_strong.png) repeat-x;
border: 1px solid #DFDFDF;
border-radius: 2px;
text-decoration: none; /* убираем подчеркивание */
color: inherit; /* сохраняем цвета текста */
box-shadow: 5px 5px 5px rgba(0,0,0,0.3); /* тень */
margin: 6px 0; /* расстояние между сообщениями */
transition: all 0.3s ease;
}

.informer-box .bb_box-link:hover {
transform: translateY(-3px);
box-shadow: 8px 8px 10px rgba(133, 59, 151, 0.5); /* hover тень */
}

</style>

<div class="informer-box">
<a href="$PROFILE_URL$" class="bb_box1 bb_box-link">
<img class="infsimg" src="$AVATAR_URL$" alt="" width="45" height="40">
<span style="font-size:9pt;font-weight: bold;">$USERNAME$</span><br>
<img src="/template/forum/pf_ie/topic_mod.gif" border="0" style="vertical-align:middle;">
<span style="font-size:7pt;color:#000;text-transform: uppercase;letter-spacing: 1px;">
Сообщений на форуме: <span class="positiv">$FORUM_POSTS$</span>
</span>
</a>
</div>

Настройка информера пользователей:

Раздел: Пользователи

Способ сортировки: По количеству сообщений на форуме

Количество отображаемых материалов: 5

Количество колонок: 1

Скрипт

Код

<script>
(function() {
// Русский флаг сверху вниз: светло-серый → синий → красный
const colors = ['#d9d9d9', '#0039a6', '#d52b1e'];
let colorIndex = 0;

function addShadows() {
const comments = document.querySelectorAll('.informer-box .bb_box-link');
comments.forEach(el => {
if (!el.querySelector('.left-shadow')) {
const shadow = document.createElement('span');
shadow.className = 'left-shadow';
shadow.style.backgroundColor = colors[colorIndex % colors.length];
el.prepend(shadow);
colorIndex++;
}
});
}

// Проверяем каждые 500мс пока информер не загрузится
const interval = setInterval(() => {
const hasComments = document.querySelector('.informer-box .bb_box-link');
if (hasComments) {
clearInterval(interval);
addShadows();

// Следим за динамической подгрузкой новых сообщений
const observer = new MutationObserver(addShadows);
document.querySelectorAll('.informer-box').forEach(box => {
observer.observe(box, { childList: true, subtree: true });
});
}
}, 500);
})();
</script>

Повторяю

Скрипт необходимо вставлять в конце шаблона главной страницы форума, перед закрывающим тегом . Это важно, чтобы все эффекты работали корректно. Не стоит помещать скрипт внутрь информера, так как движок форума может его блокировать, и браузер просто не сможет его обработать.

Мурчанн

1