+- مرجع پارسی MyBB (https://community.mybbiran.com)
+-- انجمن: نسخه MyBB 1.8 (https://community.mybbiran.com/forum-149.html)
+--- انجمن: آموزش ها (https://community.mybbiran.com/forum-151.html)
+---- انجمن: آموزش تغییرات (https://community.mybbiran.com/forum-155.html)
+---- موضوع: [آموزش] تغییر رنگ پوسته - انتخاب رنگ قالب جی کوئری (/thread-17903.html)
[آموزش] تغییر رنگ پوسته - انتخاب رنگ قالب جی کوئری - saeed_same - ۱۳۹۴/۲/۱۰
برای اینکه بتوانید پوسته خود را تغییر رنگ بدهید و این امکان را به کاربر بدهید تا بتواند پوسته را به رنگ دلخواه خود در آورد با ما همراه شوید
ابتدا پیوست را دانلود کرده و بعد کد های زیر را در 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";کار تمام است و از پوسته خود با چندین میلیون رنگ لذت ببرید
Mybb jQuery color palette.zip (اندازه: 93.67 KB / تعداد دفعات دریافت: 49)
ترجمه : انجمن پارسیان
منبع :
http://community.mybb.com/thread-158934.html
RE: آموزش تغییر رنگ پوسته - Deshneh - ۱۳۹۴/۲/۱۰
به نظرم عنوان موضوع با محتواش متناسب نیس ...
RE: آموزش تغییر رنگ پوسته - انتخاب رنگ قالب جی کوئری - firstboy000 - ۱۳۹۴/۲/۱۰
عنوان موضوع با توجه به سایت مرجع ویرایش شد.
با احتساب مکان قبلی تاپیک چون مربوط به 1.8 بوده آموزش به بخش آموزش تغییرات 1.8 منتقل شد.
با سپاس از شما
RE: [آموزش] تغییر رنگ پوسته - انتخاب رنگ قالب جی کوئری - hp618 - ۱۴۰۰/۸/۲۶
من این اموزش رو کامل انجام دادم و کار میکنه به درستی
فقط یک مشکلی هست که پلاگین پاسخ پیشرفته رو از کار میندازه و نشون نمیده
راهی هست؟
RE: [آموزش] تغییر رنگ پوسته - انتخاب رنگ قالب جی کوئری - firstboy000 - ۱۴۰۰/۸/۲۶
در بخش اول صرفا سه خط زیر رو استفاده و جایگذاری کنید.
کد 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>
RE: [آموزش] تغییر رنگ پوسته - انتخاب رنگ قالب جی کوئری - hp618 - ۱۴۰۰/۸/۲۶
در بخش headerinclude منظورتون هست؟
این کار رو کردم ولی انتخاب رنگ غیر فعال هست
RE: [آموزش] تغییر رنگ پوسته - انتخاب رنگ قالب جی کوئری - firstboy000 - ۱۴۰۰/۸/۲۸
فایل skin.js درج نشده دوست عزیز. عملیات های گفته شده رو قدم به قدم و بادقت انجام بدید.
در حال حاضر پنل انتخاب رنگ باز میشه ولی... دوتا فایل کالر پیکر به کد ها اضافه شدن و اون فایل که گفتم نیست.