رفتن به مطلب

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


ارسال های توصیه شده

post-3245-0-03770400-1441149021.jpg

سلام

با توجه به اینکه چندین تاپیک در این مورد زده شده احتمالا این تاپیک مفید باشه و دعای خیر دوستان شامل حال ما هم بشه  :give_rose:

  • خوب قبل از چیزی برای اضافه کردن بلوک جدید به سایدبار باید مد custom block sidebar رو نصب کنید

از این لینک دانلود و نصب کنید

  • به مسیر ویرایش قالب فعال روی انجمنتون مراجعه کنید

post-3245-0-25669600-1441148354_thumb.jp

  • تمپلت بیت globalTemplate رو باز کنید و کدهای زیر رو به ابتداش اضافه کنید و ذخیره کنید
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  • از همون مسیر روی دکمه CSS کلیک کنید و با زدن Add CSS File یک css جدید با نام دلخواه ایجاد کنید و کد های زیر رو بهش اضافه و ذخیره کنید

.
.fa
{
margin-left: 6px;
font-size: 30px;
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;
}

  • از طریق مد custom sidebar block یک بلوک جدید به سایدبار اضافه کنید

post-3245-0-64870900-1441148418_thumb.jp

 

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

post-3245-0-64805900-1441149361_thumb.jp

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

سورس اصلی

لینک ارسال
به اشتراک گذاری در سایت های دیگر
  • بنیان گذار IPSFarsi

خیلی آموزش خوبی بود مطمئنم باعث گشایش کار خیلی از دوستان می شه.:)

لینک ارسال
به اشتراک گذاری در سایت های دیگر
  • 5 هفته بعد...
  • 4 هفته بعد...
  • بنیان گذار IPSFarsi
الان من این دکمه ها رو برای انجمنم بزارم، این شکلی میشن یا تابع پوسته هستند؟

ربطی به پوسته نداره.

لینک ارسال
به اشتراک گذاری در سایت های دیگر
  • بنیان گذار IPSFarsi

شما یکبار قرار بده ببین چه طوری می شه هنوز استفاده نکرده شما چونه ای که چه جوری می شه خراب می شه خراب نمی شه رو نزنید :D

لینک ارسال
به اشتراک گذاری در سایت های دیگر

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

  • کاربران آنلاین در این صفحه   0 کاربر

    هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.

×
×
  • اضافه کردن...

اطلاعات مهم

ما مجبور شدیم تا از کوکی ها و فناوری های مشابه برای اجرای این وب سایت استفاده کنیم تا بتوانیم تجربه بهتری در زمان استفاده از سایت برای شما ایجاد نماییم. سیاست حریم خصوصی.