افزودن سی اس اس سفارشی به المنتور

افزودن کد سی اس اس به افزونه المنتور

در این مقاله می‌خواهیم در رابطه با قرار دادن کدهای سفارشی CSS در افزونه المنتور صحبت کنیم. در واقع برای هر تغییری که بخواهیم درون سایت خود ایجاد کنیم ولی المان‌های آن در المنتور وجود نداشته باشد، باید از کدهای CSS استفاده کنیم.

حالا برای اینکه بتوانید بر روی المان‌های خود کدهای CSS اعمال کنید، باید به آن‌ها کلاس یا آیدی دهید. برای این کار ابتدا المان خود را انتخاب کنید. سپس به تب پیشرفته بروید و در قسمت کلاس CSS نام بخشی که می‌خواهید برای آن کد بنویسید را وارد کنید. البته توجه داشته باشید، عبارتی که انتخاب کردید نباید با حروف بزرگ انگلیسی یا عدد شروع شده باشد. همچنین اگر عبارت شما دو کلمه دارد باید بین آن دو حتما از علامت آندرلاین یا _ استفاده کنید.

به عنوان مثال اگر بخواهید به اولین سربرگ خود کد CSS دهید باید در قسمت کلاس CSS عبارت title_first را وارد کنید. به عبارت دیگر انگار که شما المان مورد نظر را فرا می‌خوانید و المنتور را متوجه می‌کنید که قرار است برای چه قست کد نویسی کنید.

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

برای شروع کد نویسی ابتدا کلاسی که برای المان خود تعیین کرده بودید را در خط اول وارد نمایید و در ابتدای عبارت یک نقطه بگذارید. سپس یک کروشه باز کنید و کد مورد نظر خود را بنویسید. همانطور که می‌دانید هرخط یا به عبارت دیگر هر کد را باید با علامت Smicolon (نقطه ویرگول) ببندید.

همچنین می‌توانید به المان خود شناسه دهید. قابل ذکر است که دو المان می‌توانند یک کلاس یکسان داشته باشند ولی هرگز یک شناسه برای چندین المان قابل استفاده نیست. تصور کنید که گاهی می‌خواهید از المان یا حتی ردیفی که به آن کد CSS داده‌اید کپی بگیرید و یک ردیف یا المان دیگر دقیقا مانند همان داشته باشید. با این تفاوت که به عنوان مثال دوست دارید رنگ پس زمینه یکی از سربرگ‌ها تغییر کند.

برای این کار کافی است به المانی که می‌خواهید تغییر کند یک شناسه دهید. تعیین عبارت شناسه هم دقیقا مانند کلاس CSS است. پس از اینکه شناسه خود را انتخاب کردید دوباره به قسمت CSS سفارشی بروید و تمام کدهای قبلی که برای المان وارد کرده بودید را کپی کرده و  دوباره در پایین کدها قبلی پیست نمایید. با این تفاوت که در خط اول کدی که پیست می‌کنید باید از علامت شارپ و شناسه CSS استفاده کنید. سپس می‌توانید تغییرات دلخواهتان را بر روی کدها اعمال نمایید.

سخن پایانی

متوجه شدید که تا چه اندازه کدهای CSS می‌توانند در طراحی سایت به ما کمک کنند. به همین خاطر حتما به شما پیشنهاد می‌کنیم که تا حدودی کدنویسی و کار با CSS را یاد بگیرید. امیدواریم که این جلسه از آموزش افزونه المنتور برای شما مفید واقع شده باشد. می‌توانید نظرات و پیشنهادات خود را در قسمت دیدگاه‌های سایت ثبت کنید تا در اولین زمان ممکن همکاران ما به شما پاسخ دهند.