Jump to content

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

Featured Replies

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

 

Link to comment
https://ipbmafia.ru/topic/27216-pomogite-s-vyorstkoj/
Share on other sites

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

Link to comment
https://ipbmafia.ru/topic/27216-pomogite-s-vyorstkoj/?&do=findComment&comment=205170
Share on other sites
42 минуты назад, VladD сказал:
{template="userPhoto" group="global" app="core" params="$member, 'large'"}

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

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

Link to comment
https://ipbmafia.ru/topic/27216-pomogite-s-vyorstkoj/?&do=findComment&comment=205171
Share on other sites
2 минуты назад, SlawkA сказал:

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

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

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

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

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

Link to comment
https://ipbmafia.ru/topic/27216-pomogite-s-vyorstkoj/?&do=findComment&comment=205172
Share on other sites

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

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

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

Edited by Zero108

Link to comment
https://ipbmafia.ru/topic/27216-pomogite-s-vyorstkoj/?&do=findComment&comment=205173
Share on other sites
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

Link to comment
https://ipbmafia.ru/topic/27216-pomogite-s-vyorstkoj/?&do=findComment&comment=205174
Share on other sites
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

Link to comment
https://ipbmafia.ru/topic/27216-pomogite-s-vyorstkoj/?&do=findComment&comment=205175
Share on other sites

не помогло

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

 

Link to comment
https://ipbmafia.ru/topic/27216-pomogite-s-vyorstkoj/?&do=findComment&comment=205176
Share on other sites
<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>

 

Link to comment
https://ipbmafia.ru/topic/27216-pomogite-s-vyorstkoj/?&do=findComment&comment=205179
Share on other sites
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>

 

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

Link to comment
https://ipbmafia.ru/topic/27216-pomogite-s-vyorstkoj/?&do=findComment&comment=205180
Share on other sites

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

Edited by WaNted

Link to comment
https://ipbmafia.ru/topic/27216-pomogite-s-vyorstkoj/?&do=findComment&comment=205181
Share on other sites

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

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

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

Link to comment
https://ipbmafia.ru/topic/27216-pomogite-s-vyorstkoj/?&do=findComment&comment=205184
Share on other sites

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.