עזרה:דפי CSS אישיים: הבדלים בין גרסאות בדף

מתוך ויקיציטוט, מאגר הציטוטים החופשי.
תוכן שנמחק תוכן שנוסף
Mikimik (שיחה | תרומות)
מ ←‏עריכת ההקדמה: תיקון קישור
Mikimik (שיחה | תרומות)
שורה 2: שורה 2:
באפשרותו של כל משתמש להתאים אישית את העיצוב באמצעות קובץ monobook.css - גיליון [[w:גיליונות סגנון מדורגים|CSS]] אישי לכל משתמש.
באפשרותו של כל משתמש להתאים אישית את העיצוב באמצעות קובץ monobook.css - גיליון [[w:גיליונות סגנון מדורגים|CSS]] אישי לכל משתמש.


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


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


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

גרסה מ־01:00, 1 ביוני 2009

משתמש חדש

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

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

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

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

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

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

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

ניתן למצוא גיליון css מפורט של המיזם ברקע monobook ב-//he.wikiquote.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/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;
}