SharePoint 2010 Master Page – מה השתנה

אחת הסיבות העיקריות לחוסר שביעות הרצון מהעיצובים המובנים ב- MOSS היתה "תחכום היתר" שלהן – מלא טבלאות מקוננות, תמונות רקע ו- gradiants, וכמובן ערכות הנושא (Themes) ששינוי שלהן דרש התערבות בקבצים בשרת ועוד ועוד (אגב – ראו כאן את האתר היפה ביותר לדעתי שמבוסס MOSS 2007 ונאמן למקור).

המראה החדש – הבדל של Night And Day

בגירסת SP2010 לקחו לתשומת לב את הבעיות הללו, ועשו שינוי די משמעותי בכל נושא העיצוב, בעיקר בדגשים הבאים:

• Tableless – אין יותר טבלאות, רק Div-ים. להדיוט HTML כמוני זה אמנם מסבך קצת את החיים (קשה "לראות" איפה הפקד שאתה רוצה יוצא) אבל משיחותיי עם מעצבי-על עולה שלבנות היום אתר עם טבלאות זה כמו לבנות בתים מבוץ מיובש, או לתכנת משחקי תלת-מימד ב-Logo, או… טוב העיקרון ברור – לא עוד טבלאות!
• ערכות נושא ניתנות לשינוי – באמצעות מנגנון ה- Themeing (שגם אליו אגיע מתישהו) ניתן ליצור ערכות נושא בקלות הן מתוך ה-SP והן מ- PowerPoint ולשנות את ערכת הצבעים הכללית. אמנם זה כמובן לא מחליף את המבנה העיצובי ואת תמונות הרקע (אם כי כן מחליף צבעים של תמונות קיימות – יפה!), אבל זה נותן למנהלי האתר יכולת לתת מגוון של עיצובים סבירים ושונים ללא כל מאמץ.
• החלת ה- Master Pages גם על דפי אפליקציה + תיבות דיאלוג – מעכשיו ניתן להחיל את עיצוב ה- MP שלכם *גם על דפי ה- Layouts_ הידועים לשמצה (בתחום העיצוב), שבגירסה הקודמת הושפעו אך ורק מ- application.master שישב בשרת. בנוסף, מאפיין חדש בשם s4-notdlg מגדיר עבור איזורי תוכן (DIV's) לא להופיע בתיבות דיאלוג שנפתחות (למשל דף עריכת מאפיינים וכו') – כך ניתן להשתמש באותו MP הן עבור האתר והן עבור תיבות הדיאלוג, ולקבל מראה שונה כנדרש.

     * החלת MP גם על דפי Layouts נעשית ב- Web App. General Settings:

    

עוד לקח (כנראה) הוא חיסול כל ה- Master Pages הלא שימושיים בעליל שהיו ב- 2007, כגון BlueBand, Orange משהו ועוד… נשארנו עם סה"כ 4 MP הבאים:

• Minimal.Master – היה קיים קודם כ"תוספת" של MSDN, עכשיו זה OOB. מאפשר להתחיל עיצוב MP מאפס, כאשר הקונטרולים המנדטוריים קיימים.
• Default.Master – זה מועתק ישירות מ- 2007, ונועד לשמר את המראה הקודם למי שלא ביצע Visual Upgrade (ראו דוגמה בסוף הפוסט הזה)
• V4.Master – זה למעשה ה-Default.master החדש, עם הכותרת השחורה (כמו ברוב צילומי המסך שעשיתי עד כה).
• NightAndDay.Master – זה ה- MP החדש לאתרי Publishing ובכלל, והנה איך שהוא נראה מהקופסה:

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

שינויים ב- Header

קודם כל מומלץ כמובן להחיל על האתר שלכם את ה- NightAndDay.Master (כמובן שעוד יותר מומלץ להעתיק את הקובץ הנ"ל ולעבוד על קובץ משלכם וכו' – לא טרחתי לעשות את זה כאן):

להלן 5 שינויים בסיסיים שאני הולך לעשות ב- Header של ה- NightAndDay.Master:

1. שינוי הלוגו – פשוט החלפת תמונת רקע במקום Adventure Works  + הגדרת הגובה של כל ה- Header
2. הסתרה של ה"כפתורים החברתיים" החדשים – אני מנצל את ההזדמנות להביע שוב את דעתי בנושא האובר-חברתיות ולהעיף את כפתורי ה "I like it" וה- Tagging – ומתערב איתכם שרוב הארגונים שיטמיעו SP2010 יעשו אותו דבר.
3. כפתור העזרה – קודם כל אני רוצה להזיז אותו לקצה השמאלי למטה, דבר שני – במקום שלחיצה עליו תפתח את מסך העזרה המובנה (שמעולם לא עזר לאף אחד), אני ארצה להפנות לדף עזרה משלנו (יש יכולת חדשה של "ספריית עזרה" באוסף האתרים – אני לא אשתמש בה אלא פשוט אפנה לקישור לדף help.aspx)
4. פקד Welcome - (שמתם לב שביטלו את ה"ברוך הבא"? אולי בגלל הבעיה המגדרית הקשה שזה יצר בעברית…) גם אותו נרצה להזיז לצד שמאל למטה, ליד כפתור העזרה.
5. פעולות אתר – משום מה הפונט שם הוא David וזה ממש צורם (למי שרגיש לפונטים). אני אחליף אותו פשוט ל- Tahoma.

התוצאה הסופית תהיה משהו כזה – לא שינוי דרמטי, אבל מספיק בשביל להבין את העיקרון:

הערה – חלק מהשינויים ידרשו שינוי ב- CSS (קובץ המכיל את הגדרות העיצוב – Classes - של  הרכיבים השונים). בנספח למטה ישנו מדריכון קצר איך להוסיף CSS משלכם ל- Master Page – בדיוק כמו ב- 2007.

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

1. שינוי הלוגו

הלוגו הוא סה"כ קובץ תמונה בשם  Style library/images/nd_logo.jpg. הדבר היחיד שראוי לציון הוא, שהתמונה היא לבנה, כך שאם תעתיקו אותה לצרכי עריכה (כמו שאני עשיתי), לא תראו כלום… אז שימו אותה על רקע כהה ותראו. כמו-כן גיליתי את הפונט היפה בו השתמשו ליצירת הכיתוב, והוא נקרא Poor Richard (יש דבר כזה!), אז ע"י שימוש ב- PPT ניתן ליצור לוגו דומה-אך-שונה משלכם.

אחרי שיצרתם תמונה, תעלו אותה לספריית ה- images, פתחו את ה- MP (כולל check-out), חפשו ב-MP את התגית "LogoImageUrl" ושנו את שם הקובץ לזה שלכם:

אם זו העריכה הראשונה שאתם מבצעים ב- MP, תקבלו את ההודעה הבאה שמבשרת לכם שה- MP נותק מהתבנית וכו' – Don't Panic! פשוט תאשרו ותמשיכו הלאה בלב בוטח:

ובכדי להגדיל/להקטין את הגובה של כל הרצועה של ה- Header, ניתן להשתמש ב- class בשם site-image-title – שימו לב שלא ניתן לכווץ מדי את הרצועה, אחרת היא מתחילה להתנהג מוזר.

2. הסתרת הכפתורים החברתיים המיותרים

כאן יש משהו מוזר שטרם זכיתי לרדת לעומקו – הכפתורים האלו כלל לא מופיעים ב- MP:

טוב, עד שנבין את זה, נשתמש פשוט ב- CSS – ה- class שאחראי על החבר'ה האלו נקרא ms-mini-socialNotif, וכל שנדרש הוא לפתוח את קובץ ה- CSS החדש שלנו (ראו בנספחון בסוף), ולהוסיף לו את השורה הבאה:

.ms-mini-socialNotif {display:none;}

3+4. כפתור העזרה + פקד Welcome

<div class="s4-trc-container s4-notdlg top-row-elements">

<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">

.s4-help {float:left !important;}

.ms-SPLink, ms-SpLinkButtonInActive, ms-welcomeMenu  {padding-top:10px;}

<a href="BLOCKED SCRIPTTopHelpButtonClick...

<a href="../../Pages/help.aspx"

5. שינוי פונט פעולות אתר

.ms-menu-a {font-family:Tahoma;}

נספחון – הוספת הפנייה ל-CSS מתוך ה- Master Page

1.   הוסיפו קובץ CSS חדש לספרייה כלשהי באתר שלכם (מקובל לשים תחת Style Library):
   
2. שנו את השם של הקובץ החדש למשהו שתזכרו (למשל Dentelski.css)
3. פתחו את ה- Master Page ב- SPD וחפשו את התגית </head> (סוף התגית למעשה) – בשורה שלפני, הוסיפו את ההפנייה הבאה (כמובן תוך החלפת שם הקובץ בסוף ה- href):

<link rel="stylesheet" href="../../Style Library/Dentelski.css" type="text/css"/>

זהו, מעכשיו כל מה שתוסיפו לקובץ ה-CSS ייקרא ע"י הדף אחרי כל CSS אחר שקיים כברירת מחדל, משה שיאפשר לכם "לדרוס" class-ים קיימים, כמו שמודגם למעלה.

<< חזרה לטבלת החידושים ב- SharePoint 2010