есть хук "топ авторов за месяц" выводит информацию в блок вот так:

 

так же есть хук "Активные авторы сегодня" который выводит информацию так:

 

и есть только внешний вид изменённого хука "топ авторов за месяц" который выглядит так:

 

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

 

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

Установить размер блока, так чтобы в один ряд их поместилось два + обтекание по левому краю float: left.

Установить размер блока, так чтобы в один ряд их поместилось два + обтекание по левому краю float: left.

Сколько будет стоить реализовать это? так как из написанного не совсем понимаю, что и где надо сделать). Спасибо

помогите пожалуйста, а то пустое место в этом блоке создаёт не приятное ощущение )

 

Вот эти 2 хука надо привести к нормальному виду, что бы пользователи были в 2 столбца а не в один.

hook.xml- Top Posters

topMonthlyPosters.xml- top Monthly Posters

Установил оба и оба одинаковы (в 1 колонку)

 

Задаем для нужного li свойство float:left

 

Ну а далее, как и сказал siv1987 выше, задать ширину, отступы...

 

Раз у вас второй блок изменен как надо - может, просто сделать по примеру и скорее всего будет достаточно в шаблоне первого хука ( Список форумов --> topMonthlyPosters ) указать нужный класс (от второго хука), чтобы применить к нему те же css свойства. Можете в лс ссылку на форум, где стоят эти хуки - посмотрим, может действительно все намного проще.

 

Или же сами:

шаблон:

Список форумов --> topMonthlyPosters

минимально нужные css для элементов li в этом шаблоне:

float: left;

width: ...px;

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

Такой вариант:

 

1) Редактируем шаблоны хуков для вашего стиля (приписываем свой класс дивам)

 

"Список форумов --> topMonthlyPosters"

 

самую первую строку

<div class='ipsSideBlock clearfix'>

заменяем на:

<div class='ipsSideBlock clearfix twocolumn'>

 

 

"Список форумов --> hookTopPosters"

 

вторую строку

<div class='ipsSideBlock clearfix'>

заменяем на:

<div class='ipsSideBlock clearfix twocolumn'>

 

 

2) В ipb_styles.css для данного стиля в самом низу добавляем:

 

/* two columns view for hooks */

.twocolumn > div > ul > li {
float: left;
width:119px;
overflow: hidden;
}
.twocolumn > div > ul > li:nth-child(odd) {
margin-right:10px;
}
.twocolumn > div > ul > li > .list_content {
word-wrap: normal;
}
.twocolumn > div > ul > li > .list_content > .ipsType_smaller  > a {
font-size: 13px !important;
}

 

 

3) Сокращаем и приводим надписи к одному виду:

 

В хуках используются надписи "ххх сообщений" и "Написал сообщений: ххх" - надо бы свести к чему-либо одному и желательно сократить. Я бы предложил заменить на "ххх постов" или "ххх сообщ."

 

Для этого

 

в шаблоне "Список форумов --> topMonthlyPosters" строку

{parse format_number="$r['posts']"} {$this->lang->words['posts']}

меняем на

{parse format_number="$r['posts']"} сообщ.

 

в шаблоне "Список форумов --> hookTopPosters" строку

<div class='list_content'><p class='desc ipsType_smaller'>{$this->lang->words['tp_p']}: {parse format_number="$tp['postis']"}</p></div>

меняем на

<div class='list_content'><p class='desc ipsType_smaller'>{parse format_number="$tp['postis']"} сообщ.</p></div>

 

ПС: почему не через редактирование языка? Проще да и фраза может использоваться еще где-то.

 

 

4) Изменяем количество выводимых "авторов"

 

по умолчанию выводиться 5, а нам для красоты надо четное число (так как колонок у нас уже две)

 

Идем

"Система --> Управление хуками --> Изменить настройки: Top Posters" в поле "Пользователей в блоке:" ставим 6 (или 8 или 10 ... четное число)

"Система --> Управление хуками --> Изменить настройки: (SOS34) Monthly Top Posters" в поле "Number of Users" ставим 6 (или 8 или 10 ... четное число)

 

длинные имена будут обрезаться

 

---

ППС: на изящность решения и кода не претендую

Изменено 10 марта 201511 г пользователем Viktar83

Спасибо! Это то что надо, буду мучать завтра, сейчас дорисовываю иконки к форумам, мозги уже не соображают )

Сделал но почему то получилось большое расстояние между пользователями, как его сократить?

Сделал но почему то получилось большое расстояние между пользователями, как его сократить?

Потому что в ipb_styles.css

.ipsSideBlock ul li {
margin: 15px 0 15px 0;
}

Потому что в ipb_styles.css

.ipsSideBlock ul li {
margin: 15px 0 15px 0;
}

что надо сделать скажите пожалуйста

 

 

вроде разобрался

 

исправил на margin: 5px 0 5px 0

вроде нормик стало, только длинные ники сдвигают количество сообщений вних ( , если бы можно было бы сделать как сто бы ник просто обрезался

Изменено 11 марта 201511 г пользователем wick

Потому что в ipb_styles.css

.ipsSideBlock ul li {
margin: 15px 0 15px 0;
}

Да. тогда можно дописать например:

 

.twocolumn > div > ul > li {

float: left;

width:119px;

overflow: hidden;

margin: 5px 0;

}

 

---

ПС

Из-за того, что ко всем элементам li применено свойство обтекания, родительский ul "схлопнулся" и соответственно пропали границы (border) у блока,

поэтому можно в тех обоих шаблонах строку

<ul class="ipsList_withminiphoto">

заменить на

<ul class="ipsList_withminiphoto clearfix">

Длинный ник обрежется, а вот тот, который из нескольких слов состоит...

Как вариант чуть уменьшить размер шрифта, как на втором хуке

Изменено 11 марта 201511 г пользователем Viktar83

<ul class="ipsList_withminiphoto">

заменить на

<ul class="ipsList_withminiphoto clearfix">

на эти изменения ни как не реагирует

 

может можно сделать как ограничение на количество выводимых символов?

Изменено 11 марта 201511 г пользователем wick

может можно сделать как ограничение на количество выводимых символов?

http://htmlbook.ru/css/text-overflow

Там же можете часть кода и примера взять

Сделал так, но всё равно не обрезает имя пользователя ...

 

/* two columns view for hooks */

.twocolumn > div > ul > li {
float: left;
width:119px;
overflow: ellipsis;
margin: 5px 0;
}
.twocolumn > div > ul > li:nth-child(odd) {
margin-right:10px;
}
.twocolumn > div > ul > li > .list_content {
word-wrap: normal;
}
.twocolumn > div > ul > li > .list_content > .ipsType_smaller  > a {
font-size: 13px !important;
}