Помогите с вёрсткой

[VladD]

Привет, сделал блок для вывода пользователей в виджете. https://numerolog.club/s-blokom-konsultantov

Использовал такой код (обрезал существующий). Хочу выровнять по центру и сделать отступы между автарками.

Код блока

<style>
  .noHover{
    pointer-events: none;
        text-align: center;
}
  .element:hover {
  /* отключаем измения, возвращаем исходные стили */
  background: original-background;
  color: original-color;
        text-align: center;
}
  .ipsUserPhoto .PhotoPanel {
    position: relative;
    margin: 2px;
}
</style>

{{if $display === 'csv'}}
{{else}}
<div class='ipsWidget_inner noHover ipsType_center'>
	{{if \count( $members ) }}
		<ul class='ipsList_reset ipsPos_center'>
			{{foreach $members as $member}}
				<li class='ipsPhotoPanel noHover ipsType_center'>
					{template="userPhoto" group="global" app="core" params="$member, 'large'"}
				</li>
			{{endforeach}}
		</ul>

	{{else}}
		
	{{endif}}
</div>
{{endif}}

 

[VladD]

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

[SlawkA]

42 минуты назад, VladD сказал:

{template="userPhoto" group="global" app="core" params="$member, 'large'"}

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

{template="userPhoto" group="global" app="core"

[VladD]

2 минуты назад, SlawkA сказал:

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

{template="userPhoto" group="global" app="core"

не совсем понял))

создаю блок с пользователями

[Zero108]

Попробуйте в custom.css или в стиль виджета (перед </style>) добавить:
 

.ipsPhotoPanel > .ipsUserPhoto {
    float: left;
    margin: 3px;
    line-height: 0;
}

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

Изменено 1 июня пользователем Zero108

[VladD]

5 минут назад, Zero108 сказал:

Попробуйте в custom.css или в стиль виджета (перед </style>) добавить:
 

.ipsPhotoPanel > .ipsUserPhoto {
    float: left;
    margin: 3px;
    line-height: 0;
}

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

с отступом спасибо.

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

[AHristich]

59 минут назад, VladD сказал:

<li class='ipsPhotoPanel noHover ipsType_center'>

Попробуйте убрать ipsType_center здесь, т.к вам надо выровнять непосредственно сам список ul ,то выравнивание надо применить для него ,а не для li.

А вот здесь заменить на ipsPos_center

59 минут назад, VladD сказал:

<div class='ipsWidget_inner noHover ipsType_center'>

Изменено 1 июня пользователем AHristich

[VladD]

не помогло

<style>
  .noHover{
    pointer-events: none;
        text-align: center;
}
  .element:hover {
  /* отключаем измения, возвращаем исходные стили */
  background: original-background;
  color: original-color;
        text-align: center;
}
  .ipsUserPhoto .PhotoPanel {
    position: relative;
    margin: 2px;
}
</style>

{{if $display === 'csv'}}
{{else}}
<div class='ipsWidget_inner noHover ipsPos_center'>
	{{if \count( $members ) }}
		<ul class='ipsList_reset ipsPos_center'>
			{{foreach $members as $member}}
				<li class='ipsPhotoPanel noHover'>
					{template="userPhoto" group="global" app="core" params="$member, 'large'"}
				</li>
			{{endforeach}}
		</ul>

	{{else}}
		
	{{endif}}
</div>
{{endif}}

 

[WaNted]

<ul class='ipsList_reset ipsFlex ipsFlex-jc:center ipsFlex-fw:wrap'>
	{{foreach $members as $member}}
		<li class='ipsPhotoPanel noHover'>
			{template="userPhoto" group="global" app="core" params="$member, 'large'"}
		</li>
	{{endforeach}}
</ul>

 

[VladD]

4 минуты назад, WaNted сказал:

<ul class='ipsList_reset ipsFlex ipsFlex-jc:center ipsFlex-fw:wrap'>
	{{foreach $members as $member}}
		<li class='ipsPhotoPanel noHover'>
			{template="userPhoto" group="global" app="core" params="$member, 'large'"}
		</li>
	{{endforeach}}
</ul>

 

супер, спасибо, работает))))

[WaNted]

Добавить отступы можно с помощью класса ipsGap:2 после ipsFlex-fw:wrap

Изменено 1 июня пользователем WaNted

[VladD]

WaNted Спасибо огромное за помощь. Ещё вопрос: как сделать чтобы ссылки в виджетах открывались в новом окне.

Когда делаешь блок (с любым кодом) в кнопке выставляешь например target="_blank" и всё норм, но когда вставляешь виджетом этот блок на другой сайт, то все ссылки открываются в этом же окне.

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