נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך דרופל - CSS ייחודי לדף לפי כתובת

מחבר:
בתאריך:

הרבה פעמים אנחנו רוצים להוסיף כללי CSS ייחודיים לדף מסוים לפי URL או לפי סוגו של הדף (עיצוב שונה ל-article ואחר ל-page). מדובר בתיקונים קטנים, ובמקום להתאמץ יותר מדי, אפשר להוסיף אותם בזריזות ובפשטות באמצעות רכיב ששמו CSS Injector. רכיב זה מוסיף כללי CSS רק בתנאים מסוימים: לדף ספציפי (לפי שם ה-node), לפי סוג הדף (article, page) או אפילו לפי שעות היממה. לרכיב זה גרסאות יציבות שמיועדות לדרופל 6 ולדרופל 7, ואני מדגים את פעולתו בדרופל 7.  

כדי להדגים את פעולתו של הרכיב, נאמר שאנחנו רוצים למקם תמונה מימין לטקסט בדף מסוים בלבד ששמו node/2. נסתכל על המצב לפני השינוי ב-CSS. אפשר לראות שהתמונה נמצאת מעל לפסקה, אבל אני רוצה שהתמונה תמצא מימין לפסקה.

css ספציפי לדף

 

נזהה את האלמנט שאותו אנחנו רוצים לשנות

קליק ימני בעכבר על התמונה, ואז "בדוק מרכיב", יאפשר לנו לזהות שמדובר באלמנט מסוג img (אפשר לראות את זה בחלונית שתפתח בתחתית הדף). נעלה בהיררכיה ונראה שהתמונה שייכת למחלקה field-type-image, וכשנמשיך לעלות עוד בהיררכיה נראה ב-<body> את המחלקות שאליהן שייך הדף. בגלל שאני רוצה לשנות את הדף ששמו node_2, אני אבחר במחלקה page-node-2. כלל ה-CSS הוא float:right. נכתוב את הכלל:

.page-node-2 .field-type-image {float:right;}

עכשיו נוסיף את הקוד דרך הממשק של CSS Injector.

 

כדי לשנות את ה-CSS בדף המסוים

1. נוריד ונתקין את הרכיב CSS Injector

2. לצורך קונפיגורציה של הרכיב, נבחר בתפריט המנהלן באפשרות Configuration, ובדף שנפתח, תחת Development נבחר באפשרות Css injector. האפשרות שתפתח נראית כך:

 

איך להוסיף כלל חדש לCSS Injector

נלחץ על Create a new rule כדי להוסיף כלל חדש.

3. נוסיף כלל חדש, נתחיל מלתת שם לכלל (Title) ונוסיף את קוד ה-CSS:

Title: node#2_picture_to_right

CSS code: .page-node-2 .field-type-image {float:right;}

 

של דרופלCSS Injector

נוסיף את הדפים שעליהם נפעיל את הכלל תחת ההגדרה pages. במקרה זה, אני רוצה להוסיף את הכלל לnode/2, אבל באותה מידה הייתי יכול להשתמש ב-blog בשביל סוג התוכן בלוג או ב-<front> בשביל דף הבית.

סוג ה-media מאפשר ליצור כללים ל-screen או ל-print (פלט מודפס). נשאיר אפשרות זו על all.

נשאיר את הבחירה ב-preprocess.

בסוף נשמור את השינויים.

 

איך להוסיף כלל חדש לCSS Injector

 

אפשר לראות את התוצאה. התמונה צפה ימינה, והפסקה תפסה את מקומה משמאל:

 

איך להוסיף כלל חדש לCSS Injector

במידה ונרצה להוסיף כללים נוספים לאותו דף נוכל להוסיף אותם בהמשכו של הכלל שיצרנו.

הוסף תגובה חדשה

 

= 6 + 7