آموزش جامع تغییر رنگ قالب کاسپین

در این بخش میتوانید آموزش های مربوط به نیوک را مشاهده فرمائید.
نمایه کاربر
kassra
کاربر فعال
کاربر فعال
پست: 360
تاریخ عضویت: شنبه ۱۹ مرداد ۱۳۸۷, ۱۲:۰۰ ق.ظ
محل اقامت: تهران
تشکر کرده: 32 دفعه
تشکر شده: 45 دفعه
تماس:

آموزش جامع تغییر رنگ قالب کاسپین

پست توسط kassra »

سلام به دوستان عزیز
بدون مقدمه : آموزش تغییر رنگ قالب کاسپین
1) اول از همه شما باید Combo هر رنگی رو که می خواهید بدونید. Combo ها کد های رنگ ها هستند که شما برای پیدا کردن کد رنگی که می خواهید نه نیازه نرم افزاری نصب کنید نه هیچ چیز دیگری فقط نیازه به این آدرس برید و رنگی که می خواهید رو انتخاب کنید و کد(یا همون Combo) اون رنگ رو بگیرید:
http://www.colorcombos.com/combotester. ... or0=FFFFFF
خب شما در فیلدی که موجوده و به صورت پیشفرض FFFFFF# هست Combo هر رنگی رو که می خواهید بنویسید تا رنگ مورد نظردر زیر همون قسمت نمایان بشه همچنین می تونید روی عکس کوچک
تصویر
که در سمت راست صفحه هست استفاده کنید تا پنجره ColourMod باز بشه و شما بتونید هر رنگی رو که می خواهید انتخاب کنید و کد اون رو هم که بالای همون پنجره ColourMod نشون داده میشه بردارید.

همچنین برای ویرایش بهتر کد ها لازم است تا نرم افزار ++NotePad را دانلود کنید
دانلود نرم افزار: http://www.persian9.ir/downloads/progra ... _5-4-5.zip
با عرض پوزش چون این فایل روی سایتم آپلود شده و نتوانستم اینجا پیوست کنم(خدا می داند چرا) مجبور به پسورد گذاری هستم: www.persian9.ir
پیوست ها
2009-08-09_121038.jpg
2009-08-09_121038.jpg (33.39 کیلو بایت) مشاهده 3235 مرتبه
آخرین ويرايش توسط 2 on kassra, ويرايش شده در 0.


نمایه کاربر
kassra
کاربر فعال
کاربر فعال
پست: 360
تاریخ عضویت: شنبه ۱۹ مرداد ۱۳۸۷, ۱۲:۰۰ ق.ظ
محل اقامت: تهران
تشکر کرده: 32 دفعه
تشکر شده: 45 دفعه
تماس:

مرحله1) تغییر رنگ متن و لینک

پست توسط kassra »

خب مرحله1) تغییر رنگ متن و لینک
برای تغییر رنگ متن در خط 1 باید مقداری را که در شکل مشخص کردم عوض کنید تا رنگ متن های معمولی (نه لینک ها) عوض شود
تذکر به یاد داشته باشید که قبل از هر Combo یک علامت # وجود دارد که نباید حذف بشود

کد: انتخاب همه

color:#666

تصویر
برای دیدن تصویر واضح روی آن کلیک کنید

خب حالا برای تعویض رنگ لینک ها باید Combo یی که در خط 3 در شکل نشان دادم رو عوض کنید

کد: انتخاب همه

color:#666

تصویر
برای دیدن تصویر واضح روی آن کلیک کنید

مرحله2 در پست بعد
نمایه کاربر
kassra
کاربر فعال
کاربر فعال
پست: 360
تاریخ عضویت: شنبه ۱۹ مرداد ۱۳۸۷, ۱۲:۰۰ ق.ظ
محل اقامت: تهران
تشکر کرده: 32 دفعه
تشکر شده: 45 دفعه
تماس:

مرحله2) تغییر رنگ Background

پست توسط kassra »

مرحله2) تغییر رنگ Background
برای تغییر رنگ Background باید در خط 1 Combo کد زیر را ویرایش کنید:

کد: انتخاب همه

background-color:#87d1de
تصویر
پیوست ها
Background.jpg
Background.jpg (54.32 کیلو بایت) مشاهده 3160 مرتبه
آخرین ويرايش توسط 1 on kassra, ويرايش شده در 0.
نمایه کاربر
kassra
کاربر فعال
کاربر فعال
پست: 360
تاریخ عضویت: شنبه ۱۹ مرداد ۱۳۸۷, ۱۲:۰۰ ق.ظ
محل اقامت: تهران
تشکر کرده: 32 دفعه
تشکر شده: 45 دفعه
تماس:

مرحله3) تغییر رنگ هدر

پست توسط kassra »

مرحله3) تغییر رنگ هدر
خب ابتدا می خواهیم قسمتی که دکمه ها قرار دارند را تغییر رنگ بدهیم: برای اینکار باید عکس Header_bala_vasat.png را ویرایش کنیم(مکانی که این عکس قرار می گیرد در تصویر با شماره 1 نشان داده شده)(این عکس فضای میانی و دور دکمه ها را پر می کند)(مکانی که عکس قرار می گیرد را قرمز کرده ام)
تصویر

تذکر: عکس Header_bala_vasat.png بسیار کوچک و نازک است و دارای شیارهای سفید و خاکستری میان آن است که همان خطوط سفید و خاکستری افقی در قسمت وسط را تشکیل می دهند
قست2) حالا نوبت دکمه ها در حالت غیر فشرده است(زمانی که موس روی آن نرفته) برای تغییر رنگ دکمه ها (در حالت غیر فشرده) و بخش اطراف آن باید تصویر Header_topmenu_button.png را ویرایش کنید
هنگامی که موس خود را روی دکمه می برید رنگ دکمه تغییر و کمی تیره تر می شود برای عوض کردن رنگ دکمه (رنگ دکمه زمانی که موس روی آن قرار می گید) باید تصویر Header_menu_break.png را ویرایش کنید
تذکر: اندازه عکس Header_menu_break.png بسیار کوچک و باید در ویرایش آن دقت کنید.
پیوست ها
شماره یک
شماره یک
header_main.jpg (54.54 کیلو بایت) مشاهده 3155 مرتبه
نمایه کاربر
kassra
کاربر فعال
کاربر فعال
پست: 360
تاریخ عضویت: شنبه ۱۹ مرداد ۱۳۸۷, ۱۲:۰۰ ق.ظ
محل اقامت: تهران
تشکر کرده: 32 دفعه
تشکر شده: 45 دفعه
تماس:

مرحله4) تغییر رنگ هدر قسمت های کناری

پست توسط kassra »

مرحله4) تغییر رنگ هدر قسمت های کناری
قسمت های کناری نیز از دو قسمت تشکیل شده
قسمت 1 گوشه ها) سمت چپ و راست تا نزدیک دکمه ها را عکس Header_bala_bg.png پر می کند (این قسمت را قرمز کرده ام) پس برای ویرایش رنگ این قسمت باید عکس نازک Header_bala_bg.png رایرایش کنید.
تصویر
روی تصویر کلیک کنید تا عکس واضح تر را ببینید.

تذکر: دقت کنید که در انتهای این عکس یک تکه خاکستری رنگ است که همان نوار خاکستری افقی را تشکیل میدهد

قسمت2 گوشه های چسبیده به دکمه ها) برای تغییر در این قسمت باید عکس های نازک Header_bala_chap.png برای قسمت چپ و Header_bala_rast.png برای قسمت راست را ویرایش کنید
تصویر
روی تصویر کلیک کنید تا عکس واضح تر را ببینید.

تذکر: این بخش به خاطر این دو قسمت شده که در قسمت دوم سایه دکمه ها قرار گرفته پس به یاد داشته باشید که در ویرایش عکس های Header_bala_chap.pn و Header_bala_rast.png سایه های موجود را نیز در نظر بگیرید تا قالب طبیعی تر جلوه کند
تذکر 2: این دو عکس دارای یک تکه خاکستری رنگ هستند که همان نوار خاکستری افقی را تشکیل میدهد.

برای تغییر رنگ متن روی دکمه ها کومبو کد زیر رو در خط 12 ویرایش کنید:

کد: انتخاب همه

color:#666

تصویر
نمایه کاربر
kassra
کاربر فعال
کاربر فعال
پست: 360
تاریخ عضویت: شنبه ۱۹ مرداد ۱۳۸۷, ۱۲:۰۰ ق.ظ
محل اقامت: تهران
تشکر کرده: 32 دفعه
تشکر شده: 45 دفعه
تماس:

پست توسط kassra »

مرحله 5) تغییر رنگ متن های هدر
قسمت1) بالا سمت راست (خوش آمدید) : ویرایش خط 14

کد: انتخاب همه

color:#FFF
قسمت2) بالا سمت چپ (تاریخ و روز) : ویرایش خط 15

کد: انتخاب همه

color:#FFF

تصویر

مرحله6) برای تغییر تصویر هدر باید دو عکس را ویرایش کنید 1) Header_bg که قسمت بزرگتر است 2) logo.gif که قسمت کوچکتر است (Header_bg خود عکس logo.gif را نیز دربر دارد و logo.gif روی آن قرار گرفته)
تصویر
آخرین ويرايش توسط 1 on kassra, ويرايش شده در 0.
نمایه کاربر
kassra
کاربر فعال
کاربر فعال
پست: 360
تاریخ عضویت: شنبه ۱۹ مرداد ۱۳۸۷, ۱۲:۰۰ ق.ظ
محل اقامت: تهران
تشکر کرده: 32 دفعه
تشکر شده: 45 دفعه
تماس:

مرحله7) تغییر رنگ کلی بدنه

پست توسط kassra »

مرحله6) تغییر رنگ بدنه
شما با تغییر این قسمت بخش هایی رو که در تویر قرمز کرده ام را تغییر رنگ می دهید
برای این کار باید در خط 16 کومبو رنگ کد رو عوض کنید.

کد: انتخاب همه

background-color:#FFF

تصویر


تصویر
برای مشاهده تصویر به صورت واضح تر روی آن کلیک کنید

تذکر: تصویر را در اندازه بزرگ ببینید : دقت کنید که یک قسمت نیز در بالا سمت راست قرمز شده پس در تغییر دادن رنگ در مرحله های بعد ، آن را نیز در نظر داشته باشید
نمایه کاربر
kassra
کاربر فعال
کاربر فعال
پست: 360
تاریخ عضویت: شنبه ۱۹ مرداد ۱۳۸۷, ۱۲:۰۰ ق.ظ
محل اقامت: تهران
تشکر کرده: 32 دفعه
تشکر شده: 45 دفعه
تماس:

پست توسط kassra »

مرحله8 ) تغییر رنگ سایه ها:
برای تغییر رنگ سایه های سمت راست و چپ به ترتیب باید عکس های Main_saye_rast.png و Main_saye_chap.png را ویرایش کنید(قسمتی را که پس از ویرایش تغییر می کن را قرمز کرده ام)
تصویر
در ویرایش سایه ها دقت کنید تا طبیعی بودن قالب حفظ شود اما در صورت تغییر رنگ Background توصیه می کنم که سایه ها رو عوض نکنید چون رنگی که انتخاب شده بسیار عالیست و با هر رنگ دیگری می خواند
نمایه کاربر
kassra
کاربر فعال
کاربر فعال
پست: 360
تاریخ عضویت: شنبه ۱۹ مرداد ۱۳۸۷, ۱۲:۰۰ ق.ظ
محل اقامت: تهران
تشکر کرده: 32 دفعه
تشکر شده: 45 دفعه
تماس:

مرحله9) تغییر رنگ منو

پست توسط kassra »

مرحله8 ) تغییر رنگ منو
منو 7 تکه است 1) قالب کلي منو 2) عکس "برو" 3) فيلد جستجو 4) حرف هاي "پ" که اندازه فونت رو مشخص مي کنه 5) و يک خط کوچک که سمت راست حرف "پ" کوچک است. 6) یک خط کوچک دیگر که سممت چپ "برو" است و 7) یک خط کوچک دیگر در سمت راست فلش (همان فلشی که با کلیک روی آن لوگو سایت بسته می شود)
تکه1) قالب کلی منو: برای تغییر رنگ قسمت اصلی منو باید تصویر Header_menu.png رو ویرایش کنید(محلی را که این تصویر آن را پر می کند را قرمز کرده ام)
تصویر
تذکر این عکس بسیار نازک و کوچک است و به گونه ای طراحی شده که پس از پر کردن منو آن را برجسته نشان دهد پس یرای تغییر آن به گونه ای عمل کنید که طبیعی بودن منو و برجستگی آن حفظ شود
تکه2) برای تغییر "برو" تصویر Header_search_button.png را ویرایش کنید(گوشه های این عکس قسمتی از نوار منو را هم تشکیل می دهند دقت کنید)
تکه3) قسمت 1: فیلد جستوجو برای تغییر رنگ فیلد جستجو باید تصویر Header_search_bg.png را ویرایش کنید.شما با اینکار تقریباً نصف این فیلد را ویرایش کرده اید (قسمت قرمز)(این قسمت دارای سایه است در ویرایش آن دقت کنید)
تصویر
تکه3) قسمت 2: همان طور که می بینید یک قسمت کوچک در زیر قسمت قرمز شده باقی می ماند برای تغییر رنگ این قسمت باید در خط 28 کومبو رنگ کد زیر را تغییر دهید.

کد: انتخاب همه

background-color:#FFF
[تصویر

تکه4) برای تغییر رنگ عکس حرف های "پ" از کوچک به بزرگ به ترتیب تصویرهای Fontsize_small.png و Fontsize_medium.png و Fontsize_large.png را ویرایش کنید
تکه5و6و7) برای تغییر رنگ این خطوط تکافیست تصویر Header_menu_break.png را ویرایش کنید (در ویرایش این تصویر کوچک دقت کنید تا طبیعی بودن قالب حفظ شود)
آخرین ويرايش توسط 2 on kassra, ويرايش شده در 0.
نمایه کاربر
kassra
کاربر فعال
کاربر فعال
پست: 360
تاریخ عضویت: شنبه ۱۹ مرداد ۱۳۸۷, ۱۲:۰۰ ق.ظ
محل اقامت: تهران
تشکر کرده: 32 دفعه
تشکر شده: 45 دفعه
تماس:

مرحله9) تغییر رنگ فونت های منو

پست توسط kassra »

مرحله8 ادامه)
وقتی موس را روی فیلد جستجوی می برید رنگ اطراف آن تغییر می کند(در حالت پیشفرض رنگ صفید و خاکستری است) برای تغییر این رنگ دومی باید در خط 29 کومبو رنگ کد زیر را ویرایش کنید:

کد: انتخاب همه

hover{border:1px solid #bdbdbd;}
همچنین وقتی روی فیلد کلیک می کنید و می خواهید در آن چیزی بنویسید باز رنگ اطرف آن تغییر می کند برای تغغیر رنگ سومی باید در خط 25 کومبو کد زیر را ویرایش کنید:

کد: انتخاب همه

focus{border:1px solid #999;}
تغییر رنگ فونت های منو:
برای تغییر رنگ فونت آخرین اخبار (به شکل دقت کنید) باید در خط 32 کومیو رنگ کد زیر ویرایش کنید

کد: انتخاب همه

color:#390;

تصویر

وقتی در همین قسمت روی لینک اخبار می روید رنگ آن تغییر می کند.برای وبرایش این قسمت باید در خط 33 کومبو کد زیر را ویرایش کنید.

کد: انتخاب همه

hover{color:#6c3
آخرین ويرايش توسط 1 on kassra, ويرايش شده در 0.
نمایه کاربر
kassra
کاربر فعال
کاربر فعال
پست: 360
تاریخ عضویت: شنبه ۱۹ مرداد ۱۳۸۷, ۱۲:۰۰ ق.ظ
محل اقامت: تهران
تشکر کرده: 32 دفعه
تشکر شده: 45 دفعه
تماس:

پست توسط kassra »

مرحله9) تغییر رنگ بلوک ها و زیرشان
خب در مرحله 6) دیدید که یک قسمت زیر بوک ها و اخبار تغییر رنگ پیدا نکرده برای تغییر رنگ این قسمت ها باید تصویر Contetnt_bg.png را ویرایش کنید(قسمتی که تغییر می کند را قرمز کرده ام)
تصویر

تغییر رنگ سربرگ بلوک ها (فقط بلوک ها نه اخبار): برای اینکار باید تصویر Block_title.png را ویرایش کنید (قسمتی که تغییر می کند را قرمز کرده ام)

تصویر
نمایه کاربر
kassra
کاربر فعال
کاربر فعال
پست: 360
تاریخ عضویت: شنبه ۱۹ مرداد ۱۳۸۷, ۱۲:۰۰ ق.ظ
محل اقامت: تهران
تشکر کرده: 32 دفعه
تشکر شده: 45 دفعه
تماس:

پست توسط kassra »

مرحله10) رسیدیم به فوتر
قسمت 1) برای تغییر رنگ قسمت اول ازد فوتر (قسمتی را که قرمز کرده ام) باید تصویر Footer_back_bg.png را ویرایش کنید.

تصویر

تذکر: سایه دیگر جزئیات را در ویرایش تصویر در نظر داشته باشید

قسمت 2) برای ویرایش قسمت دوم (قسمتی را که قرمز کرده ام) باید در خط 43 در انتهای خط کومبو کد زیر را ویرایش کنید:

کد: انتخاب همه

background-color:#b1de27

تصویر

قسمت 3) برای ویرایش قسمت سایه های فوتر (قسمتی را که قرمز کرده ام) باید تصاویر Footer_saye_rast.png و Footer_saye_chap.png را ویرایش کنید(به ترتیب برای طرف های راست و چپ)

تصویر
نمایه کاربر
kassra
کاربر فعال
کاربر فعال
پست: 360
تاریخ عضویت: شنبه ۱۹ مرداد ۱۳۸۷, ۱۲:۰۰ ق.ظ
محل اقامت: تهران
تشکر کرده: 32 دفعه
تشکر شده: 45 دفعه
تماس:

مرحله10)ادامه

پست توسط kassra »

مرحله10)قسمت4) برای ویرایش دو قسمتی که در تصویر ذیل قرمز کرده ام (باید عکس را در اندازه بزرگ ببینید) می بایست عکس های Footer_b_chap_shadow.png و Footer_b_rast_shadow.png را به ترتیب برای سمت های چپ و راست ویرایش کنید.

تصویر
برای دیدن عکس در اندازه بزرگ روی آن کلیک کنید.

قسمت5) برای تغییر منوی فوتر باید عکس Footer_menu.png را ویرایش کنید (قسمتی را که این تصویر پر می کند را قرمز کرده ام.
تصویر
تذکر: در هنگام ویرایش ای عکس به جزئیات دقت کنید.

قسمت6) برای تغییر رنگ خط های بین نوشته های منوی فوتر در انتهای خط 49 کومبو ککد زیر را ویرایش کنید

کد: انتخاب همه

color:#999

تصویر

قسمت7) برای تغییر رنگ خط زیر منوی فوتر باید در خط باید در انتهای خط 51 کومبو رنگ کد زیر را ویرایش کنید

کد: انتخاب همه

background-color:#dfdede

تصویر
برای دیدن عکس در اندازه بزرگ روی آن کلیک کنید.
نمایه کاربر
kassra
کاربر فعال
کاربر فعال
پست: 360
تاریخ عضویت: شنبه ۱۹ مرداد ۱۳۸۷, ۱۲:۰۰ ق.ظ
محل اقامت: تهران
تشکر کرده: 32 دفعه
تشکر شده: 45 دفعه
تماس:

پست توسط kassra »

مرحله10) قسمت8 ) برای تغییر رنگ قسمت اصلی فوتر (در تصویر زیر قرمز شده) یاید تصویر Footer_bg.png را ویرایش کنید
تصویر
تذکر: در هنگام ویرایش به جزئیاتی که موجب برجستگی تصویر شده دقت کنید

قسمت9 و آخرین قسمت) برای تغییر رنگ آخرین قسمت (که در تصویر قرمز کرده ام) باید در ابتدای خط 52 کوبو رنگ کد زیر را ویرایش کنید

کد: انتخاب همه

background-color:#8cca01

تصویر



پایان
tabrizianmehrdad
کاربر جدید
کاربر جدید
پست: 1
تاریخ عضویت: دوشنبه ۹ مرداد ۱۳۹۱, ۱:۰۲ ب.ظ

Re:

پست توسط tabrizianmehrdad »

[PHP][/PHP] [PHP][/PHP] [PHP][/PHP] [PHP][/PHP]
kassra نوشته شده:مرحله9) تغییر رنگ بلوک ها و زیرشان
خب در مرحله 6) دیدید که یک قسمت زیر بوک ها و اخبار تغییر رنگ پیدا نکرده برای تغییر رنگ این قسمت ها باید تصویر Contetnt_bg.png را ویرایش کنید(قسمتی که تغییر می کند را قرمز کرده ام)
تصویر

تغییر رنگ سربرگ بلوک ها (فقط بلوک ها نه اخبار): برای اینکار باید تصویر Block_title.png را ویرایش کنید (قسمتی که تغییر می کند را قرمز کرده ام)

تصویر
موضوع جدید ارسال پست

بازگشت به “آموزش و مقالات - Learning & Articles”