הפוסט הופיע במקור ב 14.08.2013 בבלוג של לאה: ליקוטי שיבלים
לפני כמה חודשים לאה שלחה לי מייל עם הנושא: "תראי, אפשר לעצב את דף הלוגאין של וורדפרס" שכלל כמובן לינק להדרכה לביצוע ודמו נחמד. הבקשה של לאה הגיע בתזמון מושלם – בדיוק היה לי "חור" ברצף העבודה ובחרתי אתר לנסות עליו את העניין 🙂
נגשתי לעבודה כמעצבת -פתחתי פושטושופ והתחלתי לעצב. שלחתי את התוצר ללאה והיא אמרה שהוא יפה מאוד – רק שרואים שלא הסתכלתי על ה HTML לפני שניגשתי לעצב. אהה, ברור שלא! אני עובדת בפוטושופ לא ב notepad++ 🙂
בינתיים, בין הזמן שאני עיצבתי, לבין הזמן שלאה לא התפנתה לתכנות של העמוד המעוצב שלי, אני החלטתי לנסות את ידי בתכנות.
אני ברומן עם CSS כבר כמעט שנה, ובחודשים האחרונים החלטתי לעבור שלב ולהתחיל להעמיק את הקשר עם הרחבה ל HTML ולא עלינו גם PHP. אז זה לא קל (ובטח שלא ללאה שעוזרת לי המון בסבלנות רבה) אבל ללא ספק מאתגר. אז כמו בומרנג העיצוב שלי חזר אלי וסיפק לי לא מעט אתגר.
ההדרכה לשינוי עיצוב ברירת המחדל של עמוד הלוגאין כללה הוספה של תמונת רקע, החלפת לוגו וורדפרס בלוגו ייחודי, עיצוב שדות שם משתמש וסיסמה והעלאתם ב fade.
אצלי העיצוב היה קצת שונה:
עמוד הלוג אין לא נמצא כחלק מהתבנית ולכן לא ניתן להוסיף לאלמנטים בעמוד (כלומר ניתן פיזית, אבל אנחנו לא נוהגים לשנות את קבצי ה-core). התחלתי לעבוד לפי המדריך – שיניתי את הלוגו של וורדפרס ללוגו של האתר שלנו ואז התחלתי למצוא פתרונות לשאר העיצוב שלא ממש יישר קו עם המדריך….
האתגר הראשון
בדמו סרג' גודינג משתמש בתמונה גדולה כתמונת רקע, פשוט ממקמים את התמונה וזהו 🙂 בעיצוב שלי לעומת זאת הייתה מסגרת של פסים מקווקווים וצבע רקע לבן. לא רציתי להשתמש בתמונה אחת גדולה כי ברמה התכנותית זה עלוב… וגם יש מצב שלא יראו את כל התמונה ואז אין ערך למסגרת או שיראו שוליים מעבר לתמונה ושוב לא תהייה מסגרת 🙁 בקיצור – לא טוב.
הפתרון שמצאנו לעניין הוא שימוש ב'פסדו אלמנט' before ו after.
לאלמנט body.login:before נתנו את העיצוב של המסגרת שנבנית ע"י תמונת רקע שחוזרת על עצמה. ולאלמנט body.login:after ניתנה ההגדרה של צבע רקע לבן.
כדי לשלוט על מה למעלה מה למטה (כי מסתבר שאלמנטים ב HTML לא מתנהגים יפה כמו שכבות בפוטושופ וחבל…) נתנו הגדרה של z-index של 2- למסגרת ו 1- לרקע הלבן.
דבר נוסף היה לתת רוחב וגובה שונים לצבע רקע הלבן כדי שיראו גם את המסגרת.
body.login:before {
background: url("../login/images/bg.png") repeat scroll left center transparent;
content: "";
display: block;
height: 100%;
position: absolute;
width: 100%;
z-index: -2;
}
body.login:after {
background-color: #FFFFFF;
content: "";
display: block;
height: 96%;
position: absolute;
right: 1%;
top: 2%;
width: 96%;
z-index: -1;
}
האתגר השני
הוספת לוגו אורט. בדמו בוצעה החלפה של לוגו וורדפרס בלוגו החברה. אבל בעיצוב שלי היה לוגו שהוא שם האתר והוא החליף את לוגו וורדפרס, אבל היות וכל האתרים שלנו הינן חלק מכל מערכת של אורט, גם לוגו אורט היה צריך להופיע וכמובן לקשר לאתר אורט.
פה נכנס JS כי לא הייתה דרך אחרת לייצר קישור מאפס. ואז, אחרי שיצרנו אלמנו a פשוט הגדרנו לו תמונת רקע של לוגו אתר אורט.
האתגר השלישי
עיצוב של שדות input. בדמו הייתה הדרכה איך לשנות את הצבע רקע של האזור שעוטף את השדות ולעצב את השדות עצמם. אבל כמו תמיד – גם הפעם העיצוב שלי התעלה על הדמו וכלל מסגרת תכלת חיצונית, מסגרת אפורה וגם צל פנימי (בפוטושופ אפשר – אז למה לא 🙂 )
*כן אני יודעת שאת הצל הפנימי כמעט לא ניתן לראות – אבל תאמינו לי, הוא קיים והוא עושה את ההבדל.
לעזרתי נחלצה המאסטרית שלי בענייני CSS הלא היא לאה ורו (ותודה ללאה כהן שהכירה לי אותה) שמדגימה במצגת מאוד מעניינת [החל משקופית 21] את השימושים השונים שניתן לעשות עם box-shadow. אם חשבתם ש box-shadow משמש רק ליצירת צל אז לא מיציתם את מגוון האפשרויות שניתן ליישם איתו.
כך הגדרנו לשדה input מסגרת בצבע תכלת עם פינות מעוגלות ברדיוס של 2 פיקסלים. ואת המסגרת האפורה והצל הפנימי ע"י box-shadow.
box-shadow מאפשר הוספה של עיצוב ע"י פסיק והוספת הפרמטרים הרצויים.
הוספה של הערך inset תהפוך את הצל / מסגרת שנוצרת ע"י ה box-shadow לפנימי.
box-shadow: 0 0 0 3px rgba(226, 234, 238, 0.4), 0 0 4px rgba(0, 0, 0, 0.25) inset;
0 0 0 3px rgba(226, 234, 238, 0.4) מייצר את המסגרת האפורה מסביב לשדה input.
0 0 4px rgba(0, 0, 0, 0.25) inset מייצר את הצל הפנימי.
מכאן היישום של העיצוב של הכפתור, הפניות לשחזור סיסמה הודעות שגיאה בטופס הלך חלק.
בתהליך כתיבת ה CSS השתמשתי ב css-hat שמייצר קוד משכבת פוטושופ בהצלחה רבה מאוד. אבל היות ובפוטושופ כל עיצוב היה בשכבה נפרדת, האתגר היה לשלב את העיצובים לאלמנט אחד.
כל הקוד שקשור לעמוד לוגין (CSS, JS, תמונות וקובץ readme) נמצא בתיקייה ייחודית שנמצאת תחת התבנית. למעט 2 תוספות שיש להוסיף לקובץ function.php כך שאם רוצים ליישם באתר אחר עיצוב ייחודי ניתן לעשות זאת בקלות.
את התוצאה הסופית ניתן לראות פה. וניתן להוריד את קוד מכאן.