Jump to content

Размер иконки. Нужна помощь.

Cryt
in Forum of the requests of the Invision Community 4

Featured Replies

Posted

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

Суть вопроса: как изменить размер этих иконок? По-скольку, они слишком мелко отображаются в моём стиле. 

  • Цитата

    Насколько помню, в правке css нужного стиля framework - misc.css - какая-то из группы .ipsUserPhoto, то ли .ipsUserPhoto_small, то ли .ipsUserPhoto_mini. Меняется высота, ширина и border-radius, и менять их надо пропорционально, иначе будут сиськи какие-то.

  • Цитата
    • Author

    Sufiy, Вы про аватарки пользователей или про иконки, которые на главной форума, напротив названия разделов? 

  • Цитата

    Про аватарки. Иконки разделов я вроде тоже редактировал, по-моему в data-lists.css.
    Но я менял только фон unread-статуса, а не размеры.

    Скорее всего data-lists - ipsDataItem_icon.

  • Цитата

    У меня есть в стандартном стиле такая строчка - .ipsDataList_large .ipsDataItem_icon. Другое дело, что возможно правкой стиля этот вопрос не решить.

  • Цитата
    В 08.12.2015 в 22:19, Cryt сказал:

    Так и не решил вопрос. Есть ещё у кого мысли\предложения? 

    Нашел. Найдите в css global - framework - badges.css и поменяйте линейные размеры для .ipsItemStatus.ipsItemStatus_large

  • Цитата

    Я менял высоту, ширину и border-radius, опробовал на двух стилях, включая дефолтный. По умолчанию css выглядит так: 

    /* ITEM STATUS BADGES */
.ipsItemStatus:not( .ipsItemStatus_large ) {
	color: {theme="item_status"};
	font-size: 14px;
	line-height: inherit;
	vertical-align: middle;
}

	.ipsDataItem_subList .ipsItemStatus:not( .ipsItemStatus_large ) {
		vertical-align: text-top;
	}

	.ipsItemStatus.ipsItemStatus_read:not( .ipsItemStatus_large ) {
		color: #dbdbdb;
	}

	.ipsItemStatus.ipsItemStatus_tiny {
		font-size: 9px;
	}

	.ipsItemStatus.ipsItemStatus_small {
		font-size: 13px;
	}

	.ipsItemStatus.ipsItemStatus_large {
		background: {theme="item_status"};
		color: #fff;
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		display: inline-block;
		text-align: center;
		font-size: 18px;
		{prefix="transition" value="0.15s all linear"}
	}

		.ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read {
			background: #dbdbdb;
		}

	.ipsItemStatus.ipsItemStatus_read {
		opacity: 0.6;
	}

	.ipsItemStatus.ipsItemStatus_read:not( .ipsItemStatus_large ):not( .ipsItemStatus_posted ):not( .ipsItemStatus_custom ) {
		display: none;
	}

    А какой у Вас стиль?

  • Цитата
    • Author

    Я тоже бордюр-радиус менял. Всё перепробовал, но ноль реакции. Стиль Анимате 4.х

    Пробовал даже в самом xml, перед загрузкой, та же песня... 

  • Цитата
    • Author
    41 минут назад, Respected сказал:

    .ipsItemStatus.ipsItemStatus_large

    Меняем font-size

    Менял, сейчас пере-проверил - не выходит.

    Может там ограничения стоят где-то?

    Спойлер
    /* Badges: various indicators */
    /* ======================================================== */
    /* STANDARD BADGE */
    .ipsBadge {
        padding: 0 8px;
        border-radius: 2px;
        font-weight: 500;
        display: inline-block;
        color: #fff;
        vertical-align: middle;
        text-shadow: none;
        letter-spacing: 0;
    }
        .ipsBadge a,
        a.ipsBadge:hover {
            color: #fff;
        }
        
        .ipsBadge.ipsBadge_icon {
            width: 28px;
            height: 28px;
            border-radius: 28px;
            font-size: 14px;
            text-align: center;
            line-height: 28px;
            vertical-align: middle;
            padding: 0;
        }
     
            .ipsBadge.ipsBadge_icon.ipsBadge_small {
                width: 19px;
                height: 19px;
                border-radius: 19px;
                line-height: 19px;
                font-size: 11px;
                vertical-align: baseline;
            }
     
            .ipsBadge.ipsBadge_icon.ipsBadge_large {
                width: 38px;
                height: 38px;
                border-radius: 38px;
                line-height: 38px;
                font-size: 17px;
            }
     
    .ipsType_pageTitle .ipsBadge {
        vertical-align: middle !important;
    }
     
    /* ======================================================== */
    /* SIZES */
    .ipsBadge, .ipsBadge.ipsBadge_normal {
        height: 17px;
        line-height: 17px;
        font-size: 10px;
    }
     
    .ipsBadge.ipsBadge_medium {
        height: 18px;
        line-height: 18px;
        font-size: 11px;
    } 
     
    .ipsBadge.ipsBadge_large {
        height: 23px;
        line-height: 23px;
        padding: 0 10px;
    }
     
    /* ======================================================== */
    /* STYLES */
    .ipsBadge_new, .ipsBadge_style1 {
        background: #323232;
    }
     
    .ipsBadge_style2 {
        background: #6a4fa8;
    }
     
    .ipsBadge_warning, .ipsBadge_style3 {
        background: #873661;
    }
     
    .ipsBadge_positive, .ipsBadge_style4 {
        background: #598f5b;
    }
     
    .ipsBadge_negative, .ipsBadge_style5 {
        background: #c75050;
    }
     
    .ipsBadge_neutral, .ipsBadge_style6 {
        background: #616161;
    }
     
    .ipsBadge_intermediary, .ipsBadge_style7 {
        background: #f09348;
    }
     
    /* ======================================================== */
    /* ITEM STATUS BADGES */
    .ipsItemStatus:not( .ipsItemStatus_large ) {
        color: {theme="item_status"};
        font-size: 28px;
            line-height: inherit;
        vertical-align: middle;
    }
     
        .ipsDataItem_subList .ipsItemStatus:not( .ipsItemStatus_large ) {
            vertical-align: text-top;
        }
     
        .ipsItemStatus.ipsItemStatus_read:not( .ipsItemStatus_large ) {
            color: #dbdbdb;
        }
     
        .ipsItemStatus.ipsItemStatus_tiny {
            font-size: 9px;
        }
     
        .ipsItemStatus.ipsItemStatus_small {
            font-size: 13px;
        }
     
        .ipsItemStatus.ipsItemStatus_large {
            
            color: #fff;
            width: 80px;
            height: 80px;
            line-height: 80px;
            border-radius: 80px;
            display: inline-block;
            text-align: center;
            font-size: 80px;
            {prefix="transition" value="0.30s all linear"}
        }
     
            .ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read {
                background: #dbdbdb;
            }
     
        .ipsItemStatus.ipsItemStatus_read {
            opacity: 0.6;
        }
     
        .ipsItemStatus.ipsItemStatus_read:not( .ipsItemStatus_large ):not( .ipsItemStatus_posted ):not( .ipsItemStatus_custom ) {
            display: none;
        }
     
    /* ======================================================== */
    /* POINTS (for warnings) */
    .ipsPoints {
        display: inline-block;
        background: #b14848;
        color: #fff;
        width: 36px;
        height: 36px;
        border-radius: 36px;
        font-size: 18px;
        text-align: center;
        line-height: 36px;
    }
     
    .ipsPoints_small {
        width: 22px;
        height: 22px;
        line-height: 22px;
        font-size: 12px;
        vertical-align: middle;
    }
     
    /* ======================================================== */
    /* REP BADGE */
    .ipsRepBadge {
        font-size: 11px;
        font-weight: bold;
        display: inline-block;
    }
     
        .ipsRepBadge_positive,
        .ipsRepBadge_positive:hover {
            color: #5f7a47 !important;
        }
     
        .ipsRepBadge_negative,
        .ipsRepBadge_negative:hover {
            color: #8c3737 !important;
        }
     
        .ipsRepBadge_neutral,
        .ipsRepBadge_neutral:hover {
            color: #b3b3b3 !important;
        }

     

  • Цитата
    14 минут назад, Cryt сказал:
     .ipsItemStatus.ipsItemStatus_large {
            
            color: #fff;
            width: 80px;
            height: 80px;
            line-height: 80px;
            border-radius: 80px;
            display: inline-block;
            text-align: center;
            font-size: 80px;
            {prefix="transition" value="0.30s all linear"}
        }

    Первое, что бросается в глаза - border-radius должен быть вдвое меньше линейных размеров.

  • Цитата
    40 минут назад, Cryt сказал:

    Менял, сейчас пере-проверил - не выходит.

    Может там ограничения стоят где-то?

    Значит не там менял, возможно где-то есть переопределение этого параметра. 

  • Цитата
    • Author
    2 часа назад, Sufiy сказал:

    Первое, что бросается в глаза - border-radius должен быть вдвое меньше линейных размеров.

    Было. Я уже по-всякому пробовал. 

  • Цитата
    • Author
    12 часов назад, Sufiy сказал:

    Первое, что бросается в глаза - border-radius должен быть вдвое меньше линейных размеров.

    Решил вопрос с этой бедой. Закрутили они его конечно совсем по идиотскому. Оказывается, там стояли ограничители на максимальные пиксели этих иконок. Непонятно, зачем делать этот бред?

    P.S. Спасибо, что помогал в данном вопросе. 

  • Цитата

    • 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
    Ответить в этой теме...
    Go to topic listing

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

    • No registered users viewing this page.