سفارشی سازی قالب روشنایی

برای تغییر پس زمینه این قالب مراحل زیر را دنبال کنید:

1-     تصویر مورد نظرتان را تهیه کنید . بهتر است موراد زیر را در انتخاب تصویر مدنظر قرار دهید:

a.      بهتر است رنگ کلی تصویر پس زمینه تیره باشد.

b.      به اندازه تصویر دقت کنید و از تصاویر با حجم بالا استفاده نکنید و در صورت استفاده با استفاده از نرم افزار های مخصوص حجم تصویر را کاهش دهید.

c.      سعی کنید از تصاویر قابل تکرار استفاده کنید.

2-     تصویر تان را آپلود کنید (میتوانید از Picofile یاPersiangig یا هر سرویس دیگری استفاده کنید) و آدرس تصویر را کپی کنید.

3-     کد قالب روشنایی را دریافت کنید:http://themestudio.blogsky.com/1389/08/11/post-50

4-     فایل کد را بوسیله Notepad یا هر ویرایشگر دیگر باز کنید.

5-     در سطر 13 کد این قالب عبارت زیر را مشاهده میکنید

background:url('http://themestudio.ir/ThemesFiles/Free/lights/images/piano.jpg')#000no-repeatfixed

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

قسمت زرد رنگ آدرس تصویر پس زمینه است که باید آدرس فایل تصویری را که در مرحله2 آپلود کردید را به جای این آدرس جایگزین کنید.

قسمت سبز رنگ مشخص کننده رنگ پس زمینه است که در صورتی که تصویر تان کوچک است و تمام صفحه تان را نمی پوشاند میتوانید رنگ مورد نظرتان را به جای رنگ تعیین شده بنویسید.

قسمت آبی رنگ بسیار مهم است و تعیین کننده نحوه تکرار تصویر تان است و میتواند مقادیر زیر را دریافت کند:

:No-repeat زمانی که تصویرتان بسیار بزرگ است و دوست دارید تصویر به صورت ثابت قرار بگیرد مناسب است.

Repeat-x:  تکرار افقی ، معمولا برای گرادینت ها و تصاویری که در بالای صفحه قرار دارند مناسب است ، بهتر است برای صفحه رنگ پس زمینه مناسب در نظر گرفته شود.

Repeat-y: تکرار عمودی ، معمولا بسیار کم کاربرد است و در شرایط خاص و برای حاشیه ها به کار می رود

Repeat: حالت پیش فرض است و در صورت ننوشتن نیز فعال خواهد شد و تکرار تصویر را در هر دو حالت عمودی و افقی و به صورت کاشی وار تکرار خواهد کرد.

بخش آخر که با رنگ بنفش مشخص شده در مواردی خاص مانند حالتی که دوست داریم تصویر در پس زمینه ثابت باشد به کار میرود و  نوشتنش ضروری نیست.

برای آشنایی بیشتر با تغییرات پس زمینه در CSS به این آدرس مراجعه کنید.

برای مثال:

background:url(‘http://s1.picofile.com/file/6180410460/vbg.gif’) ;

background: url('http://s1.picofile.com/file/6180412472/bg.gif') #008D9F repeat-x ;

کار تمام است و میتوانید کد قالب تان را کپی کنید و از قالب با طرح دلخواه تان لذت ببرید . 

چند نمونه زیبا: