آموزش ساخت ساخت "BBcode "Warning,Success,Information

[Sarirnet 391]

مرحله ی اول

به آدرس Admin CP > Look & Feel > skin-name > CSS > Add CSS File برید و یه فایل css جدید ایجاد کنید و اسمش رو هم بزارید : SOS_BBCodes بعد کلید Add رو بزنید .

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

.noticeui
{
color: #FFF;
width: 83%;
font-weight: normal;
padding: 13px 15px 0;
margin-bottom: 2.5em;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
box-shadow: 1px 1px 2px rgba(0,0,0,.4);
position: relative;
right: 34px;
}
.noticeui p { margin-bottom: 1.5em; }
.noticeui p:last-child { margin-bottom: 0; }
.noticeui ul { margin-left: 8px; margin-bottom: 1.5em; }
.noticeui ul:last-child { margin-bottom: 0; }
.noticeui li { background: url(http://ipsfarsi.com/public/style_images/velvet/noticetabs.png) no-repeat 0 -95px; list-style-type: none; padding-left: 18px; margin-bottom: .75em; }
.noticeui-success li { background-position: 0 -95px; }
.noticeui-warn li { background-position: 0 -895px; }
.noticeui-error li { background-position: 0 -495px; }
.noticeui-info li { background-position: 0 -1295px; }
.noticeui h5 { font-size: 14px; font-weight: bold; margin-bottom: .65em; }
.noticeui span { background: url(http://ipsfarsi.com/public/style_images/velvet/noticetabs.png) no-repeat 100% 0; width: 33px; height: 40px; position: absolute; left: -34px; top: 9px; }
.noticeui-success { background-color: #EEF4D4; color: #596C26; border: 1px solid #8FAD3D; }
.noticeui-success span { background-position: 100% 0; }
.noticeui-warn { background-color: #FFEA97; color: #796100; border: 1px solid #E1B500; }
.noticeui-warn span { background-position: 100% -800px; }
.noticeui-error { background-color: #EFCEC9; color: #933628; border: 1px solid #AE3F2F; }
.noticeui-error span { background-position: 100% -400px; }
.noticeui-info { background-color: #C6D8F0; color: #285797; border: 1px solid #4381CD; }
.noticeui-info span { background-position: 100% -1200px; }

دکمه Save رو بزنید .

مرحله ی دوم

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

پوشته شماره یک

تصاویرش رو به آدرس public/style_extra/bbcode_icons منتقل کنید .

تصویر موجود در پوشه شماره دو رو به آدرس public/style_images/yourtheme کپی کنید .

مرحله سوم

خب داخل همون فایلی که دانلود کردین یه پوشه ای به اسم xml هست که باید هر چهار تا فایل درونش ایمپورت بشن و این کار رو از طریق آدرس Admin CP > Look & Feel > BBCode Management انجام بدین .

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

پیش نمایش خطا

پیش نمایش تایید

پیش نمایش تذکر

فایل پیوست جهت دانلود شما عزیزان :BBcode.tar.gz

[Mohammad_Reza 81]

با سلام ...

برای تکمیل این آموزش باید به نکات زیر توجه کنید.

1 :

در قسمت های :

.noticeui li { background: url(http://ipsfarsi.com/public/style_images/velvet/noticetabs.png)

و

.noticeui span { background: url(http://ipsfarsi.com/public/style_images/velvet/noticetabs.png)

باید به جای forums.ipbfarsi نام سایت خود و به جای velvet نام پوشه ی پوسته ی خود ( قالب ) را جایگزین کنید.

2 :

برای تنظیم طول BBCode از قسمت :

color: #FFF;
width: 83%;
font-weight: normal;
padding: 13px 15px 0;
margin-bottom: 2.5em;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
box-shadow: 1px 1px 2px rgba(0,0,0,.4);
position: relative;
right: 13px;

گزینه right: 13px; را تغیر دهید ( عدد آن را کم و زیاد کنید )

- من خودم روی 45- قرار دادم