هاست لینوکس

آخرین بسته‌ی MyBB: نسخه‌ی 1.8.27 MyBB منتشر شد


امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
[آموزش] تغییر رنگ پوسته - انتخاب رنگ قالب جی کوئری
#1
   

برای اینکه بتوانید پوسته خود را تغییر رنگ بدهید و این امکان را به کاربر بدهید تا بتواند پوسته را به رنگ دلخواه خود در آورد با ما همراه شوید

ابتدا پیوست را دانلود کرده و بعد کد های زیر را در Headerinclude قالب خود قرار دهید



کد:
<script type="text/javascript" src="{$mybb->settings['bburl']}/picker/js/jquery.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/picker/js/colorpicker.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/picker/js/skin.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/picker/js/cookie.js"></script>

بعد به پوسته خود رفته و یک فایل css جدید با نام دلخواه ایجاد نمایید مثلا cp.css

و بعد کدهای زیر را در آن قرار داده و ذخیره نمایید



کد:
.custom_theme{

   background-image: url('picker/cp/color-swatches.png');
   float: right;
}
.custom_theme #colorpicker{
   height: 12px;
   width: 12px;
   padding: 0;
   margin: 0;
   cursor: pointer;
   opacity: 0;
}

.colorpicker {
   width: 356px;
   height: 176px;
   overflow: hidden;
   position: absolute;
   background: url(picker/cp/colorpicker_background.png);
   font-family: Arial, Helvetica, sans-serif;
   display: none;
   z-index: 9000;
   margin-left: 36px;
}
.colour_instructions{
   width: 134px;
   height: 92px;
   position: absolute;
   left: 211px;
   top: 47px;
   text-align: left;
   font-size: 10px;
   color: #898989;
}
.colorpicker_color {
   width: 150px;
   height: 150px;
   left: 14px;
   top: 13px;
   position: absolute;
   background: #f00;
   overflow: hidden;
   cursor: crosshair;
}
.colorpicker_color div {
   position: absolute;
   top: 0;
   left: 0;
   width: 150px;
   height: 150px;
   background: url(picker/cp/colorpicker_overlay.png);
}
.colorpicker_color div div {
   position: absolute;
   top: 0;
   left: 0;
   width: 11px;
   height: 11px;
   overflow: hidden;
   background: url(picker/cp/colorpicker_select.gif);
   margin: -5px 0 0 -5px;
}
.colorpicker_hue {
   position: absolute;
   top: 13px;
   left: 171px;
   width: 35px;
   height: 150px;
   cursor: n-resize;
}
.colorpicker_hue div {
   position: absolute;
   width: 35px;
   height: 9px;
   overflow: hidden;
   background: url(picker/cp/colorpicker_indic.gif) left top;
   margin: -4px 0 0 0;
   left: 0px;
}
.colorpicker_new_color {
   position: absolute;
   width: 130px;
   height: 30px;
   left: 213px;
   top: 13px;
   background: #f00;
}
.colorpicker_current_color {
   position: absolute;
   width: 60px;
   height: 30px;
   left: 283px;
   top: 13px;
   background: #f00;
   display: none;
}
.colorpicker input {
   background-color: transparent;
   border: 1px solid transparent;
   position: absolute;
   font-size: 10px;
   font-family: Arial, Helvetica, sans-serif;
   color: #898989;
   top: 4px;
   right: 11px;
   text-align: right;
   margin: 0;
   padding: 0;
   height: 11px;
}
.colorpicker_hex {
   position: absolute;
   width: 72px;
   height: 22px;
   background: url(picker/cp/colorpicker_hex.png) top;
   left: 212px;
   top: 142px;
}
.colorpicker_hex input {
   right: 6px;
}
.colorpicker_field {
   height: 22px;
   width: 62px;
   background-position: top;
   position: absolute;
   display: none; /* Hide colour boxes */
}
.colorpicker_field span {
   position: absolute;
   width: 12px;
   height: 22px;
   overflow: hidden;
   top: 0;
   right: 0;
   cursor: n-resize;
}
.colorpicker_rgb_r {
   background-image: url(picker/cp/colorpicker_rgb_r.png);
   top: 52px;
   left: 212px;
}
.colorpicker_rgb_g {
   background-image: url(picker/cp/colorpicker_rgb_g.png);
   top: 82px;
   left: 212px;
}
.colorpicker_rgb_b {
   background-image: url(picker/cp/colorpicker_rgb_b.png);
   top: 112px;
   left: 212px;
}
.colorpicker_hsb_h {
   background-image: url(picker/cp/colorpicker_hsb_h.png);
   top: 52px;
   left: 282px;
}
.colorpicker_hsb_s {
   background-image: url(picker/cp/colorpicker_hsb_s.png);
   top: 82px;
   left: 282px;
}
.colorpicker_hsb_b {
   background-image: url(picker/cp/colorpicker_hsb_b.png);
   top: 112px;
   left: 282px;
}
.colorpicker_submit {
   position: absolute;
   width: 56px;
   height: 22px;
   background: url(picker/cp/colorpicker_submit.png) top;
   left: 288px;
   top: 142px;
   cursor: pointer;
   overflow: hidden;
}
.colorpicker_focus {
   background-position: center;
}
.colorpicker_hex.colorpicker_focus {
   background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
   background-position: bottom;
}
.colorpicker_slider {
   background-position: bottom;
}

قالب header template باز کنید و کد زیر را هر کجا که میخواهید تغییر رنگ قالب برای شما نمایش دهد را قرار دهید



کد:
<span class='custom_theme'><input type='text' id='colorpicker' /></span>

فایل skin.js را باز کنید و ID  و یا class جاهایی که قالب شما تغییر رنگ پیدا کند را قرار دهید مانند نمونه زیر




کد:
var customElements = " #panel, .tfoot, .upper, .thead";

کار تمام است و از پوسته خود با چندین میلیون رنگ لذت ببرید


.zip   Mybb jQuery color palette.zip (اندازه: 93.67 KB / تعداد دفعات دریافت: 49)

ترجمه : انجمن پارسیان
منبع :
http://community.mybb.com/thread-158934.html
پاسخ
 سپاس شده توسطDeshneh (۱۳۹۴/۲/۱۰، ۰۹:۲۳:۳۵ صبح) ، HOssE!N-B (۱۳۹۴/۲/۱۰، ۱۳:۰۲:۰۰ عصر) ، hasan2014 (۱۳۹۴/۲/۱۰، ۱۶:۱۴:۲۳ عصر) ، firstboy000 (۱۳۹۴/۲/۱۰، ۱۸:۳۱:۱۷ عصر) ، محمد تی ام (۱۳۹۴/۵/۹، ۲۲:۵۲:۳۶ عصر) ، motorola30 (۱۳۹۵/۱۰/۴، ۱۹:۳۰:۲۶ عصر) ، hp618 (۱۴۰۰/۸/۲۱، ۱۵:۰۷:۳۰ عصر)
#2
به نظرم عنوان موضوع با محتواش متناسب نیس ... 
پاسخ
#3
عنوان موضوع با توجه به سایت مرجع ویرایش شد.

با احتساب مکان قبلی تاپیک چون مربوط به 1.8 بوده آموزش به بخش آموزش تغییرات 1.8 منتقل شد.

با سپاس از شما Heart
نصب و آپدیت انجمن مای بی بی | پلاگین و پوسته | تغییرات داخلی انجمن
نصب و بروزرسانی وردپرس طراحی پوسته های وردپرسی سبک با سئوی بالا
شخصی سازی پوسته های مای بی بی و وردپرس
طراحی سیستم مدیریت محتوای اختصاصی و خاص با برترین زبان های برنامه نویسی دنیا
جهت سفارش در تلگرام: firstboy000@
پاسخ
#4
من این اموزش رو کامل انجام دادم و کار میکنه به درستی
فقط یک مشکلی هست که پلاگین پاسخ پیشرفته رو از کار میندازه و نشون نمیده
راهی هست؟
Confused
نقل‌قول:
پاسخ
#5
در بخش اول صرفا سه خط زیر رو استفاده و جایگذاری کنید.
کد php:
<script type="text/javascript" src="{$mybb->settings['bburl']}/picker/js/colorpicker.js"></script>
<
script type="text/javascript" src="{$mybb->settings['bburl']}/picker/js/skin.js"></script>
<
script type="text/javascript" src="{$mybb->settings['bburl']}/picker/js/cookie.js"></script
نصب و آپدیت انجمن مای بی بی | پلاگین و پوسته | تغییرات داخلی انجمن
نصب و بروزرسانی وردپرس طراحی پوسته های وردپرسی سبک با سئوی بالا
شخصی سازی پوسته های مای بی بی و وردپرس
طراحی سیستم مدیریت محتوای اختصاصی و خاص با برترین زبان های برنامه نویسی دنیا
جهت سفارش در تلگرام: firstboy000@
پاسخ
#6
در بخش headerinclude منظورتون هست؟
این کار رو کردم ولی انتخاب رنگ غیر فعال هست
نقل‌قول:
پاسخ
#7
فایل skin.js درج نشده دوست عزیز. عملیات های گفته شده رو قدم به قدم و بادقت انجام بدید.
در حال حاضر پنل انتخاب رنگ باز میشه ولی... دوتا فایل کالر پیکر به کد ها اضافه شدن و اون فایل که گفتم نیست.
نصب و آپدیت انجمن مای بی بی | پلاگین و پوسته | تغییرات داخلی انجمن
نصب و بروزرسانی وردپرس طراحی پوسته های وردپرسی سبک با سئوی بالا
شخصی سازی پوسته های مای بی بی و وردپرس
طراحی سیستم مدیریت محتوای اختصاصی و خاص با برترین زبان های برنامه نویسی دنیا
جهت سفارش در تلگرام: firstboy000@
پاسخ
 سپاس شده توسطشماره مجازی (۱۴۰۱/۸/۲۶، ۰۱:۴۷:۵۶ صبح) ، گراف مسنجر (۱۴۰۱/۱۰/۳، ۰۴:۱۰:۲۲ صبح) ، چارتر ۴۲۴ (۱۴۰۲/۹/۱۲، ۱۵:۰۹:۳۶ عصر)


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان