آموزش زیبا سازی نوار مدیریت

پشتیبانی از نسخه های

1. 2.1
2. 2.2

سلام دوستان

برای اینکه به نوار مدیریت انجمن خودتون شکل زیبایی ببخشید کد زیر را در قالب extra.less قرار دهید

.actionBar-action--reply, .js-multiQuote, .actionBar-action--reaction, .actionBar-action--spam,
.actionBar-action--report, .actionBar-action--edit, .actionBar-action--delete,
.actionBar-action--ip, .actionBar-action--warn, .actionBar-action--history
    {
         display:inline-block;
         background: rgb(71, 167, 235);
         color: rgb(255, 255, 255);
         padding: 4px 9px;
         line-height: 19px;
         background: linear-gradient(rgb(71, 167, 235) 0%, rgb(110, 123, 171) 0%);
    }
.actionBar-action--reply:hover, .actionBar-action--report:hover, .actionBar-action--edit:hover, .actionBar-action--delete:hover, .actionBar-action--spam:hover, .actionBar-action--ip:hover, .actionBar-action--warn:hover, .js-multiQuote:hover {
         background: rgb(65, 158, 224);
         color: rgb(255, 255, 255);
         text-decoration: none;
         background: linear-gradient(rgb(65, 158, 224) 0%, rgb(92, 107, 162) 0%);
    }
.actionBar-action--reaction:hover  {
        background: rgb(65, 158, 224);
        color: rgb(255, 255, 255);
        text-decoration: none;
        transition: all .4s ease;
        -webkit-transition: all .4s ease;
        background: linear-gradient(rgb(65, 158, 224) 0%, rgb(92, 107, 162) 0%);
        transform: scale(1.25);
    }

.reaction--1 .reaction-text {
    color: #ffffff;
}
@media (max-width: 800px) {
.actionBar-action--reaction:hover {
transform: none;
}
}

اگر تمایل داشتید دکمه ها آیکون هم داشته باشند کد زیر را در قالب extra.less اضافه کنید

.actionBar-action:before {
    margin-right: 3px;
}
.actionBar-action--edit:before {.m-faContent("\f040");}
.actionBar-action--report:before {.m-faContent("\f071");}
.actionBar-action--ip:before {.m-faContent("\f002");}
.actionBar-action--delete:before {.m-faContent("\f00d");}
.actionBar-action--spam:before {.m-faContent("\f024");}
.actionBar-action--warn:before {.m-faContent("\f12a");}
.actionBar-action--history:before {.m-faContent("\f1da");}

قبل از تغییرات


بعد از تغییرات


نمونه این آموزش در انجمن های پشتیبانی زنفورو مورد استفاده قرار گرفته است

موفق باشید.