How to add this section to the default template

[avangcom]

hi

How to add this section to the default template

Example the site : ipb-board.ru

[avangcom]

@by_ix

[avangcom]

@SlawkA

@by_ix

@Dusty

@Desti

[Dusty]

Могу пример дать а вот CSS наверно сам сделаешь )

Открываем  > forumRow > 

Далее в поиске водим

<div class="ipsDataItem_stats ipsDataItem_statsLarge">

Меняешь это

    <dl>
 {{$count = \IPS\forums\Topic::contentCount( $forum, TRUE );}}
 <dt class="ipsDataItem_stats_number">{number="$count" format="short"}</dt>
<dd class="ipsDataItem_stats_type ipsType_light">{lang="posts_no_number" pluralize="$count" format="short"}</dd>
</dl>

На это 

    <dl>
{{$count = \IPS\forums\Topic::contentCount( $forum, TRUE );}}
<div class="tag"><span class="tag-label">сообщения</span> <span class="count"><span class="count-value">{number="$count"}</span></span></div>              
 <div class="tag"><span class="tag-label">темы</span><span class="count"><span class="count-value">{number="$forum->topics"}</span></span></div>
</dl>

В css добавишь это а потом поменяешь как тебе надо 

Спойлер

.tag{
  overflow:hidden;
  margin:0 10px 5px 0;
}
.tag-label {
    float: left;
    background: linear-gradient(#f25d00d1, #f25d00d1);
    border: 1px solid #a34a2b;
    border-bottom-color: #a34a2b;
    border-right-color: #a34a2b;
    border-radius: 3px 0 0 3px;
    padding: 0 9px 0 7px;
    font: bold 12px/22px 'Helvetica Neue','Arial',sans-serif;
    color: #ffffff;
    position: relative;
}
.tag-label:before{
  content:'';
  width:6px;
  height:6px;
  border-left:1px solid #A43E00;
  border-radius:50%;
  background:#F25D00;
  position:absolute;
  right:-4px;
  top:8px;
  z-index:1;
}
.tag .count{
  float:left;
  margin-top:1px;
  height:23px;
  border-top:1px solid #DC5400;
  border-bottom:1px solid #DC5400;
  background:linear-gradient(#F46E00, #EC5400);
  overflow:hidden;
  box-shadow:inset 0 1px 0 #FD9D61;
  position:relative;
  max-width:3px;
  transition:max-width 0.3s;
}
.tag:hover .count{
  max-width:50px;
}
.tag .count:before{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:0;
  height:100%;
  border-right:1px solid #DC5400;
}
.tag .count:after{
  content:'';
  position:absolute;
  top:0;
  right:-3px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#333;
  box-shadow:0 6px 0 #333, 0 11px 0 #333, 0 16px 0 #333;
}
.tag .count-value{
  margin:1px 4px 0 0;
  padding:0 3px 0 5px;
  border-top:1px dashed #D74A02;
  border-bottom:1px dashed #F57A36;
  font:bold 12px/18px 'Helvetica Neue','Arial',sans-serif;
  color:#fff;
  height:17px;
  position:relative;
  float:right;
}
.tag .count-value:before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  height:0;
  width:100%;
  border-top:1px dashed #F87E31;
}
.tag .count-value:after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  height:0;
  width:100%;
  border-bottom:1px dashed #D64901;
}

 

[by_ix]

В 11.02.2023 в 11:59, avangcom сказал:

How to add this section to the default template

учитесь пользоваться кодом элемента и базовыми навыками css.
вы не первый день здесь, пора бы научиться.

[avangcom]

hi

Thank you. Yes, you are right, but learning at my age takes some time, and I would appreciate your guidance on this matter

@by_ix

I entered this in css, it didn't change

@Dusty

ForumRow not found

[Dusty]

10 минут назад, avangcom сказал:

привет

Спасибо. Да, вы правы, но обучение в моем возрасте требует времени, и я был бы признателен за ваши советы по этому вопросу.

@by_ix

Я ввел это в css, ничего не изменилось

@Дасти

ForumRow не найден

Шаблон --> forums --> index --> forumrow

[avangcom]

This was the shape

[Dusty]

47 минут назад, avangcom сказал:

Это была форма

Я дал вам пример главное у вас показывает сообщения  и темы (наверно нужно наводиться на них)  а изменение в css попробуйте сделать сами.

[turk]

avangcom put here your forum link and i will solve it

[avangcom]

I want it to be exactly like this site

www.ipb-board.ru

[turk]

I request your forum link not www. ipb-board.ru

[Dusty]

@ avang.com

Шаблон --> forums --> index --> forumrow

{{$count = \IPS\forums\Topic::contentCount( $forum, TRUE );}}    
<div class="ciko_sap ciko_size_large ciko_type_ips4_4">
<span class="ciko_count" data-ipstooltip="" _title="">{number="$count"}</span>
<div class="ciko_btn ponts_ciko" data-ipstooltip="" _title="Сообщений">Сообщения</div>
</div>
<div class="ciko_sap ciko_size_large ciko_type_ips4"> 
<span class="ciko_count" data-ipstooltip="" _title="">{number="$forum->topics"}</span>
<div class="ciko_btn" data-ipstooltip="" title="Темы">Темы</div>
</div>
</div>

Спойлер

.ciko_sap {
    display: inline-block;
    margin-right: 20px;
}

.ciko_size_large > .ciko_count {
    display: block;
    float: none;
    font-size: 18px;
    margin-right: 0;
    margin-bottom: 12px;
    padding: 10px 0;
}
.ciko_count {
    background-color: #fff;
    border: solid 1px #a5b1bd;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
    color: #424a4d;
    float: left;
    font-weight: bold;
    margin-right: 10px;
    padding: 4px 10px;
    position: relative;
    text-align: center;
}

.ciko_size_large > .ciko_count:before {
    border-color: #a5b1bd transparent transparent transparent;
    bottom: -14px;
    margin-left: -7px;
}
.ciko_size_large > .ciko_count:before, .ciko_size_large > .ciko_count:after {
    content: '';
    display: block;
    height: 0;
    left: 50%;
    position: absolute;
    top: auto;
    width: 0;
}
.ciko_count:before {
    border: solid 7px transparent;
    border-color: transparent transparent transparent #a5b1bd;
}
.ciko_count:before, .ciko_count:after {
    content: '';
    display: block;
    height: 0;
    top: 50%;
    position: absolute;
    right: -14px;
    width: 0;
    margin-top: -6px;
}

.ciko_size_large > .ciko_count:after {
    margin-left: -6px;
    bottom: -12px;
    border-color: #fff transparent transparent transparent;
}
.ciko_size_large > .ciko_count:before, .ciko_size_large > .ciko_count:after {
    content: '';
    display: block;
    height: 0;
    left: 50%;
    position: absolute;
    top: auto;
    width: 0;
}
.ciko_count:after {
    border: solid 6px transparent;
    border-color: transparent transparent transparent #fff;
    right: -12px;
    margin-top: -5px;
}
.ciko_count:before, .ciko_count:after {
    content: '';
    display: block;
    height: 0;
    top: 50%;
    position: absolute;
    right: -14px;
    width: 0;
    margin-top: -6px;
}

.ciko_type_ips4_4 > .ciko_btn {
    background-color: #4099FF;
}
.ciko_btn {
    border: solid 1px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgb(255 255 255 / 30%), 0 1px 3px rgb(0 0 0 / 15%);
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    padding: 5px 10px;
    text-align: center;
    text-shadow: 0 1px 1px rgb(0 0 0 / 40%);
}

.ciko_type_ips4 > .ciko_btn {
    background-color: #3B5999;
}

 

Обновил тебе код для тем и сообщений этот лучше будет

Спойлер

 {{$countall = $countsub + $forum->topics;}}
{{$count = \IPS\forums\Topic::contentCount( $forum, TRUE );}} 
<div class="ciko_sap ciko_size_large ciko_type_ips4_4">
<span class="ciko_count" data-ipstooltip="" _title="">{number="$count" format="short"}</span>
<div class="ciko_btn ponts_ciko" data-ipstooltip="" _title="Сообщений">Сообщений</div>
</div>
<div class="ciko_sap ciko_size_large ciko_type_ips4"> 
<span class="ciko_count" data-ipstooltip="" _title="">{number="$countall" format="short"}</span>
<div class="ciko_btn" data-ipstooltip="" title="Темы">Темы</div>
</div>
</div>

 

Edited February 13 by Dusty