اضافه کردن دکمه های رنگی به سایدبار - همانند قالب قبلی IPBFarsi

[صائب کوهپایه 2,592]

در قالب قبلی IPBFarsi باکس هایی بود که بعد از تبدیل به ورژن 4 به فراموشی سپرده شد .حال دوباره اموزش زیر برای ورژن 4 باز سازی شده

برای ایجاد چنین باکسی در ورژن 4 خیلی راحت میتونید به روش زیر عمل کنید ابتدا محتویات کد زیر را در قالب خودتون از مسیر زیر کپی کنید

همانند تصویر وارد بخش مدیریت شده و به بخش شخصی سازی مراجعه کرده و پوسته را انتخاب کرده و از کادر روبرو روی علامت </> که با شماره 2 مشخص شده رفته و کلیک میکنید

سپس به سراغ بخش css رفته و Custom.css  را پیدا کرده و این کد ها را در درونش جایگذاری میکنید

.fa
{
margin-left: 6px;
vertical-align: middle;
}
.Button
{
    font-family: Tahoma, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;

    position: relative;

    display: inline-block;

    box-sizing: border-box;
    min-height: 34px;
    width: 100%;
    padding: 6px 12px;
    margin-bottom: 6px;

    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
    text-align: right;
    vertical-align: middle;
    white-space: normal;
    text-decoration: none;

    color: #fff;
    border: 1px solid #434a54;
    border-radius: 3px;
    background: #656d78;

    text-rendering: optimizeSpeed;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
}
.Button:hover
{
    border-color: #434a54;
    background-color: #434a54;
}
.Button::-moz-focus-inner
{
    margin: 0;
    padding: 0;
}
.Button:focus
{
    outline: 1px dotted;
    outline: 3px auto -webkit-focus-ring-color;
}
.Button:hover,
.Button:focus,
.Button:active
{
    text-decoration: none;
}
.Button:disabled,
.Button.is-disabled
{
    cursor: not-allowed;
    pointer-events: none;

    opacity: .65;
}

/**
 * Button Modifier: Size
 * --------------------------------------------------
 */
.Button--small
{
    font-size: 12px;
    line-height: 18px;

    min-height: 28px;
    padding: 4px 8px;

    border-radius: 2px;
}

.Button--large
{
    font-size: 16px;
    line-height: 22px;

    min-height: 40px;
    padding: 8px 16px;

    border-radius: 4px;
}

/**
 * Button Modifier: Variations
 * --------------------------------------------------
 */
.Button--primary
{
    color: #fff;
    border-color: #967adc;
    background-color: #ac92ec;
}
.Button--primary:hover
{
    color: #fff;
    border-color: #967adc;
    background-color: #967adc;
}

.Button--secondary
{
    color: #fff;
    border-color: #4a89dc;
    background-color: #5d9cec;
}
.Button--secondary:hover
{
    color: #fff;
    border-color: #4a89dc;
    background-color: #4a89dc;
}

.Button--outline
{
    color: #434a54;
    border-color: #434a54;
    background-color: transparent;
}
.Button--outline:hover
{
    color: #fff;
    border-color: #434a54;
    background-color: #434a54;
}

.Button--link
{
    color: #5d9cec;
    border-color: transparent;
    background-color: transparent;
}
.Button--link:hover
{
    color: #4a89dc;
    border-color: transparent;
    background-color: transparent;
}

.Button--success
{
    color: #fff;
    border-color: #8cc152;
    background-color: #a0d468;
}
.Button--success:hover
{
    color: #fff;
    border-color: #8cc152;
    background-color: #8cc152;
}

.Button--info
{
    color: #fff;
    border-color: #3bafda;
    background-color: #4fc1e9;
}
.Button--info:hover
{
    color: #fff;
    border-color: #3bafda;
    background-color: #3bafda;
}

.Button--warning
{
    color: #fff;
    border-color: #f6bb42;
    background-color: #ffce54;
}
.Button--warning:hover
{
    color: #fff;
    border-color: #f6bb42;
    background-color: #f6bb42;
}

.Button--error
{
    color: #fff;
    border-color: #da4453;
    background-color: #ed5565;
}
.Button--error:hover
{
    color: #fff;
    border-color: #da4453;
    background-color: #da4453;
}

/**
 * Button Group: Vertical and Horizontal
 * --------------------------------------------------
 */
.ButtonGroup
{
    font-size: 0;

    display: inline-block;

    margin: 0;
    padding: 0;

    list-style: none;
}
.ButtonGroup + .ButtonGroup
{
    margin-left: 30px;
}

.ButtonGroup-item:not(:first-child):not(:last-child) > .Button
{
    border-radius: 0 !important;
}
.ButtonGroup-item > .Button
{
    display: block;

    width: 100%;
}
.ButtonGroup-item > .Button:hover,
.ButtonGroup-item > .Button:focus,
.ButtonGroup-item > .Button:active
{
    z-index: 1;
}

.ButtonGroup--horizontal > .ButtonGroup-item
{
    display: inline-block;

    ;
}
.ButtonGroup--horizontal > .ButtonGroup-item:first-child:not(:only-child)
{
    margin-left: 0;
}
.ButtonGroup--horizontal > .ButtonGroup-item:first-child:not(:only-child) > .Button
{
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.ButtonGroup--horizontal > .ButtonGroup-item:last-child:not(:only-child) > .Button
{
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.ButtonGroup--vertical > .ButtonGroup-item
{
    display: block;

    margin-top: -1px;
}
.ButtonGroup--vertical > .ButtonGroup-item:first-child:not(:only-child)
{
    margin-top: 0;
}
.ButtonGroup--vertical > .ButtonGroup-item:first-child:not(:only-child) > .Button
{
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.ButtonGroup--vertical > .ButtonGroup-item:last-child:not(:only-child) > .Button
{
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.ButtonGroup--vertical > .ButtonGroup-item > .Button
{
    text-align: left;
}

کار css تمام شده حالا نیاز به نمایش ان در سایت هست برای نمایش نیاز به پلاگین زیر دارید

این پلاگین را که نصب کردید حالا نوبت به اضافه کردن کد های HTML است که در هر مکانی که نیاز دارید اضافه کنید.کد ها زیر را در بلوکی که با پلاگین بالا زدید وارد میکنید

<a href="#" role="button" class="Button Button--large Button--primary"><i class="fa fa-fw fa-heart"></i>نظرات شما</a></br>
<a href="#" role="button" class="Button Button--large Button--secondary"><i class="fa fa-fw fa-calendar-o"></i>جدول زمان بندی</a></br>
<a href="#" role="button" class="Button Button--large Button--outline"><i class="fa fa-fw fa-exclamation-triangle"></i>قوانین</a></br>
<a href="#" role="button" class="Button Button--large Button--info"><i class="fa fa-fw fa-cart-plus"></i>فروشگاه</a></br>
<a href="#" role="button" class="Button Button--large Button--success"><i class="fa fa-fw fa-bullhorn"></i>خبرنامه</a></br>
<a href="#" role="button" class="Button Button--large Button--warning"><i class="fa fa-fw fa-credit-card"></i>حمایت مالی</a></br>
<a href="#" role="button" class="Button Button--large Button--error"><i class="fa fa-fw fa-paper-plane"></i>تماس با ما</a></br>

• لینک های خودتون رو میتونید با # ها جایگزین کنین 
• آیکون هارو هم میتونید به دلخواه تعویض کنید لیست آیکون های قابل استفاده 
• از تب permissions کاربرانی که مجاز به دیدن این بلاک هستند رو انتخاب و ذخیره کنید

سورس اصلی

ویرایش شده 15 اسفند، ۱۳۹۶ توسط صائب کوهپایه