Jump to content

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

Featured Replies

Posted
comment_205169

Привет, сделал блок для вывода пользователей в виджете. 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}}

01_06.24_10_36_29.thumb.png.54cc90a4cfcc2c7026d755315e878682.png

 

comment_205171
42 минуты назад, VladD сказал:
{template="userPhoto" group="global" app="core" params="$member, 'large'"}

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

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

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

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

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

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

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

01_06.24_11_29_52.thumb.png.0e664394b02f42d8be80fe73f7ea70da.png

comment_205173

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

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

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

Edited by Zero108

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

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

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

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

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

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

01_06.24_11_37_19.png.4ee01a83257561fe05d3a98b786b41cc.png01_06.24_11_36_52.thumb.png.d6c1c88f3dbac4f9869701223383324f.png

comment_205175
59 минут назад, VladD сказал:
<li class='ipsPhotoPanel noHover ipsType_center'>

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

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

59 минут назад, VladD сказал:
<div class='ipsWidget_inner noHover ipsType_center'>

Edited by AHristich

  • Author
comment_205176

не помогло

<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}}

 

comment_205179
<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>

 

  • Author
comment_205180
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>

 

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

  • Author
comment_205184

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

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

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.


Guest
Ответить в этой теме...

Последние посетители 0

  • No registered users viewing this page.