וובמאסטר - תיכנות ובניית אתרים

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

רן בר-זיק ,‏ אינטרנט ישראל‏ ‏/‏ 13 מאי, 2011
F+
F-

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

 

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

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

image

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

image

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

image

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

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

image

קובץ ה-info

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

image

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

image

מעכשיו כל שינוי שנעשה בקבצי ה-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, הוא יופעל אך ורק כאשר דרופל נצפית בגרסה העברית. זה מאד שימושי אם אנו מתרגמים ערכת עיצוב שאינה נתמכת כלל בעברית.

רן בר-זיק, אינטרנט ישראל

מתכנת PHP מנוסה ובעל ידע רב בפיתוח לאינטרנט על בסיס LAMP. מומחה במערכות דרופל, ג'ומלה ו-וורדפרס. שולט היטב בכל מה שקשור לפרונט אנד: JavaScript: jQuery ו-MooTools,ActionScript 2/3 וכמובן HTML 5 + CSS 3.

אינטרנט ישראל: www.internet-israel.com
תגיות: דרופל‏  /  CMS‏  /  מדריך‏  /  בניית אתרים‏  

תגובות בפייסבוק

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות