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

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

יש ליצור במרחב המשתמש שני דפים: מיוחד:YourName/common.css וכן דפים ספציפיים לתבניות (למשל vector או monobook). ההסבר כאן מתייחס ל-common.css.
ניתן לערוך מכל דפדפן. ההסבר מדגים בגוגל כרום. במוזילה פיירפוקס אפשר להשתמש בהרחבת Firebug ככלי עזר.

הדרך: העדפות ← מראה ← קובץ CSS מותאם אישית. אם לא ערכת בעבר, הקישור יהיה באדום. אם ערכת, הוא יהיה כחול.

דוגמה שימושית: ברשימת המעקב פריטים שמוּודגשים (bold). אם רוצים להסיר זאת, צריך לזהות את האלמנט המתאים ולשנות את תכונת העיצוב המתאימה.

נפתח את דף "רשימת המעקב" ונשתמש בכלי מפתחים (Inspect element) כדי לראות את מבנה ה-HTML של הפריט.
נראה אלמנט מסוג a בתוך strong שבעל class בשם mw-watched. כדי לשנות את המשקל של הטקסט (font-weight) נרשום בדף ה-CSS שלנו כלל מסוג:
strong.mw-watched a {
font-weight: normal;
}
כך נבטל את ההדגשה. אפשר גם לשנות לכתב מוטה (italic) על ידי הוספת font-style: italic;

להסתרת חלקים לחלוטין משתמשים ב-display:none;. לדוגמה, כדי להסתיר את תיבת האפשרויות בדף "תרומות המשתמש":
form.mw-contributions-form {
display: none;
}
הרעיון הוא למצוא באמצעות Inspect element אפיון ספציפי מספיק כדי לא להיעלב אלמנטים אחרים בטעות.

ב-CSS: תגים נכתבים כפי שהם (למשל div). מחלקות (class) מקדימים בנקודה: .className. id מקדימים ב-# (דיאז): #siteNotice.
דוגמה: אם הודעה מוכלת בתוך div עם id בשם siteNotice, אפשר להסתיר אותה כך:
div#siteNotice { display: none; }
כאשר כותבים אלמנט בתוך אלמנט אחר רושמים את המכול (container) ואחריו רווח ואז את המוכל.

#toc { background-color: yellow; }

#wpTextbox1 {
background: url(http://upload.wikimedia.org/wikipedia/commons/a/aa/Planetary_Nebula_Mz_3.jpg) 0 0 no-repeat !important;
color: #99ff99;
}
אפשר גם לשנות גודל וגופן בתיבת העריכה:
#wpTextbox1 { font-size: larger; font-family: "Times New Roman"; }

#bodyContent { font-family: "David"; }
ניתן אף לטעון גופן מרוחק בעזרת @font-face (חיבור מורכב יותר).

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

#ca-addsection a { background-color: lightGreen; }

.diff-deletedline, .diff-addedline { background: #EAFAEA; }

ניתן לשנות צבעים של קישורים פנימיים וחיצוניים בעזרת כללים כמו:
.mw-body-content a:link { color: #0000FF; }
.mw-body-content a.external { color: #008000; }

.action-view #firstHeading {
text-shadow: 2px 2px 5px red;
background-color: #FFFF99;
color: red;
display: block;
}

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

משתמשים בוויקיפדיה יכולים לשנות איך הדפים נראים בעזרת CSS.
CSS = קובץ שקובע איך דברים בדף נראים. HTML = שפת הסימון של הדפים.

צריך ליצור שני דפים במרחב המשתמש. אחד נקרא common.css. דפים אחרים יהיו לפי העיצוב (למשל vector).

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

דוגמה קלה: ברשימת המעקב יש פריטים מודגשים (גופן מודגש). אפשר לבטל זאת בעזרת כלל CSS שנמצא אחרי שמוצאים את האלמנט.

פותחים את הדף שרוצים ושולפים את כלי המפתחים (Inspect element). כלי זה מראה איפה כל חלק בדף כתוב בקוד.
אם ה-HTML מראה a בתוכו strong עם class בשם mw-watched, נכתוב:
strong.mw-watched a { font-weight: normal; }
זה מבטל את ההדגשה. להחליף לכתב מוטה מוסיפים font-style: italic;

להסתיר משהו לחלוטין משתמשים ב-display:none;. דוגמה:
form.mw-contributions-form { display: none; }
כך תיעלם תיבת אפשרויות מסוימת.

ב-CSS: מחלקה מתחילה בנקודה. id מתחיל ב-#.
דוגמה להסתתרות הודעה: div#siteNotice { display: none; }

#toc { background-color: yellow; }
#wpTextbox1 { background: url(http://upload.wikimedia.org/wikipedia/commons/a/aa/Planetary_Nebula_Mz_3.jpg); color: #99ff99; }
#wpTextbox1 { font-family: "Times New Roman"; }
#bodyContent { font-family: "David"; }
span.mw-plusminus-pos, span.mw-pluminus-neg { display: none; }
#ca-addsection a { background-color: lightGreen; }
.diff-deletedline, .diff-addedline { background: #EAFAEA; }
.mw-body-content a:link { color: #0000FF; }

טיפ קטן: השתמשו ב-Inspect element כדי למצוא בדיוק מה לשנות.