به گزارش دریچه فناوی گروه فضای مجازی باشگاه خبرنگاران جوان؛ یکی از مسائلی که در طراحی برای شما پیش خواهد آمد تغییراتی است که به مرور زمان بنا به تغییر در قالب و یا جهت همخوانی با مرورگرها و پرداختن به نکات ریز قالب در style sheet قالبتان باید اعمال کنید.

شاید بعد از یک زمان خاص استفاده از قالب، خواهان تغییراتی در رنگ بندی بخش های مختلف قالب، تغییر فونت، تغییر رنگ متن، جا به جایی مکان یک نوشته، تغییراتی در نوع نمایش li و ul، تغییر ظاهر مکان نما باشید که البته ممکن است پرداختن به همه ی این موارد لیستی حاوی تعداد متفاوتی از این اصلاحیه ها درست شود که مجبور باشید در css قالب خودتان اعمال کنید.


در اکثر اوقات تغییرات جزئی متعددی را می‌خواهید اعمال کنید، لیست کردن این تغییرات، پیدا کردن استایل مورد نظر در فایل css و اعمال تغییرات جدید و ذخیره ی فایل به این صورت وقت گیر خواهد بود و شما را دچار سردرگمی خواهد کرد.

معمولاً برای ایجاد یک نسخه ی جدید از استایل شیت و به اصطلاح upgrade کردن فایل css به همین روش سنتی پیش خواهیم رفت. اما اگر وقت برایتان مهم است و حوصله ی دردسر را ندارید بهتر است  راه حلی ساده تر و کاربردی تر در نظر بگیریم. در این روش نیازی به دستکاری فایل (های) css قالب نیست و اضافه بر داشتن فایل های اصلی بدون تغییر ، تغییرات جدید رو اعمال خواهیم کرد.

نحوه کار:
یک فایل به نام custom.css بسازید و در پوشه ی قالب وردپرس آپلود کنید. بعد از آپلود کد زیر رو در فایل header.php بین تگهای و قرار بدهید:

/custom.css” />

با اضافه کردن این خط در فایل header.php، این css روی قالب شما موثر خواهد بود. حال وقت اعمال تغییرات است. فرض کنید می خواهید تمام لینک هایی که در تگ body قرار گرفته اند، صفات دیگری داشته باشند، مثل رنگ و یا شمایل نوشته.

در css اصلی شما این صفات به صورت زیر نوشته شده اند:

a { color: gray; text-decoration:underline; }

a:visited { color: red;text-decoration:underline; }

a:hover { color:black; text-decoration:underline;}

برای تغییر این صفات بدون ویرایش فایل css اصلی، به دو روش می توانیم تغییر استایل را اعمال کنیم. (قصد داریم در این آموزش فقط رنگ لینک ها را تغییر بدهیم) :

روش اول:

در همان فایل header.php به دنبال تگ باشیم و به این تگ یک کلاس اضافه کنیم.



بعد از اضافه کردن کلاس و ذخیره ی فایل هدر ، فایل custom.css ر باز کنید و خطوط زیر را درون فایل اضافه کنید:

a { color: purple !Important; }

a:visited { color: blue !Important; }

a:hover { color: yellow !Important; }

حال با ذخیره ی فایل و رفرش وب سایت متوجه تغییرات خواهید شد.

روش دوم :

در این روش ما از کلید !Important استفاده می کنیم. توضیحی که در مورد !Important باید دهیم این است که با استفاده از این ویژگی استایل شما بر روی استایل مشابه دیگه overwrite میشود و استایل های قبلی مورد استفاده قرار نمی گیرد. این ویژگی در مواقعی هم که شما حتماً خواهان این هستید که یک صفت در مرورگر یک کاربر که از لحاظ نمایش صفحات وب سفارشی شده همیشه به یک صورت نمایان شود مورد استفاده قرار میگیرد.

حال فایل custom.css را باز کرده و این بار به صورت زیر خطوط رو وارد کنید:

a { color: purple !Important; }

a:visited { color: blue !Important; }

a:hover { color: yellow !Important; }

در این روش نیازی به تعریف کلاس نیست و با ذخیره ی فایل و رفرش صفحه می توانید تغییرات را مشاهده کنید.


منبع: فناوری صبحانه
--------------------
کپی شده : yjc.ir