מדריך דרופל 7 – עיצוב ערכת עיצוב: CSS

באחד המאמרים הקודמים במדריך דיברנו על בחירת ערכת עיצוב, כאשר בדרופל יש כמה וכמה ערכות עיצוב שניתן לבחור מהן. לרוע המזל, הסיכוי של ערכת עיצוב, אפילו ערכת עיצוב פרימיום לפגוע בול לצרכים שלכם הוא אפסי, תמיד יש צורך לשנות משהו, לעדכן משהו, להחליף אלמנט גרפי בזה או אחר. עיצוב עבור דרופל הוא אמנות העומדת בפני עצמה ויש אנשים שמתפרנסים מכך לא רע. במדריך הזה ובזה שיבוא אחריו אני אראה איך בדיוק משנים את העיצוב לערכת עיצוב מסוימת. על מנת לעשות את זה יש צורך בהכרות עם HTML ו-CSS (ואם אתם לא מכירים, יש לנו מדריכים לא רעים באתר) וכן הכרות מינימלית מאד מאד עם PHP.

מיקום ערכת העיצוב

על מנת לערוך את ערכת העיצוב, עלינו לדעת היכן היא, אנו נפתח את וובמטריקס, נלחץ על files מצד שמאל למטה:

אנו נגיע לעורך הטקסט של וובמטריקס, זה עורך טקסט מאד נוח התומך גם בהשלמה אוטומטית של HTML ו-CSS – מאד מאד נוח. כל ערכות העיצוב, למעט ערכות העיצוב הדיפולטיביות נמצאות בתיקית sites/all/theme:

כאשר אנו מתקינים את דרופל, התיקיה הזו ריקה לחלוטין, היכן שאר ערכות העיצוב הדיפולטיביות נמצאות? הן נמצאות בתיקית themes הכללית. אם אנו רוצים לערוך ערכת עיצוב דיפולטיבית, עלינו להעתיק אותה מתיקית ה-themes.

זה נראה די מטומטם, נניח שאני רוצה לעשות שינויים בערכת העיצוב הדיפולטיבית garland, למה בדיוק להעתיק אותה ל-sites/all/themes ולא לערוך אותה ישירות בתיקיה שלה? התשובה היא שערכת העיצוב הדיפולטיבית מתעדכנת בעדכון המערכת ואם תערכו בה שינויים בעודה נמצאת בתיקיה הדיפולטיבית שלה, השינויים עלולים להמחק – ראו הוזהרתם!

בואו ונעתיק את תיקית garland (עם Ctrl+C ו-Ctrl+V) מתיקית templates אל תיקית sites/all/templates על מנת שנוכל לערוך אותה:

קובץ ה-info

החלק החשוב ביותר בתיקיה הוא קובץ ה-info שמכיל פרטים שונים בערכת העיצוב אשר יופיעו לנו במסך הניהול – פרטים כמו שם ערכת העיצוב, תיאור שלה, הגרסה שלה וכו' וכו':

בואו ונשנה את הפרטים בקובץ ה-info כרצוננו, נשמור (חשוב לשמור) ואז נכנס לפאנל הניהול -> מראה ונוכל לבחור בערכת העיצוב שלנו:

מעכשיו כל שינוי שנעשה בקבצי ה-CSS ובקבצים האחרים יופיע מייד באתר שלנו.

אגב, אם אנו רוצים לשנות את התמונה המופיעה לצד ערכת העיצוב שלנו בפאנל הניהול, אנו יכולים לעשות את זה באמצעות החלפת screenshot.png בתמונה משלנו.

שינוי קבצי ה-CSS

אם נסתכל ב-info, אנו נראה שיש שני קבצי CSS רלוונטיים בתבנית:

stylesheets[all][] = style.css
stylesheets[print][] = print.css

אם יכולים להוסיף קובץ משלנו באמצעות הוספת השורה הבאה:

stylesheets[all][] = ran_style.css

אם ניצור את ran_style.css ונכניס לו חוקים שונים, אנו נראה שה-CSS השתנה.

קבצי CSS לגרסאות עבריות

אם אנו נוסיף את הסיומת rtl- (שימו לב למקף) לקובץ CSS קיים, אנו יוצרים בעצם קובץ CSS שיופעל אך ורק אם הדרופל יופעל בשפות שנכתבות מימין לשמאל (כמו עברית וערבית), כך למשל, אם אני אצור את הקובץ ran_style-rtl.css, הוא יופעל אך ורק כאשר דרופל נצפית בגרסה העברית. זה מאד שימושי אם אנו מתרגמים ערכת עיצוב שאינה נתמכת כלל בעברית.