شخصيسازي قالبها و CSS آنها
مقدمه
معماري منعطف و مستحکم دروپال از ويژگيهاي منحصربهفرد آن است. به جر برخي قسمتهاي حساس هسته، شما ميتوانيد همهچيز را در دروپال تغيير داده شخصي کنيد. قبلا هاي مخصوص به خود داشته library هم ديديد که ميتوانيد پوشههاي قالبها، ماژولها و شما مراجعه کرده sites باشيد. حتي اگر به نوشتن کد نيز تمايل داشته باشيد، دروپال به پوشه آنها را اجرا ميکند و نيازي نيست شما به هسته دروپال وارد شده تغييري ايجاد کنيد.
تغييرات عمده اعمالشده توسط کاربران دروپالي به دو بخش تقسيم ميشود: کارکرد جديد(مثل ماژولهاي مشارکتي) و افزايش بهرهوري دروپال براي کاربران و طراحان سايتهاي دروپالي.
حالا دروپال در دوران گذر به سر ميبرد و اخيرا بخش عظيمي از کاربراني که هيچ اطلاعات ندارند، به خيل کاربران دروپالي افزوده شدهاند(شايد PHP دقيق و تجربي در مورد نوشتن کد بسياري از آنها هيچ علاقه و حوصلهاي براي مطالعه بخشهاي مختلف براي انجام چنين امورفني نيز ندارند). به هرحال اين يک امتياز ويژه براي دروپال به شمار ميآيد.
اين بخش در مورد کدنويسي است اما نه کد برنامهنويسي. دروپال نيز مثل ساير سيستمها ) براي تغيير نماي صفحات استفاده CSS ( Sheets Style Cascading و وبسايتها از را براي سايت خود شخصي کنيد. شما مجبور نيستيد براي CSS ميکند. شما ميتوانيد
آنها C SS شخصيسازي قالبها و
آنچه در اين بخش خواهيد آموخت:
قالبها info نگاهي به فايلهاي.
قالبها CSS تغيير فايلهاي
تغيير تصوير پس زمينه
بستهبندي دروپال اضافه شدهاند. قسمتي که ميتوانيد تغيير دهيد سطرهاي script توسط مياني است:
قالب گارلند را تغيير دهيد: CSS اگر ميخواهيد فايل
خودتان امتحان کنيد
CSS تغيير يک فايل
ابتدا بايد فايلهايي که ميخواهيد تغيير دهيد را مشخص کنيد. ممکن است با متغيرهاي هاي راست به چپ script براي CSS مواجه شويد. اين متغيرهاي rt 1 فايلهايي با مارک مورداستفاده قرار ميگيرند.
. به دلايل امنيتي بهتر است ابتدا کپي تمام پوشه قالب را به يک مکان مخصوص 1 از سايت براي کپي پشتيبان منتقل کنيد.
ي که بايد تغيير دهيد را مشخص کنيد. کپي از فايل تهيه کنيد و نام CSS. فايل 2 css. mysite است بايد نام جديد css. style جديدي براي آن انتخاب کنيد. اگر نام آن را ذخيره کنيد. CSS باشد. تغييرات لازم را اعمال کرده فايل
هايي که ميخواهيد تغيير دهيد sheet style قالب را باز کنيد و سطر info. فايل 3 تغيير دهيد. css. mysite را به sheet style را مشخص کنيد. نام
را را ذخيره کنيد. info. فايل 4
D6: admin/settings/performance; D7: admin/config/. به بخش 5 Data Cached Clear مراجعه کنيد. روي گزينه development/performance Save ) کليک کنيد. روي گزينه 7 (در دروپال Caches All Clear ) يا گزينه 6 (در دروپال کليک کنيد. Configuration
ايجاد کنيد. البته اين نکته در مورد برخي سايتها صادق custom سايت خود قالبهاي است نه همه آنها. درواقع کافيست تنها از يک قالب کار خود را آغاز کنيد و از دو تکنيک ساده زير براي شخصيسازي استفاده کنيد:
طراحي شدهاند که توسط کاربران CSS را شخصي کنيد. فايلهاي CSS: CSS - بهترين راه تغيير فونتها، CSS مختلف تغيير يافته شخصي شوند. براي تغيير يک فايل رنگها و ابعاد است. اين پروسه راحتتر از شروع کار با يک طرح ساده است.
- تصاوير پسزمينه: بهترين راه شخصيکردن يک قالب، تغيير تصوير پسزمينه به راحتي ميتوانيد اين کار را انجام دهيد. CSS است. شما با
info نگاهي به يک فايل
فايلهاي دروپالي در پوشه قالبها جاي ميگيرد. قالبهاي دانلودي بايد در پوشه سايت شما قرار گيرند. هرقالب شامل يک پوشه است که حاوي تمام themes / all / sites است. اين فايل شامل نام قالب است info فايلهاي آن است. فايل مهم در اين قسمت فايل شامل info است. هرفايل info. garland همان Garland قالب info به عنوان مثال فايل CSS خلاصهاي از قالب مربوطه است. قسمتي که شما بايد تغيير دهيد همان فايلهاي است.
برخي قالبهاي دروپالي براي شخصيشدن و تغييرات فراوان طراحي شدهاند. يکي از است که با توصيههاي گامبهگام به شما کمک ميکند به نماي دلخواه Zen اين نمونهها خود برسيد.
Garland نگاهي به
را بررسي ميکنيم. اگر آن را با ليست info. garland گارلند 7 اينجا نسخه دروپال قالبهاي دروپالي مقايسه کنيد توضيحات آن صفحه را ميتوانيد مشاهده کنيد. دو فايل به عنوان پيشفرض استفاده ميشود و css. style در اين ليست قرار گرفتهاند: CSS براي رسانههاي نوشتاري مورداستفاده قرار ميگيرد. (نوع رسانه نکته کليدي css. print است که در قسمت اول براکتها مشخص است. ) به صورت پيشفرض يک فايل به اسم فايلي است که مورداستفاده قرار ميگيرد ولي ميتوانيد نام آن را تغيير داده css. style به جاي ديگري در سيستم منتقل کنيد. چندسطر اول فايل با شناسه، نام، توضيحات و اطلاعات نسخه نيازي به تغيير ندارند و همچنين سطرهاي پاياني که به طور اتوماتيک
سطر سوم با يک؛ در آغاز سطر مشخص شده است. اين قالب sheet style از سه سطر out - commented از شيوه ساختارمندي براي شخصيسازي استفاده ميکند. اين سطر کنيد. در ميان فايلهاي اين قالب، uncomment است و براي تغيير آن کافيست آن را نيز وجود دارد. اين يک قاب خالي است. آن را کپي کرده و css. sample _ local فايل هاي sheet style تغيير دهيد و از آن براي کاملکردن سطر css. local نام آن را به به ترتيب آورده ميشوند و CSS شده استفاده کنيد. چون از فايلهاي uncomment پيش از آن را تغيير ميدهد. CSS اين فايل در انتها قرار ميگيرد، تنظيمات آن فايلهاي شما تنها فايلهاي شخصيشده شما را در خود جاي خواهد داد. css. local بنابراين فايل
تغيير تصاوير يک قالب
تصاوير يک قالب بيشترين تاثير را در نماي آن دارند؛ تصاويري که براي تصوير پسزمينه، کليدها و آيکونها مورداستفاده قرار ميگيرند. اگر با تغيير مکان تصاوير، اندازه آنها را تغيير ندهيد، تاثير آنها افزايش مييابد.
. سايت خود را چک کنيد. 6
Slate Acquia نگاهي به
). 24 - 1 است (شکل Themes Notch Top يک قالب قابلدانلود از شرکت Slate Acquia
24 - 1 شکل
طولاني نيست و از همان slate _ acquia اين قالب پيچيدهتر از گارلند است اما فايل هاي فايل sheet style پيروي ميکند. در سطرهاي info. garland ساختار پايهاي فايل ميتوانيد مشخصات قالب چون نمايش لوگو يا نام قالب را مشاهده کنيد. شما ابتدا بايد سطرهاي موردنظر را مشخص کنيد.
است و نام تصوير را جستجو کنيد. به عنوان مثال در نمونه حاضر، از اين کد براي تصوير بزرگ صفحه اصلي استفاده ميشود:
اين هم کدي که براي قراردادن تصوير کوچک در بالاي صفحات محتوا مورداستفاده قرار ميگيرد:
، يک فايل ايجاد کنيد. در مورد مثال حاضر، بايد نام آن CSS. براي تغيير 6 باشد. css. local
استفاده کرديد را بدان اضافه کنيد. نامها را به نامهاي 4. کدي که در مرحله 7 فايلهاي جديد تغيير دهيد. حالا فايل جديد مشابه اين خواهد بود:
D6: admin/settings/performance; D7: admin/config/. به بخش 8 Data Cached Clear مراجعه کنيد. روي گزينه development/performance ) کليک کنيد. روي گزينه 7 (در دروپال Caches All Clear ) يا گزينه 6 (در دروپال کليک کنيد. Configuration Save
. سايت خود را چک کنيد. 9
. حالا ميتوانيد وارد پوشه شده تصاويري که ميخواهيد را جايگزين تصاوير حاضر کنيد. 3 فقط بايد به ياد داشته باشيد که تصاوير شما هم اندازه با تصاوير موجود در پوشه باشند.
. نام تصاويري که حذف کردهايد را براي تصاوير جديد(که وارد کردهايد) وارد کنيد. 4
D6: admin/settings/performance; D7: admin/config/. به بخش 5 (در Data Cached Clear مراجعه کنيد. روي گزينه development/performance ) کليک کنيد. روي گزينه 7 (در دروپال Caches All Clear ) يا گزينه 6 دروپال کليک کنيد. Configuration Save
. سايت خود را چک کنيد. 6
در مورد تصوير پسزمينه بايد به خود قالب مراجعه کرده آن را تغيير دهيد. اکثر قالبهاي قابلدانلود چند تصوير در خود جاي ميدهند تا کاربر تصوير ايدهآل را انتخاب کند. البته در انتخاب تصوير ايدهآل بايد به اندازه آن نيز دقت کرد.
خودتان امتحان کنيد
تغيير يک تصوير پسزمينه
پس از انتخاب يک قالب با تصوير مناسب (با اندازه مناسب)، ميتوانيد قالب را دانلود کرده نصب کنيد و تصوير را جابجا کنيد. ممکن است در فايل قالب، نسخههاي مختلفي از تصوير موردنظر شما وجود داشته باشد. به عنوان مثال ممکن است نسخههاي بزرگتر آن تصوير در صفحه اصلي و نسخههاي کوچکتر در صفحات داخلي مورداستفاده قرار گرفته باشد.
images. محل قرارگيري تصوير پسزمينه را مشخص کنيد. بسياري از قالبها از پوشه 1 براي اين کار استفاده ميکنند و برخي از سابفولدر. در مورد مثال ما، تصاوير پسزمينه در است و نسخه jpg. seascape قرار ميگيرد. تصوير صفحه اصلي سايت cropped / images است. jpg. header – seascape کوچکتر آن براي صفحات کوچکتر
باز Photoshop يا Preview. هرکدام از تصاوير را به کمک يک برنامه مثل 2 کنيد. به اندازه دقيق هرتصوير دقت کنيد.
. اندازه تصوير موردنظر را تغيير دهيد. شفافيت تصوير را نيز کنترل کنيد. 3
. براي تصويري که تغيير دادهايد نام جديد انتخاب کرده آنها را در پوشه تصاوير 4 قالب قرار دهيد. (البته ميتوانيد آنها را هرجا که خواستيد قرار دهيد ولي معمولا اين کار راحتتر است. )
موجود CSS. کد مربوط به تصوير را بيابيد. راحتترين راه استفاده از فايلهاي 5
کارگاه
امتحان
را در سايت خود مشخص کنيم؟ CSS. چگونه بايد نحوه عمل فايلهاي 1
. علاوه بر چککردن اندازه تصاوير جديد، به چه ويژگيهايي بايد توجه کرد؟ 2
چه کاري انجام ميدهند؟ CSS rtl. فايلهاي 3
جوابها
قالب جاي ميگيرند. info. آنها در ليست فايل 1
. شفافيت تصوير را چک کنيد تا مجبور نباشيد تصاوير بزرگ را بيهوده دانلود کنيد. 2
هاي راست به چپ به کار گرفته ميشوند. script. اين فايلها براي مديريت 3
فعاليتها
حالا وقت پيوستن شما به دنياي دروپال است. شما اطلاعات و تجربه کافي براي اين کار گروههايي را org. drupal. groups را کسب کردهايد. شما ميتوانيد با مراجعه به آدرس بيابيد که به شاخه فعاليت شما در دروپال علاقهمندند. حالا دروپال در حال رشد و ورود به فازي نوين است و شما ميتوانيد بخشي از اين آينده روشن باشيد.
خودتان امتحان کنيد
تغيير مکان تصاوير آيکون يا کليد
. از تمام قالب يک کپي تهيه کنيد. 1
در ميان فايلهاي قالب را پيدا کنيد. images. پوشه 2
خلاصه
با اضافهکردن تصاوير و طرحهاي گرافيکي دلخواه ميتوانيد سايت خود را بيشتر شخصي کنيد. بنابراين بايد هنگام انتخاب قالب، به درجه انعطافپذيري آن توجه کنيد. همچنين بايد به ساختار و شيوه نامگذاري فايلها در آن دقت کنيد.
سوال و جواب
و تصاوير، چه تغييرات (آسان) ديگري ميتوان در نماي CSS علاوه بر تغيير سوال: يک سايت دروپالي اعمال کرد؟
) را بيابيد(اگر دادههاي کمي زيادي در charts / project ( Charts ماژول جواب: سايت داريد). حالا ميتوانيد از امکانات مختلف آن چون تغيير و رسم جداول متنوع استفاده به گونههاي گره اوليه خود اضافه کنيد. CCK کنيد. همچنين ميتوانيد يک بخش تصوير
چه قوانيني در مورد استفاده از تصاوير صاحب حق مولف به عنوان تصوير سوال: پسزمينه وجود دارد؟
گزينهها متفاوت است. شما ميتوانيد از تصاوير موجود در قالبها به راحتي جواب: استفاده کنيد. البته با شخصيکردن تصاوير پسزمينه به راحتي ميتوانيد از بروز چنين مشکلي جلوگيري کنيد.
آيا استفاده از تصاوير با اندازههاي مختلف مشکل است؟ سوال:
اين به تنوع آنها بستگي دارد. راحتترين راه تست دو نمونه از آنهاست تا اندازه جواب: آنها کنترل شود. در بسياري از موارد مشکلات کوچکي به وجود ميآيد.
را دوست دارم. چگونه ميتوان از آن استفاده کرد؟ transparent من افکت سوال:
ميتوان به اين افکت دست يافت. چالش مهم ايجاد يک CSS با استفاده از جواب: تصوير با شفافيت بالاست. به تصاوير پسزمينه توجه کنيد چون معمولا يک قسمت از آن type (بالا يا پايين آن) روشنتر يا تيرهتر از ساير قسمتهاست. بدينترتيب ميتوانيد روشن يا تاريک خود را در اين قسمت قرار دهيد. شايد مجبور باشيد چندبار تصاوير را چک را بيابيد. type کنيد تا بهترين تصوير براي