رفتن به مطلب
ای پی بورد ایران

Image Description از تمامی ویژگی های منحصر بفرد سیستم بهره ببرید!!!

اضافه نمودن دکمه های اطلاعیه در ادیتور



با سلام و احترام خدمت کاربران گرامی

با توجه به اینکه در نسخه 4 ای پی بورد از ادیتور پیشرفته ckeditor بهره برده شده است، می توان امکانات زیادی به آن اضافه نمود.

در این اموزش قصد داریم دکمه هایی جهت ایجاد اعلامیه در تاپیک ها ایجاد نماییم و به ادیتور ای پی بورد اضافه نماییم.

دکمه-های-ویرایشگر.png

 

جهت افزودن این دکمه ها، از پنل مدیریت مسیر زیر را طی نمایید:

بخش شخصی سازی >> ویرایشگر >> نوار ابزار ها

بر روی افزودن دکمه کلیک نمایید و وارد گزینه اختصاصی شده:

توضیحات:

عنوان دکمه: انتخاب یک نام برای دکمه مورد نظر

آیکن: آپلود آیکن دکمه مورد نظر (این آیکن در ویرایشگر نمایش داده می شود و آیکن های این استفاده شده در این آموزش در قسمت پیوست ها موجود می باشد)

HTML:   در این بخش کد های مورد نظر خود رامی تواند وارد کنید:

کد ها:

اعلامیه info

غیر فعال کننده

<div class="mbh-information mbh-notification-box">{content}</div>
<style>
  .mbh-notification-box {
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		color: #ffffff;
		font-family: 'Open Sans', sans-serif;
		margin-bottom: 25px;
		padding: 10px 14px 10px 44px;
		position: relative;
		width: -moz-fit-content;
		width: -webkit-fit-content;
		width: fit-content;
}

.mbh-notification-box:before {
		font-family: FontAwesome;
		font-size: 21px;
		left: 14px;
		position: absolute;
}
.mbh-information {
		background-color: #3498db;
}

.mbh-information:before {
		content: "\f129";
		margin-left: 4px;
        margin-top:-5px;
}
</style>

 

اعلامیه Success

 

غیر فعال کننده

<div class="mbh-success mbh-notification-box">{content}</div>
  <style>
    .mbh-notification-box {
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		color: #ffffff;
		font-family: 'Open Sans', sans-serif;
		margin-bottom: 25px;
		padding: 10px 14px 10px 44px;
		position: relative;
		width: -moz-fit-content;
		width: -webkit-fit-content;
		width: fit-content;
}

.mbh-notification-box:before {
		font-family: FontAwesome;
		font-size: 21px;
		left: 14px;
		position: absolute;
}

.mbh-success {
		background-color: #2ecc71;
}

.mbh-success:before {
		content: "\f00c";
		margin-left: -2px;
        margin-top:-5px;
}

  </style>

 

اعلامیه  Warning

 

غیر فعال کننده

<div class="mbh-warning mbh-notification-box">{content}</div>
<style>
  .mbh-notification-box {
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		color: #ffffff;
		font-family: 'Open Sans', sans-serif;
		margin-bottom: 25px;
		padding: 10px 14px 10px 44px;
		position: relative;
		width: -moz-fit-content;
		width: -webkit-fit-content;
		width: fit-content;
}
  .mbh-notification-box:before {
		font-family: FontAwesome;
		font-size: 21px;
		left: 14px;
		position: absolute;
}

.mbh-warning {
		background-color: #e67e22;
}

.mbh-warning:before {
		content: "\f12a";
		margin-left: 5px;
          margin-top:-5px;
}


</style>

 

اعلامیه Error 

 

غیر فعال کننده

<div class="mbh-failure mbh-notification-box">{content}</div>
<style>
  .mbh-notification-box {
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		color: #ffffff;
		font-family: 'Open Sans', sans-serif;
		margin-bottom: 25px;
		padding: 10px 14px 10px 44px;
		position: relative;
		width: -moz-fit-content;
		width: -webkit-fit-content;
		width: fit-content;
}

.mbh-notification-box:before {
		font-family: FontAwesome;
		font-size: 21px;
		left: 14px;
		position: absolute;
}
  .mbh-failure {
		background-color: #e74c3c;
}

.mbh-failure:before {
		content: "\f00d";
        margin-top:-5px;
        
}
</style>

 

اعلامیه Question

 

غیر فعال کننده

<div class="mbh-question mbh-notification-box">{content}</div>
<style>
  .mbh-notification-box {
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		color: #ffffff;
		font-family: 'Open Sans', sans-serif;
		margin-bottom: 25px;
		padding: 10px 14px 10px 44px;
		position: relative;
		width: -moz-fit-content;
		width: -webkit-fit-content;
		width: fit-content;
}

.mbh-notification-box:before {
		font-family: FontAwesome;
		font-size: 21px;
		left: 14px;
		position: absolute;
}
.mbh-question {
		background-color: #f1c40f;
}

.mbh-question:before {
		content: "\f128";
		margin-left: 2px;
        margin-top:-5px;
}
</style>

 

اعلامیه Tip

 

غیر فعال کننده

<div class="mbh-tip mbh-notification-box">{content}</div>
<style>
  .mbh-notification-box {
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		color: #ffffff;
		font-family: 'Open Sans', sans-serif;
		margin-bottom: 25px;
		padding: 10px 14px 10px 44px;
		position: relative;
		width: -moz-fit-content;
		width: -webkit-fit-content;
		width: fit-content;
}

.mbh-notification-box:before {
		font-family: FontAwesome;
		font-size: 21px;
		left: 14px;
		position: absolute;
}
.mbh-tip {
		background-color: #16a085;
}

.mbh-tip:before {
		content: "\f0eb";
		margin-left: 2px;
        margin-top:-5px;
}
</style>

 

اعلامیه Notification

 

غیر فعال کننده

<div class="mbh-notice mbh-notification-box">{content}</div>
<style>
  .mbh-notification-box {
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		color: #ffffff;
		font-family: 'Open Sans', sans-serif;
		margin-bottom: 25px;
		padding: 10px 14px 10px 44px;
		position: relative;
		width: -moz-fit-content;
		width: -webkit-fit-content;
		width: fit-content;
}

.mbh-notification-box:before {
		font-family: FontAwesome;
		font-size: 21px;
		left: 14px;
		position: absolute;
}
.mbh-notice {
		background-color: #bea474;
}

.mbh-notice:before {
		content: "\f0a1";
		margin-left: -1px;
        margin-top:-5px;
}
</style>

 

 

برای گروه بندی بهتر این دکمه ها می توانید این دکمه ها را در یک نوار ابزار جدید قرار دهید.

موفق باشید.

 

ICON-EDITOR.zip


 گزارش این آموزش

×