Переделка статистики форума

[Graphiti22]

Хочется переделать статистико форума, изменив её в более приятную, при этом добавив некоторые пункты, за исходную было принято решение взять статистику, которая ранее была на форумах ipb 3.1.х.

Изначальный вид статистики у меня на форуме:

Сделав все по инструкции, которая описано в данной теме, у меня получилась статистика вот такого вида:

 

Что нужно переделывать в коде, что бы она отображалась так как положено?

[gnom123]

Хочется переделать статистико форума, изменив её в более приятную, при этом добавив некоторые пункты, за исходную было принято решение взять статистику, которая ранее была на форумах ipb 3.1.х.

Изначальный вид статистики у меня на форуме:

До.png

Сделав все по инструкции, которая описано в данной теме, у меня получилась статистика вот такого вида:

После.png

 

Что нужно переделывать в коде, что бы она отображалась так как положено?

то есть ты хочешь вот такую статистику?

[WOLF]

1. У статьи есть тема поддержки трудно было там написать?

2. Эта статья подходит в основном под те стили которые были сделаны на базе дефолта.

3. Там много классов и кодов надо ворошить. А писать статью под каждый стиль не вижу разумным

то есть ты хочешь вот такую статистику?

Screenshot_3.png

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

[Graphiti22]

gnom123, примерно да, но с некоторыми своими доработками.

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

[WOLF]

gnom123, примерно да, но с некоторыми своими доработками.

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

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

[Graphiti22]

WOLF, делал на тестовом шаблоне, который практически один в один с моим основным. Немного получилось, а именно, сейчас вот такой вид:

Ну вот сделать его нормально до конца не могу, не нахожу те строчки, которые нужно подправить, что бы стал вот такой вид:

При этом добавив под статистикой дополнительный как бы блок "Связь с администрацией" на 2 - 3 строки

 

В board.... я заменил нужные мне строки вот таким макаром:

<br>

<h3 class='maintitle'>Статистика

<span class='right desc'>

<ul id='stat_links' class='ipsList_inline right ipsType_small'>

<if test="statsLinks:|:1==1"> <!-- Hook point -->

<li><a href="{parse url="app=forums&amp;module=extras&amp;section=stats&amp;do=leaders" base="public"}" title="{$this->lang->words['sm_forum_leaders_title']}">{$this->lang->words['sm_forum_leaders']}</a></li>

<li><a href="{parse url="app=forums&amp;module=extras&amp;section=stats" base="public"}" title="{$this->lang->words['sm_all_posters_title']}">{$this->lang->words['sm_today_posters']}</a></li>

<li><a href="{parse url="app=members&amp;module=list&amp;max_results=20&amp;sort_key=posts&amp;sort_order=desc&amp;filter=ALL" base="public" seotitle="false"}" title="{$this->lang->words['sm_overall_posters_title']}">{$this->lang->words['sm_overall_posters']}</a></li>

<if test="reputationEnabled:|:$this->settings['reputation_enabled']">

<li>

<a href="{parse url="app=members&amp;module=reputation&amp;section=most" base="public" template="most_liked" seotitle="most_liked"}">

<if test="reputationType:|:$this->settings['reputation_point_types'] == 'like'">

{$this->lang->words['most_rep_likes']}

<else />

{$this->lang->words['most_rep_rep']}

</if>

</a>

</li>

</if>

</if>

</ul></h3>

 

 

<div class='ipsBox table_wrap'>

<div class='ipsBox_container'>

<div id='stats'>

<h4 class='statistics_head'>{$this->lang->words['board_stats']}</h4>

<dl>

<dt>{$this->lang->words['total_posts']}</dt>

<dd>{$stats['info']['total_posts']}</dd>

<dt>{$this->lang->words['total_members']}</dt>

<dd>{$stats['info']['mem_count']}</dd>

<dt>{$this->lang->words['newest_member']}</dt>

<dd><a href='{$stats['info']['last_mem_link']}' title='{$this->lang->words['view_profile']}'>{$stats['info']['last_mem_name']}</a>{parse template="user_popup" group="global" params="$stats['info']['last_mem_id'],$stats['info']['last_mem_seo']"} </dd>

<dt>{$this->lang->words['online_at_once']}</dt>

<dd>{$stats['info']['most_online']}<br /><span class='extra'>{$stats['info']['most_time']}</span></dd>

</dl>

</div>

<div id='board_statistics' class='statistics general_box'>

<if test="showTotals:|:$this->settings['show_totals']">

 

</if>

<if test="showActive:|:$this->settings['show_active']">

<h4 class='statistics_head'>{parse expression="sprintf( $this->lang->words['online_right_now'], $stats['TOTAL'] )"} {$this->lang->words['active_users']}</h4>

<p class='statistics_brief desc'>

{parse expression="sprintf( $this->lang->words['active_users_detail'], $stats['MEMBERS'], $stats['GUESTS'], $stats['ANON'] )"}

<a href='{parse url="app=members&module=online&sort_order=desc" base="public"}'>({$this->lang->words['online_link']})</a>

</p>

<if test="activeNames:|:count($stats['NAMES'])">

<br />

<p>

<span class='name'>{parse expression="implode( ",</span> <span class='name'>", $stats['NAMES'] )"}</span>

</p>

</if>

</if>

</div>

</div>

</div>

 

А в ipb_style добавил после всего такой код:

#stats {

border-left: 1px

solid #e4ebf2;

padding-left: 20px;

width: 33%;

float: right;

}

 

#stats

dl { margin-left: 10px;

}

 

#stats dt,

#stats dd {

border-top: 1px

solid #dedede;

font-size: 0.85em;

padding: 6px 2px;

float: left;

width: 45%;

}

 

#stats dt {

font-weight: bold;

clear: both;

}

#stats .extra {

color: #a2a2a2;

font-size: 0.9em;

}

 

.member_title {

    background: #e9e9e9;

    height: 17px;

    display: inline-block;

    font-size: 14px;

    padding: 1px;

    width: 152px;

    text-align: center;

    font-size: 0.8em;

    color: #606060;

}

 

.user_block {

       color:#474747;

}

 

.wa-block {

       border-radius: 3px;

       -moz-border-radius: 3px;

       -webkit-border-radius: 3px;

       height: 21px;

    padding: 0 3px;

       width: 137px;

       text-align: left;

       background: #e9e9e9;

       margin: 4px auto;

}

 

.u-mini {

       float: right;

}

 

.psevdo {

       height: 3px;

}

 

#stats {

border-left: 1px solid #e4ebf2;

padding-left: 20px;

width: 33%;

float: right;

}

#stats dl {

margin-left: 10px;

}

 

#stats dt,

#stats dd {

border-top: 1px solid #dedede;

font-size: 0.85em;

padding: 6px 2px;

float: left;

width: 45%;

}

#stats dt {

font-weight: bold;

clear: both;

}

 

#stats .extra {

color: #a2a2a2;

font-size: 0.9em;

}

[Neya]

Все просто,через css и html <div классы сделать можно )) Я бы сделал,но мне нужен тест. <div class='клаас'>Связь с администрацией</div> ну и в ксс задать позицианирование.

 

Это все можно делать все легко.

Изменено 3 января, 2015 пользователем Neya

[Graphiti22]

Neya, связь с администрацией будет включать в себя 2 или 3 строчки, в которых будет просто вписано значение, к примеру ник в скайпе и почта по которой можно связаться.  

[Neya]

Neya, связь с администрацией будет включать в себя 2 или 3 строчки, в которых будет просто вписано значение, к примеру ник в скайпе и почта по которой можно связаться.  

Через каждый div можно вывести,а простой текст через  <p> выводиться,а через div настроить селекторы,т.е background фон на каком будет слово, padding размеры backgrounda, итд,да нужно знать css и html как сказал wolf. 

[Graphiti22]

Neya, я то этого всего особо не знаю, но методом тыка получается делать. Для меня сейчас главная задача это выровнять весь этот текст и все строки, а вот пункт Связь с администрацией, я примерно уже знаю через какой код буду прописывать, если не ошибаюсь, тег tbody или table. Я ранее с ним сталкивался на другом сайте.

[Neya]

Graphiti22,Методом тыка не надо,можно просто криво сделать,а так честно в свободное время нужно подучивать css3,html5. Вывести я подсказал как через <div> и тег <p>.Да и можно много через чего вывести. 

[Graphiti22]

Neya, ну вот статистику я и вывел через div, ну как расположить под ней второй блок, в данном случае "СсА" не знаю, у меня он почему то становится в центре, и при этом под себя крепит информацию по пользователям. Через тег <p> пытался выровнять "Статистика форума, ну так и без изменений". 

[Neya]

<p class='right'>Текст</p> и в ксс создать .right { margin-left: 1px;} т.е текст пойдет слева,а то что ты пишешь просто <p> это ничего не дает  Дай в лс адм сделаю и выложу сюда.

Изменено 3 января, 2015 пользователем Neya

[Graphiti22]

Neya,вот получилось уже по другому выставить, уже лучше, но все равно не там где нужно.

 

[WOLF]

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

[Neya]

Graphiti22,Таким методом ты будешь делать долго. 

[Graphiti22]

.right { margin-left: 1px;}

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

p class='right'>Текст</p>  сейчас проверю, как будет через него. 

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

размер будет таким как боковые блоки, примерно 270 - 280px шириной, просто для начала хочу его нормально выровнять, что бы он стал нормально.

[Graphiti22]

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

[WOLF]

не вижу стиля у вас на форуме

[Graphiti22]

WOLF, открыл для гостей, стиль Deflection 

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

[WOLF]

#stats {
border-left: 1px solid #e4ebf2;
padding-left: 20px;
width: 33%;
float: right;
}

ширина блока:

width: 33%;

и судя по коду, у вас там два одинаковых класса прописаны 

[Graphiti22]

WOLF, похоже что ручки у меня и вправду прямые, пришлось правда потратить несколько дней, ну результат меня радует.

Осталось лишь только добавить одну полоску, ну здесь прошу Вашей подсказки, так как мозг уже не думает, где именно и какой код нужно вставить. В данный момент вид вот такой:

Нужно добавить полоску, что бы вид был как на скрине ниже:

 

Код ipb_style

 

#stats {

padding-left: 20px;

width: 22%;

float: right;

}

 

#stats dt,

#stats dd {

font-size: 1.00em;

padding: 6px 2px;

float: left;

width: 45%;

}

 

#stats dl {

margin-left: 10px;

}

 

#stats dt {

font-weight: bold;

clear: both;

}

 

#stats .extra {

color: #a2a2a2;

font-size: 0.9em;

}

 

.member_title {

    background: #e9e9e9;

    height: 17px;

    display: inline-block;

    font-size: 14px;

    padding: 1px;

    width: 152px;

    text-align: center;

    font-size: 0.8em;

    color: #606060;

}

 

.user_block {

       color:#474747;

}

 

.wa-block {

       border-radius: 3px;

       -moz-border-radius: 3px;

       -webkit-border-radius: 3px;

       height: 21px;

    padding: 0 3px;

       width: 137px;

       text-align: left;

       background: #e9e9e9;

       margin: 4px auto;

}

 

.u-mini {

       float: right;

}

 

.psevdo {

       height: 3px;

}

 

[WOLF]

В том коде который я скидывал выше, эта полоска была, и вот она:

border-left: 1px solid #e4ebf2;

P.S. все, я спать.

[Graphiti22]

Заметил, что у меня боковая полоска не соединяется с нижней чертой, и когда текста много или добавляется новый хук в статистику, расстояние между боковой полоской и нижней чертой увеличивается. Можно ли их как то соединить между собой?

[WOLF]

#stats {
border-left: 1px solid #e4ebf2;
padding-left: 5px;
width: 26%;
float: right;
margin-bottom: -8px;
}

пробуйте