עזרה:דפי CSS אישיים

מתוך ויקיפדיה, האנציקלופדיה החופשית

באפשרותו של כל משתמש להתאים אישית את העיצוב באמצעות קובץ monobook.css - גליון CSS אישי לכל משתמש.

תוכן עניינים 1 קובץ הmonobook.css האישי 2 עצבו את הממשק בעצמכם 3 דוגמאות 3.1 שינוי מראה תיבת העריכה 3.2 הסרת המספרים שמייצגים שינויים בבתים מדף השינויים האחרונים 3.3 שינוי מראה דיונים בוויקי

[עריכה] קובץ הmonobook.css האישי

כדי לגשת ל־monobook.css שלכם גשו למשתמש:שם המשתמש/monobook.css (החלף את "שם המשתמש" בשם המשתמש שלך). בקובץ זה תוכלו לכתוב את הגדרות העיצוב שאתם מעוניינים בהם באמצעות CSS.

שינויי עיצוב אשר מתאימים לכלל משתמשי האתר נמצאים במדיה ויקי:monobook.css- קובץ css כללי שמשפיע על כל המשתמשים באתר.

הערה: מדריך זה מתייחס לרקע (Skin) ברירת המחדל-monobook. במידה והינכם משתמשים ברקע אחר קובץ ה-css המתאים יהיה:

• רגיל: Standard.css
• מים כחולים: Cologneblue.css
• נוסטלגי: Nostalgia.css
• MySkin: Myskin.css

[עריכה] עצבו את הממשק בעצמכם

ניתן למצוא גיליון css מפורט של המיזם ברקע monobook ב http://he.wikipedia.org/style/monobook/main.css. יש לשים לב לתיעוד (הערות) המופיע בצורה הבאה:

/* הערה */

הערות מאפשרות להבין מהי תכליתו של הקטע המופיע לאחריהן.

כך למשל בקובץ הנ"ל מופיע הקוד הבא:

/* user notification thing */
.usermessage {
    background-color: #ffce7b;
    border: 1px solid #ffa500;
    color: Black;
    font-weight: bold;
    margin: 2em 0em 1em 0em;
    padding: 0.5em 1em;
    vertical-align: middle;
}

באמצעות הערה בראש הקטע הנ"ל ניתן להבין כי הוא אחראי על ההודעות משתמש (כלומר ההודעה "יש לך הודעות חדשות" המופיעה כאשר נערך דף שיחת המשתמש).

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

#toc { 
    /*border:1px solid #2f6fab;*/
    border:1px solid #aaaaaa;
    background-color:#f9f9f9;
    padding:5px;
    font-size: 95%;
}
#toc .tocindent { margin-left: 2em; }
#toc .tocline { margin-bottom: 0px; }
#toc p { margin: 0 }
#toc .toctoggle { font-size: 94%; }
#toc .editsection { 
    margin-top: 0.7em; 
    font-size: 94%;
}

המאפיין שאותו אנו רוצים לשנות בדוגמה זו הוא background-color (צבע רקע), על כן יש להעתיק את הקוד המתאים לקובץ הmonobook.css האישי ולשנות את המאפיין המתאים:

#toc { 
    /*border:1px solid #2f6fab;*/
    border:1px solid #aaaaaa;
    background-color:yellow;
    padding:5px;
    font-size: 95%;
}
#toc .tocindent { margin-left: 2em; }
#toc .tocline { margin-bottom: 0px; }
#toc p { margin: 0 }
#toc .toctoggle { font-size: 94%; }
#toc .editsection { 
    margin-top: 0.7em; 
    font-size: 94%;
}

לאחר השמירה יש לרענן את הדפדפן ולנקות את המטמון באמצעות Ctrl+F5 באקספלורר או Ctrl+R במוזילה/פיירפוקס. אם ההוראות בוצעו נכון כעת צבע הרקע של תוכן העניינים יהיה צהוב.

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

[עריכה] דוגמאות

אלו דוגמאות מוכנות שכל אחד ואחת יכול/ה להעתיק ולהדביק ב־monobook.css האישי, לשפר אותן או לערוך אותן. כדי להפעיל את הדוגמאות יש להעתיק את קוד הדוגמה ל־monobook.css שלך וללחוץ "הראה תצוגה מקדימה"- אם השינוי מוצא חן בעיניך יש ללחוץ שמור דף - אם לאחר השמירה העיצוב לא השתנה יש לנסות לרענן באמצעות Ctrl+F5 באקספלורר או Ctrl+R במוזילה/פיירפוקס.

[עריכה] שינוי מראה תיבת העריכה

הקוד משנה את רקע תיבת העריכה לתמונת "נבולת הנמלה" ואת צבע הטקסט לירוק.

#wpTextbox1{
    background: url(http://upload.wikimedia.org/wikipedia/commons/7/71/Ant_nebula.jpg) 0 0 no-repeat !important;
color:#99ff99;
}

[עריכה] הסרת המספרים שמייצגים שינויים בבתים מדף השינויים האחרונים

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

/* הסתרת מספר התווים ששונו */
.mw-plusminus-pos, .mw-pluminus-neg, .mw-plusminus-null, .mw-plusminus-bold{
display:none;
}

[עריכה] שינוי מראה דיונים בוויקי

בדוגמה זו מוצגת הגדרה כך שלכל תגובה במרחבי השיחה תתווסף מסגרת עליונה ותחתונה בצבע אפור מנוקדת. ניתן לשנות את ההגדרה כך שבמקום מסגרת מנוקדת תוצג מסגרת עם קו ישר באמצעות החלפה של dotted לsolid.

התוצאה תראה בערך כך:

.ns-1 dd, .ns-3 dd, .ns-5 dd, .ns-7 dd, .ns-9 dd, 
.ns-11 dd, .ns-13 dd,.ns-15 dd, .ns-101 dd { 
   margin: 0;
   padding: 0;
}

.ns-1 dl, .ns-3 dl, .ns-5 dl, .ns-7 dl, .ns-9 dl, 
.ns-11 dl, .ns-13 dl, .ns-15 dl, .ns-101 dl { 
   border-top: dotted 1px #E0E0E0; 
   border-right: dotted 1px #E0E0E0; 
   padding-top: 0.5em; 
   padding-right: 0.5em; 
   margin-right: 1em; 
}

בשביל לבחור צבע אחר לקווים אפשר להחליף את הערך E0E0E0 לפי רשימת הצבעים הזאת, או כל מספר אחר.