מבוא

תבניות ג'ומלה בנויות כמעט תמיד לאנגלית, כלומר לכתיבה משמאל לימין.

יש מעט מאוד תבניות שיש להם החלפה לכתיבה מימין באופן מובנה.

אחת מהן היא אפילו חינם, וניתן להוריד אותה כאן. ויש בתשלום כאן.

אז מה צריך בשביל לתרגם תבנית ג'ומלה לעברית ?

צריך לשנות את הגדרות הקובץ העיצוב מסוג CSS, וזה מה שנעשה במדריך הזה.

הערה חשובה!

תבנית ג'ומלה בדרך כלל בנויה עם מיקומים מובנים. ככלל, תמיד עדיף לעצב את האתר דרך מערכת הניהול, ולא דרך קבצי ה CSS.

לכן, היכנסו לתבנית שלכם, והעמידו את המודולים במיקום הרצוי. ( right - left וכדומה ).

רק אחרי שמיקמתם את המודולים שלכם, התחילו במלאכת התרגום.

שאלה נפוצה - "אני רק רוצה לעצב תבנית, אני צריך לדעת את זה?"

תשובה - אם האתר באנגלית, אז התשובה היא לא. אם האתר יהיה גם בעברית או ערבית, התשובה היא כן.

מה זה CSS

CSS הוא קובץ אשר מחלק את הוראות העיצוב והעימוד של הדף.

הרעיון המרכזי הוא כזה:

קובץ HTML מכיל בתוכו בלוקים. לכל בלוק ניתן לשים הוראות עיצוב בקובץ אחר מסוג CSS.

בתרגום תבניות ג'ומלה אין צורך לגעת בקובץ HTML. אנו נשנה רק את הגדרות ה CSS.

את הגדרות ה CSS אפשר לחלק באופן גס לשני סוגים.

הוראות עימוד

הוראות עימוד הבלוק HTML המשפיעות על המיקום של הבלוק ביחס לבלוקים האחרים.

לדגומה: flot:left או position:absolute .

והגדרות עיצוב

הגדרות עיצוב תוכן הבלוג. הגדרות עימוד הבלוק כגון: font-size:10px

כלל הזהב למתחילים !
להשתדל להמנע כמה שיותר משינוי הגדרות העימוד של הבלוק. הסיבה לכך היא ששינוי בהגדרות הללו גורם לשינויים בבלוקים אחרים, ולעיתים קרובות לבעיות תאימות דפדפנים. או במילים אחרות, זה יכול לעבוד טוב בדפדפן פייר פוקס, אבל להרוס את העיצוב באקפלורר 7. מה שיגרום לכם להצטער שבכלל התחלתם.

זרימת CSS

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

( שימו לב, ב HTML - אין קשר לסדר ההוראות בקובץ ה CSS והוא לא משנה דבר ).

 

דוגמה

יש לנו בלוק ראשי שנקרא לו בשם המקורי "בלוק ראשי". בתוך הבלוק הראשי יש לנו אזור טקסט שנקרא לו "אזור טקסט". ובתוך אזור הטקסט יש לנו כותרת. אם נגדיר שהפונט יהיה אריאל בבלוק הראשי, מה יקרה באזור הטקסט?  נכון, אזור הטקסט יקבל באופן אוטומטי את ההגדרות מתוך הגדרות הבלוק הראשי. לעומת זאת, אם נגדיר בכותרת font-size: 26px מה יקרה לפונטים בבלוק הראשי ? נכון, כלום. מכוון שזה מעליו, ו CSS זורם כמו מים בנחל. איך מזהים מה בתוך מה ?

אין בעיה, הפיירבאג יגיד לכם את זה. ראו מדריך פיירבאג כאן.

 

אחרי שהבנו את אופן הזרימה של CSS תוכלו להבין את המשפט הבא:

בעת תרגום תבנית לעברית רצוי לשנות הגדרות ברמה הנמוכה ביותר של ה CSS.

כל שינוי ברמה גבוהה יותר יכול לגרור תוצאות לא רצויות.

 

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

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

הוראות שינוי ב-CSS

הפרדה בין הוראות

כל הוראה ב CSS נגמרת עם ; ( נקודה, פסיק ). זו ההוראה שמסמנת שנגמרה ההוראה.

לדוגמה :   ; fotn-size: 10px
לא כתבתי כאן את הפקודות עם ; מכוון שזה סתם מבלבל את העין. אבל זיכרו להוסיף נקודה פסיק בכל סוף הוראה של CSS. ( למתקשים - זה מקש "ף" כאשר השפה מכוונת לאנגלית )

הוראות שינוי :

למעשה יש מעט מאוד הוראות שינוי בעיברות. ראשית אנחנו נסדר את כיוון הטקסט, ואחרי זה את המיקום שלו. אז אחרי שעברנו עם פיירבאג וראינו את המיקום המקום לשנות: ננסה להוסיף את הפרמטרים הבאים - לפי הסדר הזה:

direction: rtl

ההוראה הזאת אומרת לקובץ ל"חשוב" עיברית. והנקודה צריכה להופיע בסוף המשפט, במקום בהתחלה. אך לעיתים, לא די בכך והטקסט נשאר מיושר לשמאל. במקרה כזה נוסיף :

text-align: right

אלו שני הפקודות שתפקידם לסדר את כיוון הטקסט ומיקומו. כעת עשו זאת בכל המקומות שאין ברירה אלא לעשות זאת. זיכרו, אם אין צורך עדיף שלא לשנות!

עימוד התמונות אחרי השינוי בכיוון הכתיבה

אחרי שמשנים את כיוון הטקסט, ומעמדים אותו במקום המתאים, נשאר רק לשנות את מיקום התמונות במידת הצורך.

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

 

סוגים של תמונות באתר

יש שני סוגים של תמונות. תמונות רקע של התבנית אשר מוכנסות דרך קובץ ה CSS.

ותמונות שהגולש יכול להעלות דרך החלק האחורי של האתר. אנו נתייחס כעת אך ורק לתמונות רקע של התבנית.

 

הפיכת התמונת

יש תמנות אשר בעלות מראה מסויים שמצביע על כיוון. למשל תמונה של חץ. <-

במידה ויש לנו תמונות כאלה, ניגשים לתוך האתר בתקיית WWW של וואמפ. > templates > משם ניגשים לתקיית התבנית שלכם > ושם צריכה להיות תקיה עם השם images.

מאתרים את התמנות שצריכות היפוך, והופכים אותם בעזרת אורך תמונות. ( עורך פשוט כמו כאן, או פוטושופ )

 

אופן הקריאה לתמונות

קובץ ה CSS קורא לתמונה על ידי קישור פנימי לתמונה הרלוונטית בתקיית התמונות.

לאחר מכן ה CSS ממקם את התמונה.

התמונה היא תמיד רקע, ולכן תהיה תחת פקודת : background ( או לפעמים background-image )

 

למיקום התמונה יש שני אלמנטים מרכזים: חזרה ומיקום.

 

חזרה

חזרה של התמונה בציר X או ציר Y. או ללא חזרה של התמונה.

לדוגמה -  background:repeat x

הוראה זו תגרום לאותה התמונה לרוץ שוב ושוב לאורך הבלוק של HTML.

אך נפוץ לא פחות גם ההוראה: background: ... no-repeat

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

 

מיקום

אם קבענו שהתמונה תוצג פעם אחת, יש לכוון את המיקום שלה.

כאן יש לנו 4 אפשרויות: למעלה-למטה. ימין שמאל.

ההוראה הראשונה תהיה ימין או שמאל, ההוראה השניה תהיה למטה או למעלה.

דוגמה :

background-image:url('img.png') no-repeat  right top

תמונה זו תוצג פעם אחת, בצד ימין למעלה.

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

לשם כך אפשר לשתמש באחוזים במקום במילים.

לדוגמה:

background-image:url('img.png') no-repeat  90% top

תמונה זו תוצג במיקום של 90% ביחס לבלוק של HTML. ( זוכרים משעורי מתמטיקה.. האפס הוא בצד שמאל! )

ואפשר גם לכתוב את המיקום בפיקסלים.

לדוגמה:

background-image:url('img.png') no-repeat  90% 8px

התמונה תוצג במיקום של 90% ביחס לבלוק של HTML, ושמונה פיקסלים למטה. ברירת המחדל היא TOP, ולכן אפס הוא למעלה והמספרים דוחפים את התמונה כלפי מטה ).

פתחו כל אתר, שחקו אם הפיירבאג עד שתאתרו תמונה, ואז שחקו בתוך הפיירבאג עם מיקום התמונה.( זה כמובן לא משפיע על האתר, רק על האופן שאתם רואים את האתר. אם תרעננו את הדף, הוא יחזור לקדמותו )

סיכום

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

הפעילו את המודלים השונים, הוסיפו טקסטים בתוך המודלים, שנו את סדר התצוגה של האיטמים,בקיצור שחקו יותר עם התבנית.

הרבה פעמים יתגלה לכם אזור שלא ראיתם בבדיקה הראשונית. עדיף לסדר את התבנית בהתחלה על שרת מקומי, מאשר לגלות את זה כשהאתר כבר בשרת מרוחק.

זהו, השתדלתי לתת בקיצור נמרץ את היסודות. מקווה שנהנתם, ובהצלחה.

עליך להירשם כדי להוסיף תגובות

נתן שלווה

מעצב ומתכנת פרילנסר. מלמד בנס-טכנולוגיות, שנקר ועוד.