XenForo پیشوندهای موضوع با تم های زیبا در زنفورو

Status
Not open for further replies.
  • Thread starter
  • Admin
  • We add to extra.less
  • اضافه کردن کدهای فوق به قالب extra.less
Rich (BB code):
@svgPrefixBorderRadius: @xf-borderRadiusSmall; // XnForo.ir
@svgPrefixFontFamily: inherit;                 // XnForo.ir
@svgPrefixColorGradient: rgba(0,0,0,.4);       //XnForo.ir
@svgPrefixTextShadow: rgba(0,0,0,.5);          // XnForo.ir

.svgLabelPrefix(@prefix-name, @prefix-color, @prefix-icon: "none") {
    .svgPrefix, .label.svgPrefix {
        font-family: @svgPrefixFontFamily;
        font-size: 70%;
        font-weight: 500;
        display: inline-flex;
        text-align: center;
        align-items: center;
        text-transform: uppercase;
        line-height: ((@xf-lineHeightDefault) * .9);
        padding: .25em .5em;
        border: none;
        border-radius: @svgPrefixBorderRadius;
        position: relative;
        white-space: nowrap;
        .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;
            bottom: 0;
            left: .333em;
        }      
        &.@{prefix-name} {
            background: linear-gradient(135deg, @svgPrefixColorGradient 0%, @svgPrefixColorGradient 40%, transparent 40%, transparent 100%), @prefix-color;
            color: rgb(250,250,250);
            text-shadow: 1px 0 1px @svgPrefixTextShadow, 0 1px 1px @svgPrefixTextShadow, -1px 0 1px @svgPrefixTextShadow, 0 -1px 1px @svgPrefixTextShadow;
            &when (iskeyword(@prefix-icon)) {
                padding: .25em .5em .25em 1.75em;
                &:before {
                    .m-faBase();
                    content: "\@{prefix-icon}";
                }
            }
        }      
    }  
}
  • Then, we make prefixes according to examples
  • همانند مثال های اشاره شده در بالا پیشوندها را می سازیم
Code:
.svgLabelPrefix(important, rgb(198,40,40), f06a);
  • Result
  • نتیجه
 
Status
Not open for further replies.
  • Tags
    theme prefixes with icons xenforo tips theme prefixes with icons آموزش پیشوندها در زنفورو تم های زیبا برای پیوشندهای زنفورو پیشوندهای زیبا در زنفور
  • Back
    Top Bottom