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

משתמש חדש

למה ליצור חשבון? איך ליצור חשבון חדש דף יצירת חשבון חדש

דף משתמש דף שיחה דף משנה העדפות העדפות מתקדמות (JS) העדפות מתקדמות (CSS)

ויקיציטוט צעד אחר צעד אודות ויקיציטוט עקרונות וקווים מנחים

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

דף ה-monobook.css האישי

בדף ה-monobook.css האישי שלכם תוכלו לכתוב את הגדרות העיצוב שאתם מעוניינים בהן באמצעות CSS.

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

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

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

עצבו את הממשק בעצמכם

ניתן למצוא את גיליון ה-css של המיזם ב-מדיה ויקי:Common.css וגיליון נוסף עבור רקע monobook ב-מדיה ויקי:Monobook.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/a/aa/Planetary_Nebula_Mz_3.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-4 dd, .ns-5 dd, .ns-7 dd, .ns-9 dd, .ns-11 dd, .ns-13 dd, .ns-15 dd, .ns-101 dd
{ 
   margin: 0 0 1em 0;
   padding: 0;
}
 
.ns-1 dl, .ns-3 dl, .ns-4 dl, .ns-5 dl, .ns-7 dl, .ns-9 dl, .ns-11 dl, .ns-13 dl, .ns-15 dl, .ns-101 dl
{ 
   border-top: solid 1px #F0F080; 
   border-right: solid 1px #F0F080; 
   padding-top: 0.5em; 
   padding-right: 0.5em; 
   margin: 0 1em 0 0;
}
 
.ns-1 dl, .ns-3 dl, .ns-4 dl, .ns-5 dl, .ns-7 dl, .ns-9 dl, .ns-11 dl, .ns-13 dl, .ns-15 dl, .ns-101 dl
{ background-color: #FFFFE0; }
 
.ns-1 dl dl, .ns-3 dl dl, .ns-4 dl dl, .ns-5 dl dl, .ns-7 dl dl, .ns-9 dl dl, .ns-11 dl dl, .ns-13 dl dl, .ns-15 dl dl, .ns-101 dl dl
{ background-color: #FFFFEE; }
 
.ns-1 dl dl dl, .ns-3 dl dl dl, .ns-4 dl dl dl, .ns-5 dl dl dl, .ns-7 dl dl dl, .ns-9 dl dl dl, .ns-11 dl dl dl, .ns-13 dl dl dl, .ns-15 dl dl dl, .ns-101 dl dl dl
{  background-color: #FFFFE0; }
 
.ns-1 dl dl dl dl, .ns-3 dl dl dl dl, .ns-4 dl dl dl dl, .ns-5 dl dl dl dl, .ns-7 dl dl dl dl, .ns-9 dl dl dl dl, .ns-11 dl dl dl dl, .ns-13 dl dl dl dl, .ns-15 dl dl dl dl, .ns-101 dl dl dl dl
{ background-color: #FFFFEE; }
 
.ns-1 dl dl dl dl dl, .ns-3 dl dl dl dl dl, .ns-4 dl dl dl dl dl, .ns-5 dl dl dl dl dl, .ns-7 dl dl dl dl dl, .ns-9 dl dl dl dl dl, .ns-11 dl dl dl dl dl, .ns-13 dl dl dl dl dl, .ns-15 dl dl dl dl dl, .ns-101 dl dl dl dl dl
{ background-color: #FFFFE0; }
 
.ns-1 dl dl dl dl dl dl, .ns-3 dl dl dl dl dl dl, .ns-4 dl dl dl dl dl dl, .ns-5 dl dl dl dl dl dl, .ns-7 dl dl dl dl dl dl, .ns-9 dl dl dl dl dl dl, .ns-11 dl dl dl dl dl dl, .ns-13 dl dl dl dl dl dl, .ns-15 dl dl dl dl dl dl, .ns-101 dl dl dl dl dl dl
{ background-color: #FFFFEE; }
 
.ns-1 dl dl dl dl dl dl dl, .ns-3 dl dl dl dl dl dl dl, .ns-4 dl dl dl dl dl dl dl, .ns-5 dl dl dl dl dl dl dl, .ns-7 dl dl dl dl dl dl dl, .ns-9 dl dl dl dl dl dl dl, .ns-11 dl dl dl dl dl dl dl, .ns-13 dl dl dl dl dl dl dl, .ns-15 dl dl dl dl dl dl dl, .ns-101 dl dl dl dl dl dl dl
{ background-color: #FFFFE0; }
 
.ns-1 dl dl dl dl dl dl dl dl, .ns-3 dl dl dl dl dl dl dl dl, .ns-4 dl dl dl dl dl dl dl dl, .ns-5 dl dl dl dl dl dl dl dl, .ns-7 dl dl dl dl dl dl dl dl, .ns-9 dl dl dl dl dl dl dl dl, .ns-11 dl dl dl dl dl dl dl dl, .ns-13 dl dl dl dl dl dl dl dl, .ns-15 dl dl dl dl dl dl dl dl, .ns-101 dl dl dl dl dl dl dl dl
{ background-color: #FFFFEE; }
 
.ns-1 dl dl dl dl dl dl dl dl dl, .ns-3 dl dl dl dl dl dl dl dl dl, .ns-4 dl dl dl dl dl dl dl dl dl, .ns-5 dl dl dl dl dl dl dl dl dl, .ns-7 dl dl dl dl dl dl dl dl dl, .ns-9 dl dl dl dl dl dl dl dl dl, .ns-11 dl dl dl dl dl dl dl dl dl, .ns-13 dl dl dl dl dl dl dl dl dl, .ns-15 dl dl dl dl dl dl dl dl dl, .ns-101 dl dl dl dl dl dl dl dl dl
{ background-color: #FFFFE0; }
 
.ns-1 dl dl dl dl dl dl dl dl dl dl, .ns-3 dl dl dl dl dl dl dl dl dl dl, .ns-4 dl dl dl dl dl dl dl dl dl dl, .ns-5 dl dl dl dl dl dl dl dl dl dl, .ns-7 dl dl dl dl dl dl dl dl dl dl, .ns-9 dl dl dl dl dl dl dl dl dl dl, .ns-11 dl dl dl dl dl dl dl dl dl dl, .ns-13 dl dl dl dl dl dl dl dl dl dl, .ns-15 dl dl dl dl dl dl dl dl dl dl, .ns-101 dl dl dl dl dl dl dl dl dl dl
{ background-color: #FFFFEE; }

שינוי צבע הרקע של מסגרת התוכן

ניתן לשנות את צבע הרקע של מסגרת התוכן (שכוללת את הכותרת של כל דף וכן את תוכן הדף עצמו) בצורה הבאה:

#content{
background:#ffffef;
}

ניתן גם להוסיף תמונת רקע:

#content{
 background-image: url('http://upload.wikimedia.org/wikipedia/commons/d/d3/Kiwi_aka.jpg');
background-repeat:no-repeat;
background-position:0 40px;
}