Модификации Красивые баннеры / префиксы с иконками FontAwesome

[Optinice]

Optinice разместил(а) новый ресурс:

Красивые баннеры / префиксы с иконками FontAwesome - Баннеры с иконками FontAwesome

Данная модификация не моя но немного переделана.
Данное решение подойдет, как для префиксов тем, так и для баннеров пользователей.
В extra.less:

@svgPrefixBorderRadius: @xf-borderRadiusSmall; // Радиус префиксов
@svgPrefixColorGradient: rgba(0,0,0,0);       // Цвет градиента прификса (не используется)
@svgPrefixTextShadow: rgba(0,0,0,0);          // Цвет тени префикса (не используется)

.svgLabelPrefix(@prefix-name, @prefix-color, @prefix-icon: "none") {
    .svgPrefix...

Посмотреть страницу этого ресурса...

 

Модификации  Анимированный виджет обратного отсчета до НГ

[Binkaddas]

Thank you, really nice


can we add it also for administrator?

 

[Optinice]

Thank you, really nice


can we add it also for administrator?
Посмотреть вложение 11989

Хм, после работы посмотрю что с этим можно сделать, не думал что кому-то это понадобится.

 

[Optinice]

Thank you, really nice


can we add it also for administrator?
Посмотреть вложение 11989

Делал с телефона пока работаю, возможно есть косяки ибо неудобно.
В звание пишем html код

<span class="adminsk">administrator</span>

В extra less добавляем

 .adminsk {
  color: #0193ff;
text-shadow: none; border-color: #0193ff;
padding: .25em .5em .25em 1.75em;
box-shadow: 0 0 10px #0193ff;
    background: transparent;
    border-radius: 10px;
font-size: 12px;
}

 

[Optinice]

Делал с телефона пока работаю, возможно есть косяки ибо неудобно.
В звание пишем html код

<span class="adminsk">administrator</span>

В extra less добавляем

 .adminsk {
  color: #0193ff;
text-shadow: none; border-color: #0193ff;
padding: .25em .5em .25em 1.75em;
box-shadow: 0 0 10px #0193ff;
    background: transparent;
    border-radius: 10px;
font-size: 12px;
}

Поскольку я новичок в изучении css и html попрошу знающих ребят отписать все ли правильно или может есть другие методы.

 

[Binkaddas]

Since I'm new to learning CSS and HTML, I'll ask knowledgeable guys to tell me if everything is correct or if there are other methods.

thank you for your kind support

The admin framework needs more formatting. Also, can I add an icon for the management's team and administrator

 

[xdeep]

thank you for your kind support

The admin framework needs more formatting. Also, can I add an icon for the management's team and administrator

Посмотреть вложение 12002

Send me a link to the site in a private message, I'll take a look.

 

[Binkaddas]

Send me a link to the site in a private message, I'll take a look.

Send me a link to the site in a private message, I'll take a look.

thank you for your also kind support

i just try it in the local server

leme install it in the fourm and i will send it to you

 

[xdeep]

thank you for your also kind support

i just try it in the local server

leme install it in the fourm and i will send it to you

попробуйте так:

.message-userTitle {
    color: #0193ff;
    text-shadow: none;
    border-color: #0193ff;
    padding: 2px 2px;
    box-shadow: 0 0 10px #0193ff;
    background: transparent;
    border-radius: 10px;
    font-size: 12px;
    margin-bottom: 4px;
}

 

[Binkaddas]

nice job


if mind can you add also icon beside adminstrator and management tem ( any icon i will change it later ) just add the code


This is the full code for what you see in the photo above.

@svgPrefixBorderRadius: @xf-borderRadiusSmall; // Prefix radius
@svgPrefixColorGradient: rgba(0,0,0,0); // Prefix gradient color (not used)
@svgPrefixTextShadow: rgba(0,0,0,0); // Prefix shadow color (not used)

.svgLabelPrefix(@prefix-name, @prefix-color, @prefix-icon: "none") {
    .svgPrefix,
    .label.svgPrefix {
        font-size: 80%;
        font-weight: 400;
        text-align: center;
        align-items: center;
        padding: 1px 6px;
        border: 1px solid @prefix-color; /* Keep the color border */
        border-radius: 10px;
        font-style: normal;
        position: relative;
        white-space: nowrap;
        background: transparent; /* Remove background */

        .fsp & {
            margin-right: 5px;
        }

        .menuPrefix& {
            display: inline-block;
            font-size: 1.3em;
            width: 100%;
            padding: .333em;

            a& {
                text-decoration: none;
            }
        }

        .p-title-value & {
            .p-title & {
                font-size: 70%;
            }
        }

        &:before {
            position: absolute;
            top: .25em; /* Base position */
            bottom: 0;
            left: .333em;
        }

        &.@{prefix-name} {
            color: @prefix-color; /* Text color as border */
            text-shadow: none; /* Disable shadow */
            border-color: @prefix-color; /* Explicitly specify the border color */

            /* Add highlighting via box-shadow */
            box-shadow: 0 0 10px fade(@prefix-color, 90%);

            &when not (@prefix-icon = "none") {
                padding: .25em .5em .25em 1.75em;

                &:before {
                    .m-faBase();
                    .m-faContent(@prefix-icon);
                    /* Move the icon a little lower */
                    top: .35em; /* Increase the value for the downward offset */
                }
            }
        }
    }
}

.svgLabelPrefix(admin, rgb(255, 50, 50, 1), @fa-var-user-secret);
.svgLabelPrefix(moder, rgb(15, 177, 15), @fa-var-cog);
.svgLabelPrefix(prem, rgb(255, 204, 0, 1), @fa-var-crown);
.svgLabelPrefix(mew, rgb(3, 252, 252, 1), @fa-var-coins);
.svgLabelPrefix(forum4an, rgb(153, 153, 255, 1), @fa-var-user);
.svgLabelPrefix(new, rgb(243, 165, 108, 1), @fa-var-user);



.userBanner.userBanner--staff {
color: #0193ff;
text-shadow: none; border-color: #0193ff;
padding: .25em .5em .25em 1.75em;
box-shadow: 0 0 10px #0193ff;
    background: transparent;
    border-radius: 10px;
font-size: 12px;
}




.message-userTitle {
    color: #0193ff;
    text-shadow: none;
    border-color: #0193ff;
    padding: 2px 2px;
    box-shadow: 0 0 10px #0193ff;
    background: transparent;
    border-radius: 10px;
    font-size: 12px;
    margin-bottom: 4px;
}